查看专栏目录: VUE

Vue 自定义指令是一种用于扩展 Vue 模板功能的强大工具。通过自定义指令，你可以在 Vue 模板中添加自定义的行为和逻辑，使模板更加灵活和可定制。

以下是对 Vue 自定义指令的详细解释，并提供一个示例代码来帮助你更好地理解：

定义自定义指令：在 Vue 项目中，定义自定义指令需要创建一个全局或局部的指令对象。指令对象包含几个关键属性，如bind、inserted、update和unbind等，用于处理指令的不同生命周期阶段。

   Vue.directive('myDirective', {
     bind: function(el, binding, vnode) {
       // 指令绑定时的逻辑
     },
     inserted: function(el, binding, vnode) {
       // 元素插入时的逻辑
     },
     update: function(el, binding, vnode) {
       // 数据更新时的逻辑
     },
     unbind: function(el) {
       // 指令解绑时的逻辑
     }
   });

• bind：指令绑定到元素时触发。这个阶段可以进行初始化操作，例如获取元素、设置数据等。
• inserted：元素插入到 DOM 时触发。可以在这个阶段执行与元素插入相关的操作，如添加事件监听器等。
• update：当绑定的数据发生变化时触发。可以在这里根据数据的变化更新元素的状态。
• unbind：指令从元素解绑时触发。这个阶段可以进行清理操作，如移除事件监听器等。
  通过在指令对象的不同方法中编写相应的逻辑，可以实现各种自定义的行为和功能。

示例效果图

示例源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-17
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue自定义指令（图文示例）</h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>

		<div class="dajianshi" id="dajianshi">
			<h4>
				选择结束时间：<el-date-picker v-model="endTime" type="datetime" placeholder="选择日期时间">
				</el-date-picker>
			</h4>
			<h4 v-countdown="endTime"></h4>
		</div>
	</div>
</template>

<script>
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				endTime: new Date(),
				timer:null,
			}

		},

		directives: {
			countdown: {
				update: (el, binding) => {
					console.log(el);
					console.log(binding)
					let timer=null;
					if(timer!=null){
						clearInterval(timer);
					}
					
					let usedTime = binding.value.getTime();

					timer = setInterval(function() {
						var now = new Date().getTime();
						var remainingTime = usedTime - now;
						if (remainingTime < 0) {
							clearInterval(timer);
					  el.innerHTML = '倒计时已经结束';
						} else {
							el.innerHTML = ' 时间倒计时：' + Math.floor(remainingTime / 1000)+'秒';
						}
					}, 1000);
				}
			},
		}

	}
</script>
<style scoped>
	.djs-box {
		width: 1000px;
		height: 650px;
		margin: 50px auto;
		border: 1px solid darkcyan;
	}

	.topBox {
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: darkcyan;
		color: #fff;
	}

	.dajianshi {
		width: 93%;
		height: 470px;
		margin: 5px auto 0;
		border: 1px solid #369;
		background-color: cde;
		padding: 20px;
	}

</style>

API 参考网址

https://v2.cn.vuejs.org/v2/guide/custom-directive.html