Vue模块化自定义指令

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

ACGuan

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

阅读量355

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/112667440

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建自定义指令的方式一

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