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

Posted 2023-04-13

【中文标题】Nativescript-vue：如何使自定义组件可点击？

【英文标题】：Nativescript-vue: How to make a custom component tapable?

【发布时间】：2021-07-31 23:43:40

【问题描述】：

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

这是我的组件：

<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>

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

【参考方案1】：

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

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

【讨论】：

谢谢。您在哪里找到 ContentView 组件？这里没有记录：nativescript-vue.org/en/docs/introduction。是否可以将 ListView (nativescript-vue.org/en/docs/elements/components/list-view) 与静态内容一起使用？

有一些关于 ContentView here 的信息。我认为与静态内容相比，ListView 更多地用于动态内容。

谢谢。 ContenView 和点击工作正常。单击动态 ListView 内容会在元素上提供“选项卡”反馈。我可以用 ContentView 以某种方式做到这一点吗？

我认为这些是按钮和 ListView 的默认行为。这是可能的，但您需要创建自己的自定义手势处理程序。如果您需要反馈，使用 ListView/按钮可能更容易。

你知道我是否可以以某种方式将 ListView 用于静态内容（不是来自数组，而是我想将我的元素直接写入我的模板[就像我的带有 Stacklayout 的示例]）？跨度>