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 自定义指令修改dom样式 执行了 但初始化页面样式没有生效

在 Vue3 中，自定义指令的钩子函数与 Vue2 有所不同，其中 `bind` 钩子已经被废弃，取而代之的是 `beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount`、`unmounted` 等钩子函数，它们的执行时机也有所不同。

如果你在 `mounted` 钩子中修改 DOM 样式，那么样式修改会在组件挂载到页面后才生效。如果你希望样式修改能够在页面初始化时就生效，可以考虑在 `beforeMount` 钩子中执行修改操作。例如：

import { DirectiveBinding } from 'vue';

// 定义自定义指令
const myDirective = {
  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
    // 修改 DOM 样式
    el.style.color = binding.value;
  }
};

// 在组件中使用自定义指令
<template>
  <div v-my-directive="color">Hello World</div>
</template>

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

export default defineComponent({
  data() {
    return {
      color: 'red'
    };
  },
  directives: {
    myDirective
  }
});
</script>

注意，在使用 TypeScript 时需要引入 `DirectiveBinding` 类型，并在自定义指令的参数中使用该类型，否则会报错。另外，如果你在自定义指令中使用了异步操作，例如发送网络请求等，建议在 `mounted` 钩子中执行，以确保 DOM 已经渲染完毕。