目录
一、引言
二、自定义指令的注册和使用方式
2.1. 自定义指令-全局注册使用
2.2. 自定义指令-局部注册使用
三、自定义指令完整代码
3.1. 自定义指令全局注册/使用
3.1.1. main.js
3.1.2. App.vue
3.2. 自定义指令局部注册/使用
3.2.1. main.js
3.2.2. App.vue
四、自定义指令的指令值
文章中的动态加载效果图片夸克网盘地址:
链接:https://pan.quark.cn/s/d150042ddc5a
一、引言
需求: 当页面加载时,让元素将获得焦点
方式一:autofocus,在safari浏览器存在兼容性问题。
方式二:操作dom:dom元素.focus()。即在页面dom元素挂载渲染完成后通过ref和$refs获取焦点,这种方式还是不够便捷。
方式三:自定义指令,即本章节的主题,自己定义指令,封装输入框获取焦点的操作。
自己定义的指令作用:可以封装一些 dom 操作, 扩展额外功能。
二、自定义指令的注册和使用方式
2.1. 自定义指令-全局注册使用
全局注册
使用自定义指令
2.2. 自定义指令-局部注册使用
局部注册
使用自定义指令
三、自定义指令完整代码
3.1. 自定义指令全局注册/使用
3.1.1. main.js
import Vue from 'vue'
import App from './App.vue'
// 消息提示的环境配置,设置为开发环境或者生产环境,生产环境一般设置不提示常见错误和陷阱
Vue.config.productionTip = false// 全局注册指令
Vue.directive('focus', {// inserted 会在指令所在的元素,被插入到页面中时触发inserted (el) {// el 就是指令所绑定的元素el.focus()}
})new Vue({render: h => h(App),
}).$mount('#app')
3.1.2. App.vue
<template><div><h1>自定义指令</h1><input v-focus type="text"></div>
</template><script>
export default {// mounted () {// this.$refs.inp.focus()// }
}
</script><style></style>
3.2. 自定义指令局部注册/使用
3.2.1. main.js
import Vue from 'vue'
import App from './App.vue'
// 消息提示的环境配置,设置为开发环境或者生产环境,生产环境一般设置不提示常见错误和陷阱
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
3.2.2. App.vue
<template><div><h1>自定义指令</h1><input v-focus type="text"></div>
</template><script>
export default {// 局部注册指令directives: {focus: {// inserted 会在指令所在的元素,被插入到页面中时触发inserted (el) {// el 就是指令所绑定的元素el.focus()}}}
}
</script><style></style>
四、自定义指令的指令值
我们在自定义指定时,可以在绑定指令的同时,为指令绑定(设定)具体的参数值。通过binding.value可以拿到指令值,
inserted:会在指令所在的元素,被插入到页面中时触发。
update:会在指令值修改时触发。
核心代码
<template><div><h1 v-color="color1">指令的值1测试</h1><h1 v-color="color2">指令的值2测试</h1></div>
</template><script>
export default {data () {return {color1: 'red',color2: 'green'}},// 局部注册指令directives: {color: {// inserted 会在指令所在的元素,被插入到页面中时触发inserted (el, binding) {// el 就是指令所绑定的元素el.style.color = binding.value},// update 指令的值修改变化时触发,更新domupdate (el, binding) {el.style.color = binding.value}}}
}
</script><style></style>
五、自定义v-loading加载中指令
实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态影响用户体验不好,这时候我们可以封装一个v-loading指令,实现加载中的效果。
5.1. loading实现
实现原理:
1. loading效果效果本质就是一个蒙层,盖在了盒子上
2. 数据请求中,开启loading状态,添加蒙层
3. 数据请求完毕,关闭loading状态,移除蒙层
实现步骤:
1. 准备一个 loading 类,通过伪元素定位,设置宽高,实现蒙层
2. 开启关闭 loading 状态(添加移除蒙层),本质只需要添加移除类即可
3. 结合自定义指令的语法进行封装复用
5.2. 完整代码
5.2.1. main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
5.2.2. App.vue
<template><div class="main"><!-- 通过自定义v-loading加载指令 动态添加/移除 加载效果的样式 来实现加载效果 --><div class="box" v-loading="isLoading"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><!-- 封装了v-loading加载指令后,我们可以任意的添加多个加载效果层 --><!-- <div class="box2" v-loading="isLoading2"></div> --></div>
</template><script>
// 安装axios => yarn add axios
import axios from 'axios'// 我本地部署的后端接口,大家可以在本地自己简单搞个SpringBoot服务
// 接口地址:http://localhost/api/news
// 请求方式:get
export default {data () {return {list: [],// 加载是否开启的开关isLoading: true,isLoading2: true}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.data// 后端接口请求数据返回后则关闭加载效果this.isLoading = false}, 2000)},// 局部注册自定义的加载插件directives: {loading: {// inserted 会在指令所在的元素,被插入到页面中时触发(isLoading初始值我们设置成true开启加载效果)inserted (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')},// update 指令的值修改变化时触发,更新dom。即后端接口请求成功返回数据后,关闭加载效果(更改isLoading为false时触发)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;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>
5.2.3. 图片
在文章开头我分享的网盘中下载