本节目标

• 快速入门
• v-loading

快速入门

指令对比

基本语法

1. 使用: v-指令名="指令值"
2. 定义: 通过 directives 局部定义或者全局定义
3. 通过事件对象 el 可以拿到指令所在元素
4. 通过形参 binding 可以拿到指令的传值
5. 通过update钩子, 可以监听指令值的变化,进行更新操作

局部注册

<template><div id="app"><input v-focus type="text" /></div>
</template><script>
export default {// 局部注册自定义指令directives: {focus: {// 指定的生命周期: 指令所在的元素, 挂载完毕后触发inserted(el) {// el就是指令绑定的元素el.focus();},},},
};
</script>

全局注册

... ...Vue.directive('focus', {// 指定所在的元素被加载后执行inserted: function (el) {// el就是所绑定的元素el.focus()}
})... ...

指令传值

<template><div id="app"><h2 v-color="color1">我是一个标题</h2><h2 v-color="color2">我是一个标题</h2></div>
</template><script>
export default {data() {return {color1: "red",color2: "blue",}},// 局部注册自定义指令directives: {   color: {inserted(el, binding) {el.style.color = binding.value;},// 指令的值(binding)修改时触发update(el,binding) {el.style.color = binding.value;}}},
};
</script>

v-loading

封装一个v-loading指令, 实现加载中的效果

分析

1. 本质loading效果就是一个蒙层, 盖在盒子上
2. 数据请求时, 开启loading状态, 添加蒙层
3. 数据请求完毕, 关闭loading状态, 移除蒙层

实现

1. 准备一个loading类, 通过伪元素定位, 设置宽高, 实现蒙层
2. 开启关闭loading状态, 本质只需要添加和移除类名即可
3. 结合自定义指令的语法进行封装复用

<template><!-- 2,使用loading指令 --><div class="box" v-loading="isLoading"><ul><li v-for="item in list" :key="item">我是内容{{ item }}</li></ul></div>
</template><script>
export default {data () {return {list: [],isLoading: true,}},async created () {setTimeout(() => {this.list = [1,2,3,4,5]// 3,关闭loading效果this.isLoading = false}, 2000)},directives: {// 1, 注册loading指令loading: {inserted(el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')},update(el, binding) {binding.value? el.classList.add('loading') : el.classList.remove('loading')}}}
}
</script><style>
/* 伪类 - 蒙层效果 */
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;position: relative;
}
</style>