vue3 tsx click-preview写法

在 Vue3 中，结合 TypeScript 和 JSX 使用 `click-preview` 的写法通常是在组件模板中定义一个处理点击事件的函数，并利用 TypeScript 的静态类型检查功能。首先，你需要安装 `@vue/cli-plugin-typescript` 并启用 JSX 支持。

<template>
  <div>
    <button @click="handleClick" :title="previewText">点击预览</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop } from 'vue';

@Component
export default class MyComponent extends Vue {
  // 定义 prop 的类型
  @Prop({ type: String }) previewText!: string;

  handleClick() {
    // 这里可以编写具体的预览逻辑，比如显示一个弹出层或改变状态
    console.log('Preview clicked:', this.previewText);
  }
}
</script>

<style scoped></style>

在这个例子中，`@click="handleClick"` 用于绑定点击事件到 `handleClick` 函数，`:title="previewText"` 设置按钮的标题属性值为 `previewText`。`@Prop` 注解表明 `previewText` 是从父组件传入的 prop，并指定了其类型为字符串。