Nativescript Vue：有没有办法在非按钮元素上使用突出显示或活动的伪选择器？

Question

我有一排由 StackLayout 制成的盒子，我希望仅当手指按下盒子时才更改背景颜色。我尝试在 CSS 中使用 :highlighted，但它似乎只适用于按钮元素。

编辑：

我实际上有这个，但它适用于我所有的盒子，因为它在 v-for 中：

<StackLayout v-for="item in items" orientation="horizontal">
   <StackLayout v-bind:class="{ 'color': bgColor }" 
   @touch="hoverOver($event)">
   </StackLayout>
</StackLayout>

////
hoverOver: function(e) {
   if (e.action == "down") {
      this.bgColor = true; 
   } else if (e.action == "up") {
      this.bgColor = false;
   } 
}

Answer 1

一个简单的方法是在每个项目中有一个标志

例子

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout orientation="horizontal">
                <Label v-for="item in items" :text="item.title" :class="[item.selected ? 'selected' : '', 'h1 p-15']"
                    @touch="hoverOver($event, item)">
                </Label>
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        methods: {
            hoverOver: function(e, item) {
                item.selected = e.action !== "up" && e.action !==
                    "cancel";
            }
        },
        data() {
            return {
                items: [{
                        title: "A",
                        selected: false
                    },
                    {
                        title: "B",
                        selected: false
                    },
                    {
                        title: "C",
                        selected: false
                    },
                    {
                        title: "D",
                        selected: false
                    }
                ]
            };
        }
    };
</script>

<style scoped>
    .selected {
        color: red;
    }
</style>

Nativescript Vue：有没有办法在非按钮元素上使用突出显示或活动的伪选择器？

Nativescript Vue: Is there a way to use highlighted or active pseudo selectors on non-button elements?

nativescript

nativescript-vue