本节目标
- 快速入门
- v-loading
快速入门
指令对比
基本语法
- 使用: v-指令名="指令值"
- 定义: 通过 directives 局部定义或者全局定义
- 通过事件对象 el 可以拿到指令所在元素
- 通过形参 binding 可以拿到指令的传值
- 通过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指令, 实现加载中的效果
分析
- 本质loading效果就是一个蒙层, 盖在盒子上
- 数据请求时, 开启loading状态, 添加蒙层
- 数据请求完毕, 关闭loading状态, 移除蒙层
实现
- 准备一个loading类, 通过伪元素定位, 设置宽高, 实现蒙层
- 开启关闭loading状态, 本质只需要添加和移除类名即可
- 结合自定义指令的语法进行封装复用
<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>
