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指令 的相关文章

  • 如何实现 JavaScript 对象被垃圾回收时触发的函数?

    实际上 垃圾被收集 销毁或以其他方式超出范围 我想要做的是 当调用了 bind 方法的对象被销毁时 取消绑定非 DOM 元素上的事件处理程序 编辑 我又查看了我的代码 并决定我真正需要它的唯一地方是当不再需要包含该对象的模块时 这通常发生在
  • 在淘汰赛应用程序中使用 setInterval 进行轮询实现?

    我正在尝试使用 setInterval 实现简单的轮询机制 我有一个视图模型如下 define knockout jquery function ko function ViewModel var self this setInterval
  • 如何在 Javascript 中动态创建一个适用于所有浏览器的单选按钮?

    使用例如动态创建单选按钮 var radioInput document createElement input radioInput setAttribute type radio radioInput setAttribute name
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • Office excel将CORS请求作为跨域请求

    我正在尝试从我的 Excel 插件发出跨域请求 正如这里所建议的 http dev office com docs add ins develop addressing same origin policy limitations http
  • 缩放事件侦听器之前的 Javascript OpenLayers

    我正在尝试将 OpenLayers 设置为在缩放开始之前不显示矢量图层 并使其在缩放结束后重新出现 我已经像这样建立了缩放结束部分 map new OpenLayers Map map element eventListeners zoom
  • mouseover 和 mouseout 事件在子进程上触发

    代码 div div div div 如果我将鼠标悬停在Navigation the Drop Downdiv 向下滑动 如果我将鼠标移开 它会向上滑动 问题是如果我将鼠标悬停在孩子上Drop Downdiv它也向上滑 动 有谁知道我该如何
  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • 这种 JavaScript 编码风格有什么问题? (闭包与原型)

    我们一直在讨论如何最好地处理我们的 JS 应用程序中的对象 研究 Stoyan Stefanov 的书 阅读无数关于 新 这个 原型 闭包等的 SO 帖子 事实上有很多 而且它们有这么多相互竞争的理论 表明没有完全明显的答案 让我们假设我们
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • 如果多个键是相同的 JS,则对对象中的值求和

    例如我有 5 个对象 row aa col 1 value 1 row bb col 2 value 1 row bb col 3 value 1 row aa col 1 value 1 row aa col 2 value 1 我想对值
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • 使用 javascript Array reduce() 方法有什么真正的好处吗?

    reduce 方法的大多数用例都可以使用 for 循环轻松重写 对 JSPerf 的测试表明 reduce 通常会慢 60 75 具体取决于每次迭代内执行的操作 除了能够以 函数式风格 编写代码之外 还有什么真正的理由使用reduce 吗

随机推荐

  • 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