vue自定义指令directive

全局注册指令

Vue.directive("指令名称(不用写v-)", {指令配置});

局部注册指令

export default {
	data() {return {}},
	directives: {
		指令名称(不用写v-): {指令配置}
	}
}

指令配置

export default {
	//指令配置--常用
	//例如当前绑定元素 

	bind(el, binding){ //当指令绑定到元素时调用,仅一次
		//el: 当前指令绑定的元素---div
		/*
			binding: {
				name: "loading",
				value: true, //布尔类型
				arg: "a",
				modifiers: {
					b: true,
					c: true
				}
			}
		*/
	},
	insert(el, binding){}, //当绑定元素被插入到父元素时调用
	update(el, binding){} //当绑定值发生变化时调用, 参数意义相同,不赘述了
}
import LoadingImage from "xxxxxx"; // 导入一个Loading的图片
import styles from "./loading.module.css"; //使用css module给loading元素增加样式
// 获取loading元素
function getLoadingContainer(el) {
	return el.querySelector("img[data-role=loading]");
}
// 插入一个loading
function insertLoading() {
	const img = document.createElement("img");
	img.dataset.role = "loading"; //添加一个属性
	img.src = LoadingImage;
	img.className = styles.loading; //styles导入进来的 loading为loading.module.less中的类名
	return img;
}
//当指令配置仅有bind 和 upadte时, 可以简化为一个函数, 而非对象
export default function (el, binding) { //整一个loading指令玩玩
	const loading = getLoadingContainer(el);
	if (binding.value) { //如果需要loading
		if (!loading) { //不存在loading元素
			const img = insertLoading();
			el.appendChild(img);
		}
	}else { //不需要Loading
		if (loading) { //存在loading元素
			loading.remove(); //移除自身
		}
	}
}

//  ./loading.module.css
.loading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}