带有图像和点击响应的 Nativescript-vue 按钮（点击事件）答案

【问题标题】：Nativescript-vue buttons with image and tap response (tap-down event)带有图像和点击响应的 Nativescript-vue 按钮（点击事件）
【发布时间】：2018-10-11 14:21:54
【问题描述】：

我刚开始在 play.nativescript.org 上使用 Nativescript-vue。
现在我想创建带有图像的大按钮，当您点击（点击向下）时会稍微改变颜色。

当您点击时，普通按钮已经略微改变颜色（在 android 上测试）。但是带有图像的普通按钮不会，带有图像的布局元素也不会。

游乐场示例在这里：my code on play.nativescript（我也粘贴了下面的代码）。
在这个基本应用程序中，下方的两个按钮（无图像）在点击时会改变颜色，但顶部的两个按钮（有图像）不会。

如何为带有图像的按钮添加一些动画/反馈？

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <GridLayout columns="*, *" rows="*, *">
            <GridLayout @tap="onButtonTap" row="0" col="0" columns="*" rows="*" backgroundColor="#43b883">
                <Image row="0" col="0" src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png" />
            </GridLayout>
            <Button text="Button" @tap="onButtonTap" row="0" col="1" backgroundImage="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"
         backgroundColor="#1c6b48" />
            <Button text="Button" @tap="onButtonTap" row="1" col="0" backgroundColor="#289062" />
            <Button text="Button" @tap="onButtonTap" row="1" col="1" backgroundColor="#43b883" />
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        methods: {
            onButtonTap() {
                console.log("Button was pressed");
            }
        },

        data() {
            return {};
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

【问题讨论】：

标签： android css nativescript-vue

【解决方案1】：

我发现添加一些 CSS 来设置带有图像和不同样式的按钮样式的好方法是添加一些 CSS。 :highlighted 伪类在您的手指放在元素上而不是在您释放按钮时处于活动状态。

我最终得到了this code：

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <GridLayout columns="*, *" rows="*, *">
            <Button class="button-1" text="Button" @tap="onButtonTap" row="0" col="0" />
            <Button class="button-2" text="Button" @tap="onButtonTap" row="0" col="1" />
            <Button class="button-3" text="Button" @tap="onButtonTap" row="1" col="0" />
            <Button class="button-4" text="Button" @tap="onButtonTap" row="1" col="1" />
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        methods: {
            onButtonTap() {
                console.log("Button was pressed");
            }
        },

        data() {
            return {};
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }

    .button-1 {
        background-color: #43b883;
    }

    .button-2 {
        background-color: #1c6b48;
    }

    .button-3 {
        background-color: #289062;
    }

    .button-4 {
        background-color: #43b883;
    }

    button {
        background-image: url("https://play.nativescript.org/dist/assets/img/NativeScript_logo.png");
        background-repeat: no-repeat;
        background-position: center center;
    }

    button:highlighted {
        background-color: #000000;
    }
</style>

【讨论】：