本节目标
- 快速入门
- 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>
