vue2.x自定义v-loading指令

2023-11-03

(vue3.x自定义v-loading思路类似)

directive.js

import Loading from './loading';
import Vue from 'vue';
const loadingDirective = {
  inserted(el, binding){
        const loading = Vue.extend(Loading);
        el.instance = new loading({
            el: document.createElement("div")
        });
        const title = binding.arg;
        if(typeof title !== "undefined") el.instance.setTitle(title)
        if(binding.value) append(el);
  },
  update(el, binding){
    if(binding.value !== binding.oldValue) binding.value ? append(el) : remove(el);
  }
}

function append(el){
    const style = getComputedStyle(el);
    if(!['absolute', 'relative', 'fixed'].includes(style.position)) el.style.position = 'relative';
    el.appendChild(el.instance.$el);
}

function remove(el){
    el.style.position = '';
    el.removeChild(el.instance.$el);
}

export default loadingDirective;

loading.vue

<template>
  <div class="bn-loading">
    <div class="bn-loading-title">{{ title }}</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      title: '加载中...'
    }
  },
  methods: {
    setTitle(title){
      this.title = title;
    }
  }
}
</script>

<style lang="scss" scoped>
.bn-loading{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    &-title{
        color: #fff;
        font-size: 18px;
    }
}
</style>

main.js引入

import loadingDirective from "./components/bn-ui/loading/directive";
Vue.directive("load", loadingDirective);

使用

<div class="test-loading" v-load:[loadText]="loading"/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue2.x自定义v-loading指令 的相关文章

随机推荐

  • 452. 用最少数量的箭引爆气球

    在二维空间中有许多球形的气球 对于每个气球 提供的输入是水平方向上 气球直径的开始和结束坐标 由于它是水平的 所以y坐标并不重要 因此只要知道开始和结束的x坐标就足够了 开始坐标总是小于结束坐标 平面内最多存在104个气球 一支弓箭可以沿着
  • 永磁同步电机矢量控制(三)——电流环 PI 参数整定(二)

    文章目录 1 电流环PI参数整定 2 电流环带宽选择 3 电流环带宽的测试方法 前面我们把电流环的闭环传递函数整定成了典型的二阶系统 这里我们再简化处理下电流环 把电流环闭环传递函数整定成一阶惯性环节 1 电流环PI参数整定 首先 我们忽略
  • uni-app之分包加载和按需注入

    文章目录 一 分包 1 为什么要分包呢 2 分包类型 3 如何设置分包 需要在manifest json中加入分包相关配置 在page json中加入分包配置 3 分包预加载配置preloadRule 二 按需注入和用时注入 1 按需注入
  • React中import的用法

    import defaultcomponent a b c from XXX eg import React Component from react 导入 react 文件里export的一个默认的组件 将其命名为React以及Compo
  • redis 主从模式以及哨兵模式

    一 redis主从模式 master slave 1 作用 1 防止单点故障 一台redis宕机 整个redis不能用 2 可以进行读写分离 一台redis主机进行写操作 其他机子进行读操作 提高使用效率 1 2实现 1 规划图 主从规划图
  • MySQL——子查询

    来一篇 MySQL 子查询 记录一下这个美好的时光 学习记录篇 下文中所有SQL 语句 均可在 MySQL DB 学习Demo 此处下载SQL语句执行 有相关DB 与 表 1 需求分析与问题解决 1 1 实际问题 现有解决方式一 SELEC
  • jira通过使用synapseRT插件实现对需求、测试用例、测试计划等的管理

    jira是可以实现对测试用例的管理的 而且还可以实现需求与测试用例 测试计划等的链接 这样就只使用一款jira软件串起整个流程了 下面说一说插件synapseRT插件的安装与破解 首先 需要下载破解包 链接如下 是我的csdn下载链接 ht
  • Python 数据分析学习路线

    Python 数据分析学习路线 第一阶段 Python语言基础 第二阶段 数据采集和持久化 第三阶段 数据分析 第四阶段 数据挖掘与机器学习 书籍介绍 参与方式 第一阶段 Python语言基础 在学习数据分析之前 首先需要掌握Python语
  • [Java]在数组中查找一个数字并返回其下标值

    此代码仅用于数组为非递减序列 二分查找 public class BinarySearch public static int binarySearch int array int target int left 0 int right a
  • PTA8(python)

    python程序设计选做题集 函数题和编程题 6 1 用类来计算圆面积 10 分 6 2 统计商品总价 20 分 6 3 定义商品类 特殊方法 30 分 6 4 学生成绩管理 30 分 6 5 设计一个股票类 高教社 Python编程基础及
  • STM32F429点亮led实验

    一 调用的函数 在stm32f429中点亮led通过控制引脚的高低电平来实现 在f429的hal库中控制引脚高低电平的函数 void HAL GPIO WritePin GPIO TypeDef GPIOx uint16 t GPIO Pi
  • 笔记-CDN

    转自 http www jianshu com p df806e04b204 转自 http blog qiniu com archives 6221 从 CDN 到 LiveNet 随着基础设施的升级 我们从文字时代演进到读图时代 又从读
  • nb传输协议和服务器的连接,NB-iot网络架构介绍_NB-iot的数据传输方式

    一 NB iot网络架构 整个NB IoT网络架构分为五个部分 终端 无线网络 核心网络 EPC IoT支持平台和应用服务器 二 NB iot网络架构简介 1 终端 主要通过空中接口连接到基站 终端方面主要包括工业终端和NB IoT模块 工
  • Node.js程序如何访问MySQL数据库呢?Sequelize操作MySQL数据库详解

    使用Sequelize 访问MySQL 当我们安装好MySQL后 Node js程序如何访问MySQL数据库呢 访问MySQL数据库只有一种方法 就是通过网络发送SQL命令 然后 MySQL服务器执行后返回结果 我们可以在命令行窗口输入my
  • 以太坊未来的 POS 协议:Casper

    以太坊未来的 POS 协议 大家好 我是Vlad 2014年9月份我开始了研究和设计以太坊POS proof of stake 权益证明 架构的工作 目前Vitalik和我对于Serenity阶段的POS协议应该长什么样已经有了许多共识 只
  • 证券市场的法律法规体系

    前言 作为金融公司的一员 这个证券从业资格证还是要拿到手 虽然我是技术人员 但这方面的知识还是要加强 要懂法 哈哈 已经报名了6月24号的考试 还有50天左右的时间 从今天起就记录下 我自己的学习笔记吧 Come on 证券市场法律法规体系
  • iis 配置多域名,多https

    当一个https的请求到达IIS服务器时 https请求为加密状态 需要拿到相应的服务器证书解密请求 由于每个站点对应的证书不同 服务器需要通过请求中不同的主机头来判断需要用哪个证书解密 然而主机头作为请求的一部分也被加密 最终IIS只好使
  • DAS、NAS、SAN、iSCSI 存储方案概述

    目前服务器所使用的专业存储方案有DAS NAS SAN iSCSI几种 存储根据服务器类型可以分为 封闭系统的存储和开放系统的存储 1 封闭系统主要指大型机 2 开放系统指基于包括Windows UNIX Linux等操作系统的服务器 开放
  • 鱼眼图像的全景矫正

    1 球面透视投影与展开 鱼眼镜头的成像通常首先要进行球面透视投影 即将三维空间中的点沿着经过镜头光学中心的直线投影到以光心为原点的单位半径球体 内表面 上 从而球面上的每一个点 可通过相应的经纬度来表示 如图 1 所示 以镜头光学中心为原点
  • vue2.x自定义v-loading指令

    vue3 x自定义v loading思路类似 directive js import Loading from loading import Vue from vue const loadingDirective inserted el b