vue directive 创建自定义指令

＊且听风吟

于 2023-02-09 19:56:50 发布

阅读量155

点赞数

分类专栏： # Vue 2.x 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/128954765

版权

Vue 2.x 专栏收录该内容

174 篇文章 32 订阅

订阅专栏

文章介绍了Vue中自定义指令的使用方式，包括无参数指令、传值指令、带参数的指令以及使用修饰符的指令。通过示例展示了如何创建和应用这些指令，以改变元素的样式、位置等属性，增强DOM操作的灵活性。

摘要由CSDN通过智能技术生成

指令使用的几种方式：

// -- 实例化一个没有参数的指令
v-xxx
 
// -- 将值传到指令中
v-xxx="value"
 
// -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"`
v-xxx="'string'"
 
// -- 传参数（`arg`），如`v-bind:class="className"`
v-xxx:arg="value"
 
// -- 使用修饰符（`modifier`）
v-xxx:arg.modifier="value"

无参数指令

最基本的自定义指令只有一个名称，不接受任何参数也没有任何修饰符。示例：

<template>
  <div class="demo-content">
    <p v-blue>This is a demo!</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
    }
  },
  directives: {
    blue: {
      bind: (el, binding, vnode) => {
        el.style.color = "blue"
      }
    }
  },
  methods: {
  }
}
</script>
<style lang='less'>
.demo-content {
  width: 600px;
  height: 200px;
}
</style>

页面效果：
在这里插入图片描述

将值传入指令中

上面的例子中看到，无参数指令不是很通用，如果需要两个样式不一样，则需要编写另一个自定义指令，这种做法显然不够灵活。

所以，创建一个新的自定义指令，此自定义指令将采用传递给它的值。

示例：

<template>
  <div class="demo-content">
    <p v-demo="'red'">This is a demo 1!</p>
    <p v-demo="'yellow'">This is a demo 2!</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
    }
  },
  directives: {
    demo: {
      bind: (el, binding) => {
        el.style.background = binding.value
      }
    }
  },
  methods: {
  }
}
</script>
<style lang='less'>
.demo-content {
  width: 600px;
  height: 200px;
}
</style>

页面效果：
在这里插入图片描述

参数

自定义指令也可以在指令名称后面加上冒号表示参数。示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 自定义指令demo</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-demo:top>This is a demo at top.</p>
    <p v-demo:bottom>This is a demo at bottom.</p>
</div>

<script>
Vue.directive('demo', {
  bind: (el, binding) => {
        const loc = binding.arg === "bottom" ? "bottom" : "top";
        el.style.position = "fixed";
        el.style[loc] = 0;
        if (loc === "bottom") {
          el.style.background = "yellow";
        } else {
          el.style.background = "pink";
        }
      }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

页面效果：
在这里插入图片描述

修饰符

修饰符是由 xxx. 表示的特殊后缀，表示指令应该以某种特殊方式被绑定，修饰符控制指令的行为。示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 自定义指令demo</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <p v-demo.underline>This is a demo 1!</p>
   <!-- 可以使用链式指令在指令上使用***多个修饰符 -->
   <p v-demo.bold.highlight.underline>This is a demo 2!</p>
</div>

<script>
Vue.directive('demo', function(el, binding, vnode) {
    const modifiers = binding.modifiers;
    if (modifiers.underline) {
        el.style.textDecoration = "underline";
    }
    if (modifiers.bold) {
        el.style.fontWeight = "bold";
    }
    if (modifiers.highlight) {
        el.style.background = "pink";
    }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>