Vue3 -- 自定义指令directive

最新推荐文章于 2025-04-13 22:47:07 发布

原创最新推荐文章于 2025-04-13 22:47:07 发布 · 3.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文详细介绍了Vue3中的自定义指令，包括局部与全局自定义指令的创建，动态参数的使用，函数简写以及如何传参给自定义指令，通过实例展示了自定义指令在实际应用中的实现。

自定义指令directive

在Vue中除了像v-model 和 v-show这样的默认内置的指令外， Vue 也允许注册自定义指令。自定义指令用于对DOM 元素进行底层操作。

局部自定义指令

局部自定义指令类似局部组件，组件使用directives进行引用，以输入框自动获得焦点为例。

// 注册一个局部自定义指令 v-focus，并写入钩子mounted，mounted接收绑定元素el。

 		const directives = {
            focus:{
                mounted(el){
                el.focus();
                }
            }
        }

组件引用局部自定义指令，并使用自定义指令 v-focus

 		const app = Vue.createApp({
            directives: directives,
            template:`<input v-focus/>`
        });

页面效果：
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue自定义指令</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
     	const directives = {
            focus:{
                mounted(el){
                el.focus();
                }
            }
        }
        const app = Vue.createApp({
            directives: directives,
            template:`<input v-focus/>`
        });
        const vm = app.mount('#root');
    </script>
</body>
</html>

全局自定义指令

全局自定义指令类似全局组件全局可用，还以输入框自动获得焦点为例。

首先注册一个全局自定义指令 v-focus，并写入钩子mounted，mounted接收绑定元素el。

       app.directive('focus', {
            mounted(el){
                el.focus();
            }
        })

使用自定义指令 v-focus。

	<input v-focus/>

页面效果：
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue自定义指令</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            template:`<input v-focus/>`
        });
        // 注册一个全局自定义指令 `v-focus`
        app.directive('focus', {
            mounted(el){
                el.focus();
            }
        })
        const vm = app.mount('#root');
    </script>

</body>
</html>

自定义指令动态参数

沿用上述代码并进行相关调整。

将自定义指令名修改为top,增加一个钩子 update，并且两个钩子都使用binding接收动态参数。

		app.directive('top', {
            // 第一次渲染
            mounted(el, binding){
                el.style.top = `${binding.value}px`;
            },
            // 更新后重新渲染
            update(el, binding){
                el.style.top = `${binding.value}px`;
            }
        })

用div将input包裹起来，在div上使用自定义指令，并加上绝对定位。

		const app = Vue.createApp({
            data(){
                return{
                    top: 50
                }
            },
            template:`
            <div v-top="top" class="pos">
                <input />
            </div>
            `
        });

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

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue自定义指令</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .pos{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    top: 50
                }
            },
            template:`
            <div v-top="top" class="pos">
                <input />
            </div>
            `
        });
        // 注册一个全局自定义指令 `v-focus`
        app.directive('top', {
            // 第一次渲染
            mounted(el, binding){
                el.style.top = `${binding.value}px`;
            },
            // 更新后重新渲染
            update(el, binding){
                el.style.top = `${binding.value}px`;
            }
        })
        const vm = app.mount('#root');
    </script>

</body>
</html>

函数简写

在前面的例子中， mounted 和 updated 时触发相同行为。那么就可以通过回调函数传递给指令来简写。

		app.directive('top', (el, binding) => {
            el.style.top = `${binding.value}px`;
        })

传参给自定义指令

arg：参数传递给指令。例如在 v-top:left 中，arg 为 “left”。

结合arg，进行完善代码。

			<div v-top:left="distance" class="pos">
                <input />
            </div>

页面效果：
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue自定义指令</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .pos{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    distance: 50
                }
            },
            template:`
            <div v-top:left="distance" class="pos">
                <input />
            </div>
            `
        });
        // 注册一个全局自定义指令 `v-focus`
        app.directive('top', (el, binding) => {
            el.style[binding.arg] = `${binding.value}px`;
        })
        const vm = app.mount('#root');
    </script>

</body>
</html>