vue3 ts自定义指令

Vue3 中 TypeScript 自定义指令（Custom Directive）是一种特殊组件，它允许你在模板中添加额外的行为或属性绑定。通过自定义指令，你可以扩展 Vue 的核心功能，并提供更丰富的用户界面交互。在 TypeScript 版本中，它们通常用于处理一些复杂的状态管理、数据绑定或事件监听。

创建一个 Vue3 TypeScript 自定义指令的基本步骤如下：

1. **导入Vue及指令声明**：

   import { DirectiveBinding } from 'vue';

2. **定义指令**：

   export const myCustomDirective: Directive = {
     bind(el: Element, binding: DirectiveBinding) {
       // 初始化逻辑
     },
     update(value: any) {
       // 更新逻辑
     },
     unbind() {
       // 取消绑定时的操作
     }
   };

3. **使用指令**：

   <div v-my-custom-directive="expression"></div>

在这个例子中，`bind` 函数会在元素插入到 DOM 后立即运行，`update` 函数会在表达式值变化时更新，`unbind` 则在指令从元素上移除时触发。

相关问题

vue3 ts 自定义 dropdown 组件

以下是一个简单的 Vue 3 TypeScript 自定义 Dropdown 组件的示例：

<template>
  <div class="dropdown-container" @click="toggleDropdown">
    <div class="selected-item">{{ selectedItem }}</div>
    <div v-show="isDropdownOpen" class="dropdown-menu">
      <div v-for="(item, index) in items" :key="index" @click="selectItem(item)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Dropdown",
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const selectedItem = ref(props.items[0]);
    const isDropdownOpen = ref(false);

    const toggleDropdown = () => {
      isDropdownOpen.value = !isDropdownOpen.value;
    };

    const selectItem = (item: string) => {
      selectedItem.value = item;
      isDropdownOpen.value = false;
    };

    return {
      selectedItem,
      isDropdownOpen,
      toggleDropdown,
      selectItem,
    };
  },
});
</script>

<style scoped>
.dropdown-container {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 0;
  z-index: 1;
  max-height: 200px;
  overflow-y: auto;
}
.selected-item {
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

这个组件包含一个下拉菜单和一个当前选定的项目。当用户点击选定的项目时，下拉菜单将展开，并显示所有可用项目。用户可以从下拉菜单中选择一个项目，然后下拉菜单将关闭，并更新选定的项目。

在这个组件中，我们使用了 `ref` 来创建响应式的状态变量，并使用 `setup` 函数来组织组件逻辑。我们还使用了 `v-show` 指令来根据 `isDropdownOpen` 变量的值来控制下拉菜单的可见性。最后，我们使用了 `@click` 指令来监听用户的点击事件，并触发相应的方法。

你可以在父组件中使用这个自定义组件，例如：

<template>
  <div>
    <Dropdown :items="items" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Dropdown from "./Dropdown.vue";

export default defineComponent({
  name: "App",
  components: {
    Dropdown,
  },
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3"],
    };
  },
});
</script>

这里我们传递一个 `items` 数组给 Dropdown 组件，其中包含了下拉菜单中的所有可用选项。

vue3 ts 实现自定义message

以下是一个基于 Vue3 和 TypeScript 实现自定义 message 的示例：

<template>
  <div>
    <button @click="showSuccessMessage">Show Success Message</button>
    <button @click="showErrorMessage">Show Error Message</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

interface Message {
  type: string;
  content: string;
}

export default defineComponent({
  name: 'CustomMessage',
  data() {
    return {
      messages: [] as Message[]
    }
  },
  methods: {
    showMessage(type: string, content: string) {
      this.messages.push({ type, content })
    },
    showSuccessMessage() {
      this.showMessage('success', 'This is a success message.')
    },
    showErrorMessage() {
      this.showMessage('error', 'This is an error message.')
    }
  }
})
</script>

<style>
.message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.success {
  background-color: green;
  color: white;
}
.error {
  background-color: red;
  color: white;
}
</style>

<template>
  <div>
    <div v-for="message in messages" :key="message.content" :class="['message', message.type]">
      {{ message.content }}
    </div>
  </div>
</template>

在上述示例中，我们定义了一个 `Message` 接口，用于表示消息的类型和内容。然后，在组件中定义了一个 `messages` 数组，用于存储所有的消息。通过 `showMessage` 方法，我们可以将新的消息添加到 `messages` 数组中。最后，在模板中使用 `v-for` 指令遍历 `messages` 数组，渲染出每条消息。

我们还为消息定义了两种类型：`success` 和 `error`，并为它们分别定义了不同的样式。通过调用 `showSuccessMessage` 和 `showErrorMessage` 方法，我们可以分别显示成功消息和错误消息。