Nativescript Vue:是否可以在非按钮元素上使用突出显示的或活动的伪选择器?

时间:2019-07-26 06:41:38

标签: nativescript nativescript-vue

我有一排由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;
   } 
}

1 个答案:

答案 0 :(得分: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>