vue3＜script setup＞自定义指令

时间：2024-07-12 19:09:29

 main.ts

// 自定义指令
app.directive('color',(el,binding) => {
    el.style.color = binding.value
})
  • 这段代码定义了一个名为color的自定义指令，并将其注册到Vue应用实例app上。
  • 自定义指令接收两个参数：el和binding。el是绑定指令的元素，而binding是一个包含指令信息的对象，比如指令的值（value）、参数（arg）、修饰符（modifiers）等。
  • 在这个自定义指令中，直接修改了元素el的style.color属性，将其设置为binding.value，即指令绑定的值。由于color是响应式的，并且与指令绑定，因此当color的值变化时，元素的颜色也会自动更新。

html

<div v-color="color" @click="color = 'red'">
     自定义指令 
</div>
  • v-color="color": 这里使用了自定义指令v-color，并将其值绑定到Vue组件中的color响应式引用上。这个指令的作用是将元素的文本颜色设置为color变量的值。
  • @click="color = 'red'": 这是一个事件监听器，当点击这个div元素时，会将color变量的值更改为'red'。由于color是响应式的，这种变化会自动触发Vue的更新机制，从而更新页面上绑定了color的元素。

js

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

let color = ref('orange')

</script>
  • <script lang="ts" setup>: 这是Vue 3 Composition API的语法糖，允许你在<script>标签内使用TypeScript编写Vue组件，并且可以直接使用从vue导入的Composition API函数（如ref），而不需要在组件的setup函数中显式地定义它们。
  • import { ref } from 'vue': 从vue包中导入ref函数，用于创建一个响应式的引用。
  • let color = ref('orange'): 使用ref函数创建一个响应式的引用color，并初始化为'orange'。这个引用可以被Vue组件的模板和Composition API的其他部分访问和修改。

        

自定义指令 | Vue.js (vuejs.org)

示例：封装数据加载中提示（v-loading）

main.ts

// 自定义指令 
app.directive('loading',(el,binding) => {
    binding.value ? el.classList.add('loading') : el.classList.remove('loading')
})

html

  <!-- 自定义指令 -->
  <div v-loading="isLoading">
       加载完成
  </div>

js

let isLoading = ref(true)

css(全局使用可放入main.css中，父级元素记得使用绝对定位：position: relative;)

.loading::before {
  content: '加载中';
  font-size: 100px;
  font-weight: 600;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: pink;
}

        

相关文章