Vue模块化自定义指令

最新推荐文章于 2023-08-25 11:01:45 发布

原创

最新推荐文章于 2023-08-25 11:01:45 发布 · 373 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了两种在Vue中创建自定义指令的方法。首先，详细展示了如何在directive.js文件中定义自定义指令，然后通过引入该文件到项目中，实现自定义指令的功能。接着，文章还探讨了另一种创建自定义指令的途径。

创建自定义指令的方式一

1.创建directive.js文件，代码如下：

import Vue from 'vue';
Vue.directive('focus',{
 //当绑定元素插入到DOM中
 inserted: function(el){
  el.focus(); //元素聚焦
  el.setAttribute('placeholder','自定义内容');
 }
})

 
export {Vue}

2.引入directive.js文件，示例代码如下：

import directive from './components/global/directives';

3.在标签元素里加入自定义指令，代码如下：

<input v-model="input" placeholder="" v-focus>

创建自定义指令的方式二

<template>
	<view>
		<input type="text" v-focus:[direction]="color">
        <input type="text" v-focus2="color">
	</view>
</template>

<script>
	export default{
		data: function(){
			return {
				color:"#c33",
				direction:"left"
			}
		},
		directives:{
			"focus"(el, binding, vnode){
				console.log(b