vue-loading,vue v-loading
这篇文章主要介绍了Vue3实现全局装货指令，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
目录
前言1.完成装货组件2.新建个loading.js件，来写装货的定义指令逻辑2.1 创建这个组件对应的DOM2.2在loading.js文件中新增两个方法，分别是插入节点和移除节点。2.3 完善更新周期函数2.4 解决存在的三个问题2.4.1 先来解决第个和第二个问题2.4.2 最后解决第三个问题，动态显示加载文字。3.在主页。射流研究…文件中引注册4.在页面中使用自定义装货指令
前言
公司在开发组件库的时候，我在封装装货这个组件时，需要个全局使的loading,插件也可以搞定，但是项开发周期不太紧张，所以决定手写个。写个全局的组件也,但是需要在每个使的页进导并且注册，因为装载到的地会很多，所以我觉得需要用更优雅的方式来实现它。
1.完成loading组件
模板
div class=mask
div class=loader
差异
div class=dot/div
div class=dot/div
div class=dot/div
div class=dot/div
div class=dot/div
/div
div class= tip-text " { title } }/div
/div
/div
/模板
脚本设置
从“vue”导入{ ref，defineExpose }
let title=ref()//加载提示文字
//更改加载提示文字
const setTitle=(val)={
标题。值=值
}
//暴露出去
defineExpose({
标题，
标题
})
}
/脚本
style lang=less 范围。面具{
宽度：100%;
身高：100%;
位置：绝对；
top:0；
左：0;
背景色：rgba(0，0，0，0.8)；
z指数：99;装载机{
位置：绝对；
top:50%；
左：40%;
左边距：10%;
transform: translate3d(-50%，-50%，0)；
显示器：flex
伸缩方向：列；
对齐-项目：居中；
}。提示-文本{
颜色：# 3793ff
填充顶部：10px
}。点{
宽度：18px
高度：18px
边框半径：100%;
显示：内嵌-块；
动画：幻灯片1s无限；
}。圆点：第n个子代(1) {
动画-延迟：0.1秒
背景：# 1fbfff
}。圆点：第n个子代(2) {
动画-延迟：0.2秒
背景：# 2 ea 4 ff
}。圆点：第n个子代(3) {
动画-延迟：0.3秒
背景：# 3793ff
}。圆点：第n个子代(4) {
动画-延迟：0.4秒
背景：# 3b 89 ff
}。圆点：第n个子代(5) {
动画-延迟：0.5秒
背景：# 4577ff
}
}
@-蚊子-关键帧幻灯片{
0% {
变换：缩放(1);
}
50% {
不透明度：0.3;
变换：缩放(2);
}
100% {
变换：缩放(1);
}
}
@-网络工具包-关键帧幻灯片{
0% {
变换：缩放(1);
}
50% {
不透明度：0.3;
变换：缩放(2);
}
100% {
变换：缩放(1);
}
}
@-o-关键帧幻灯片{
0% {
变换：缩放(1);
}
50% {
不透明度：0.3;
变换：缩放(2);
}
100% {
变换：缩放(1);
}
}
@关键帧幻灯片{
0% {
变换：缩放(1);
}
50% {
不透明度：0.3;
变换：缩放(2);
}
100% {
变换：缩放(1);
}
}
/风格
2.新建个loading.js件，来写loading的定义指令逻辑
const loadingDirective={
已安装(el，装订){
},
已更新(el，绑定){
},
}
返回loadingDirective //导出
在创建的装载方向对象中，写两个钩函数，因为我们希望在这两个生命周期函数，对它进操作。
2.1 创建这个组件对应的 DOM
新建个新的某视频剪辑软件实例，再对它进个动态的挂载，挂载之后我们就可以拿到这个数字正射影像图的实例了具体实现看如下代码块
从" vue"//导入{ createApp }导创建应用程序法
从导入装载/正在加载//导我们写好的装货组件
const loadingDirective={
已安装(el，装订){
//创建应用程序对象和组件。为我们编写的加载组件
const app=createApp(加载)
//动态创建一个div节点，并在div上装载应用程序
//我们的加载组件将替换这个div标签的innerHTML
const instance=app . mount(document . createelement( div ))
},
已更新(el，binding) {}，
}
返回加载方向//导出
2.2 在 loading.js 文件中新增两个方法，分别是插入节点和移除节点。
从“vue”//guide create app方法导入{createApp}
正在从导入。/loading//Guide我们编写的加载组件。
const loadingDirective={
已安装(el，装订){
//创建应用程序对象和组件。为我们编写的加载组件
const app=createApp(加载)
//动态创建一个div节点，并在div上装载应用程序
//我们的加载组件将替换这个div标签的innerHTML
const instance=app . mount(document . createelement( div ))
//将实例添加到el，因为更新时也需要它。
//可通过更新后的中的el.instance访问
el.instance=实例
//v-loading传递的值存储在binding.value中
if (binding.value) {
附加(el)
}
},
已更新(el，绑定){
移除(el)
},
}
返回加载方向//导出
//插入节点
函数附加(el) {
//将动态创建的div节点插入el节点，内容就是我们的加载组件。
el.appendChild(el.instance.$el)
}
//删除节点
功能移除(el) {
//删除动态创建的div节点
el.removeChild(el.instance.$el)
}
2.3 完善 updated 周期函数
在开头插入节点，当v-loading的值改变时触发更新。我们去掉节点，但是这样写不合适。我们需要在更新中改进操作。
已更新(el，绑定){
//如果value的值发生了变化，那么我们就判断操作。
if (binding.value！==binding.oldValue) {
//三元表达式真插入假移除
binding.value？追加(el):删除(el)
}
基本的指令已经完成的差不多了。
2.4 解决存在的三个问题
定位的问题，如果挂载的DOM元素有定位属性，那么就没有问题，但是当挂载的DOM元素没有定位的时候，那么它的绝对定位可能会产生问题。页面滚动的问题，如果有加载效应，蒙版层后面的页面会滚动，蒙版层滚动的时候，底页也会随之滚动。为了加载文本要求，我们还可以添加段落单词progress。不同的地方需要等不同的话。
2.4.1 先来解决第个和第二个问题
插入节点时，判断挂载的节点是否定位，如果不定位，则为其添加相对定位。插入节点时禁止/隐藏滚动。删除节点时删除类名。constrative= g-relative //g-relative全局相对定位样式名称
const hidden= g-hidden //g-hidden全局禁用/隐藏滚动样式的名称。
//插入节点
函数附加(el) {
const style=getComputedStyle(el)
El.classList.add(hidden) //添加类名
if ([绝对，相对，固定]。indexOf(style.position)===-1) {
El.classList.add(relative) //添加类名
}
//将动态创建的div节点插入el节点，内容就是我们的加载组件。
el.appendChild(el.instance.$el)
}
//删除节点
功能移除(el) {
//删除动态创建的div节点
el.removeChild(el.instance.$el)
El . class list . Remove(relative)//删除类名
El.classList.remove(hidden) //删除类名
}
G-relative g-hidden是我在全局css小部件中编写的样式。g-relative {
位置：相对；
}。g-隐藏{
溢出：隐藏；
}
2.4.2 最后解决第三个问题，动态显示加载文字。
[]中[]的语法
模板
v-loading:[title]= loading /div
/模板
脚本设置
从“vue”导入{ ref }
Const title=ref(拼命加载.)
const loading=ref(true)
}
/脚本
传title之后需要进接收，并插title在装货中通过binding.arg可接收到：[] 传来的值从" vue"//导入{ createApp }导创建应用程序法
从导入装载/正在加载//导我们写好的装货组件
const loadingDirective={
已安装(el，装订){
//创建应用对象跟组件为我们写好的装货组件
const app=createApp(加载)
//动态创建个差异节点，将应用挂载在差异上
//我们的装货组件将替换此差异标签的innerHTML
const instance=app。挂载(文档。createelement( div ))
//因为在更新也需要到情况所以将情况添加在埃尔上
//在更新中通过埃尔。实例可访问到
el.instance=实例
//垂直加载传过来的值储存在绑定。值中
if (binding.value) {
附加(el)
}
//在此判断是否有标题值
if (binding.arg！==未定义){
//setTitle使我们在装货组件中定义的法
埃尔。实例。settitle(装订。arg)
}
},
已更新(el，绑定){
//在此判断是否有标题值
if (binding.arg！==未定义){
//setTitle使我们在装货组件中定义的法
埃尔。实例。settitle(装订。arg)
}
//如果价值的值有改变，那么我们去判断进操作
if (binding.value！==binding.oldValue) {
//三元表达式真实的插入错误的移除
binding.value？追加(el):删除(el)
}
}
}
返回loadingDirective //导出
const relative= g-relative //g-relative全局相对定位样式名称
const hidden= g-hidden //g-hidden全局禁止/隐藏滚动样式名称
//插入节点
函数附加(el) {
const style=getComputedStyle(el)
el.classList.add(隐藏)//添加类名
如果([绝对,相对,固定]。indexOf(style.position)===-1) {
el.classList.add(相对)//添加类名
}
//向埃尔节点插动态创建的差异节点，内容就是我们的装货组件
el.appendChild(el.instance.$el)
}
//移除节点
功能移除(el) {
//移除动态创建的差异节点
el.removeChild(el.instance.$el)
el.classList.remove(相对)//移除类名
el.classList.remove(隐藏)//移除类名
}
3.在main.js文件中引注册
想要在全局使这个自定义指令，那么我们需要在主页。射流研究…文件中去引注册。
从“vue”导入{ createApp }
从导入应用程序 App.vue
导入@/assets/scss/global.css //引入全局样式文件
从" @/views/loading/directive"//导入装载方向引loading定义指令
创建应用程序。指令( loading ，loadingDirective) //全局注册装货指令。挂载(#应用程序)
4.在页面中使用自定义loading指令
在已安装的时候，判断装货是否显,在做判断之前，先来看看我们在写好装载定义指令之后，该如何在页面中使用它。
模板
div v-loading=loading/div //只需在节点上写上垂直加载="加载"即可，后边的装货是个值
/模板
脚本设置
从“vue”导入{ ref，onMounted }
const loading=ref(true) //默认让装货值为真实的传给装货组件
onMounted(()={
//定时器模拟数据加载完成之后更改装货状态
settimeout(()={
loading.value=false
}, 3000)
})
/脚本
此时我们在 loading 组件中就可以接收到传的值，我们根据值来判断是否显 loading 组件
到此这篇关于Vue3实现全局装货指令的文章就介绍到这了，更多相关Vue3全局装货指令内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。