时间戳

首页 > 解决方案 > Nativescript-vue：如何使自定义组件可点击？

nativescript - Nativescript-vue：如何使自定义组件可点击？

问题描述

我可以使自定义元素可点击吗？

这是我的组件：

<template>
  <FlexboxLayout class="profile-item" flexDirection="column">
    <label :text="text" />
    <label class="subtext" v-if="subtext" :text="subtext" />
  </FlexboxLayout>
</template>

这就是我想使用它的方式：

<template>
  <ScrollView>
    <StackLayout>
      <Item text="Test" @tap="onItemTap" />
      <Button text="Button" @tap="onItemTap" />
    </StackLayout>
  </ScrollView>
</template>

<script>
import Item from "./Item";

export default {
  components: {
    Item
  },
  methods: {
    onItemTap(event) {
      alert('test');
    },
  }
};
</script>

点击按钮有效，但不是我的自定义元素。

标签： nativescriptnativescript-vue

解决方案

您可以从自定义元素内部处理点击事件，也可以将自定义元素包装在 aContentView中并将点击事件附加到容器，如下所示：

<template>
  <ScrollView>
    <StackLayout>
      <ContentView @tap="onItemTap">
        <Item text="Test" />
      </ContentView>
      <Button text="Button" @tap="onItemTap" />
    </StackLayout>
  </ScrollView>
</template>

推荐阅读