vue2企业级项目（六）

vue2企业级项目（六）

自定义指令

  1. 创建src/directive/index.js

    const directives = require.context("./modules", true, /\.js$/);export default {install: (Vue) => {directives.keys().forEach((key) => {let directive = directives(key).default;let name = key.replace(/^\.\/(.*)\.\w+$/, "$1");directive && Vue.directive(name, directive);});},
};

  2. main.js注入使用

    import directives from "./directive";...Vue.use(directives);

  3. 创建src/directive/modules目录

1、v-loading

element-ui有，就不需要

2、v-draggable

创建src/directive/draggable.js

import { checkDataType } from "@/utils/utils";
let recoverStyle = null;export default {update(el, binding) {let config = binding.value;let visible = false;let target = ".el-dialog__header";let control = ".el-dialog";if (checkDataType(config, "object")) {visible = config.visible;target = config.target;control = config.control;} else {visible = config;}const dialogHeaderEl = el.querySelector(target);const dragDom = el.querySelector(control);dialogHeaderEl.style.cursor = "move";function readStyle(dom, attr) {if (document.body.currentStyle) return dom.currentStyle[attr];return getComputedStyle(dom, false)[attr];}if (visible) {recoverStyle = {left: readStyle(dragDom, "left"),top: readStyle(dragDom, "top"),margin: readStyle(dragDom, "margin"),};dialogHeaderEl.onmousedown = function(e) {// 获取鼠标相对当前元素内部位置const disX = e.clientX - dragDom.offsetLeft;const disY = e.clientY - dragDom.offsetTop;// 获取当前窗口视图大小const screenWidth = document.body.clientWidth;const screenHeight = document.documentElement.clientHeight;// 获取当前元素大小const dragDomWidth = dragDom.offsetWidth;const dragDomheight = dragDom.offsetHeight;// 计算获取最大偏移量const maxLeft = screenWidth - dragDomWidth;const maxTop = screenHeight - dragDomheight;document.onmousemove = function(e) {let left = e.clientX - disX;let top = e.clientY - disY;// 碰撞判断if (left <= 0) left = 0;if (left >= maxLeft) left = maxLeft;if (top <= 0) top = 0;if (top >= maxTop) top = maxTop;left = ((left * 100) / screenWidth).toFixed(2) + "%";top = ((top * 100) / screenHeight).toFixed(2) + "%";dragDom.style.left = left;dragDom.style.top = top;dragDom.style.margin = 0;};document.onmouseup = function() {document.onmousemove = null;document.onmouseup = null;};};} else {// 还原初始化的样式dragDom.style.left = recoverStyle.left;dragDom.style.top = recoverStyle.top;dragDom.style.margin = recoverStyle.margin;dialogHeaderEl.onmousedown = null;recoverStyle = null;}},
};

3、v-click-outside

创建src/directive/click-outside.js

export default {bind(el, binding) {// 点击事件回调函数const onClickOutside = (event) => {if (!(el === event.target || el.contains(event.target))) {binding.value(event);}};// 将回调函数绑定到元素上el._clickOutsideCallback = onClickOutside;// 添加点击事件监听器document.addEventListener("click", onClickOutside);},unbind(el) {// 移除点击事件监听器document.removeEventListener("click", el._clickOutsideCallback);delete el._clickOutsideCallback;},
};

4、v-ripple(简单的)

创建src/directive/ripple.js

function createRipple(el, radius, color, disX, disY) {new Promise((resolve) => {const rippleDom = document.createElement("span");rippleDom.className = "ripple";rippleDom.setAttribute("style",`display: block;position: absolute;border-radius: 50%;transform: translate(-50%, -50%) scale(0);transition: 0.5s;background-color: ${color || "rgba(0, 0, 0, 0.6)"};top: ${disY}px;left: ${disX}px;width: ${radius * 3}px;height: ${radius * 3}px;animation: ripple-animation 0.5s linear;`,);el.appendChild(rippleDom);let timer = setTimeout(() => {el.removeChild(rippleDom);resolve(timer);}, 520);}).then((timer) => {clearTimeout(timer);});
}function rippleShow(e) {const targetDom = e.target;const radius =targetDom.offsetHeight > targetDom.offsetWidth? targetDom.offsetHeight: targetDom.offsetWidth;const disX = e.clientX - targetDom.offsetLeft;const disY = e.clientY - targetDom.offsetTop;createRipple(targetDom, radius, e?._ripple, disX, disY);
}export default {bind(el, binding) {el._ripple = binding.value;el.style.position = "relative";el.style.overflow = "hidden";el.style.userSelect = "none";el.addEventListener("mousedown", rippleShow);},unbind(el) {el._ripple = null;el.removeEventListener("mousedown", rippleShow);},
};

创建src/styles/animation.less，并在scr/styles/index.less内引入

// ripple动画
@keyframes ripple-animation {to {transform: translate(-50%, -50%) scale(1);opacity: 0;}
}

5、v-intersect

交叉观察者

创建src/directive/intersect.js

export default {bind(el, binding) {let info = null;let callback = null;if (typeof binding.value === "object") {info = binding.value?.info;callback = binding.value?.callback;} else {callback = binding.value;}const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {callback && callback(info);}});},{ root: el.parentElement },);observer.observe(el);},
};

6、v-scroll

滚动监听

创建src/directive/scroll.js

export default {bind(el, binding) {el.onscroll = function() {binding.value({x: el.scrollLeft,y: el.scrollTop,});};},unbind(el) {el.onscroll = null;},
};

7、v-scroll-to

滚动设置

创建src/directive/scroll-to.js

export default {update(el, binding) {let x = binding.modifiers?.x || false;if (binding.value && binding.value === binding.oldValue) return;if (typeof binding.value === "number") {x ? (el.scrollLeft = binding.value) : (el.scrollTop = binding.value);} else if (typeof binding.value === "string") {let targetDom = document.querySelector(binding.value);if (x) {let border = getComputedStyle(el, false)["borderLeftWidth"];let padding = getComputedStyle(el, false)["paddingLeft"];border = border.replace("px", "");padding = padding.replace("px", "");el.scrollLeft = targetDom.offsetLeft - el.offsetLeft - border - padding;} else {let border = getComputedStyle(el, false)["borderTopWidth"];let padding = getComputedStyle(el, false)["paddingTop"];border = border.replace("px", "");padding = padding.replace("px", "");el.scrollTop = targetDom.offsetTop - el.offsetTop - border - padding;}}},
};

8、v-auto-scroll

自动滚动

创建src/directive/scroll-auto.js

function active(el, scroll, step, max, x) {window.requestAnimationFrame(() => {x ? (el.scrollLeft = scroll) : (el.scrollTop = scroll);scroll += step;if (scroll >= max) scroll = 0 + step;active(el, scroll, step, max, x);});
}export default {inserted(el, binding) {const x = binding.modifiers?.x || false;let step = 0;let scroll = 0;if (typeof binding.value === "object") {step = binding.value?.step || 5;scroll = binding.value?.begin || 0;} else {step = binding.value || 5;}const scrollMax = x ? el.scrollWidth : el.scrollHeight;el._children = [].slice.call(el.children);el._children.forEach((child) => {el.appendChild(child.cloneNode(true));});active(el, scroll, step, scrollMax, x);},unbind(el) {el.innerHtml = "";let children = [].slice.call(el.children);children.forEach((child) => {el.removeChild(child);});el._children.forEach((child) => {el.appendChild(child.cloneNode(true));});},
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/13052.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Windows如何安装Django及如何创建项目

Windows如何安装Django及如何创建项目

目录 1、Windows安装Django--pip命令行 2、创建项目 2.1、终端创建项目 2.2、在Pycharm中创建项目 2.3、二者创建的项目有何不同 2.4、项目目录说明 1、Windows安装Django--pip命令行 安装Django有两种方式&#xff1a; pip命令行【推荐--简单】手动安装【稍微复杂一丢丢…
阅读更多...
无涯教程-jQuery - Puff方法函数

无涯教程-jQuery - Puff方法函数

吹气效果可以与show/hide/toggle一起使用。通过按比例放大元素并同时隐藏它&#xff0c;可以形成粉扑效果。 Puff - 语法 selector.hide|show|toggle( "puff", {arguments}, speed ); 这是所有参数的描述- model - 效果的模式。可以是"显…
阅读更多...
【嵌入式Linux系统开发】——系统移植概述

【嵌入式Linux系统开发】——系统移植概述

目录 &#x1f349;&#x1f349;一、什么是嵌入式系统 &#x1f349;&#x1f349;二、嵌入式系统操作 &#x1f349;&#x1f349;三、嵌入式Linux的特点 &#x1f349;&#x1f349;四、嵌入式系统的组成 1、硬件和软件 2、硬件层 3、中间层 4、软件层 5、 功能层与执…
阅读更多...
如何用Python统计CSDN质量分

如何用Python统计CSDN质量分

文章目录 CSDN质量分查询selenium爬取博客地址单篇测试批量查询分析 CSDN质量分查询 CSDN对博客有一套分数评价标准&#xff0c;其查询入口在这里&#xff1a;质量分查询&#xff0c;效果大致如下 如果质量分太低&#xff0c;就会在博文的标题下面出现黄底黄字&#xff1a; 这…
阅读更多...
Redis简介，设置redis内存大小，设置redis淘汰机制，查看内存占用情况，内存占用分析

Redis简介，设置redis内存大小，设置redis淘汰机制，查看内存占用情况，内存占用分析

为什么使用Redis缓存数据库 我们日常的开发&#xff0c;无非是对数据的处理。程序的定义也可以这样狭义的解释&#xff1a;算法数据。可见数据库是多么重要的工具。但是关系型数据库的读写能力在200-1000次/秒不等&#xff0c;服务器好点可能更多&#xff0c;这导致在高并发的…
阅读更多...
排序链表——力扣148

排序链表——力扣148

文章目录 题目描述法一 自顶向下归并排序法二&#xff09;自底向上归并排序 题目描述 题目的进阶问题要求达到 O(nlogn) 的时间复杂度和 O(1) 的空间复杂度&#xff0c;时间复杂度是 O(nlogn) 的排序算法包括归并排序、堆排序和快速排序&#xff08;快速排序的最差时间复杂度是…
阅读更多...
【C#】.Net Framework框架下的Authorize权限类

【C#】.Net Framework框架下的Authorize权限类

2023年&#xff0c;第31周&#xff0c;第3篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 在C#的.NET Framework中&#xff0c;你可以使用Authorize类来处理权限认证。Authorize类位于System.Web.Mvc命名空间中&#xff0c;它提供了…
阅读更多...
关于Docker的知识点

关于Docker的知识点

Docker是一个快速交付应用、运行应用的技术。 Docker基本操作--容器 示例&#xff1a;创建运行一个Nginx容器
阅读更多...
Python不是一门伟大的语言

Python不是一门伟大的语言

作为一门简洁易用、生态蓬勃且具有高泛用性的编程语言&#xff0c;Python一直以来都被不少人称作“编程语言中的瑞士军刀”。 尤其随着近来AI热潮席卷全球&#xff0c;Python在编程语言圈中的地位也随之水涨船高&#xff0c;甚至一度被视作AI专用语言或大数据专用语言。 然而…
阅读更多...
QT第四讲

QT第四讲

思维导图 基于QT的网络聊天室 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> //服务器类 #include<QTcpSocket> //客户端类 #include<QMessageBox> //对话框类 #include<QList…
阅读更多...
css之文字描边

css之文字描边

文章目录 传统方式实现第二种方式 传统方式实现 html <p>文字描边效果</p>scss mixin text-stroke($color: #ffffff, $width: 1px) {text-shadow: 0 -#{$width} #{$color},#{$width} -#{$width} #{$color},#{$width} 0 #{$color},#{$width} #{$width} #{$color}…
阅读更多...
【AI】roop给视频换脸记录

【AI】roop给视频换脸记录

环境 安装Anaconda3基于Anaconda3创建一个python3.10的环境安装Git安装ffmpeg 我的操作系统版本是Ubuntu 18.04.4 LTS&#xff08;带GPU会快一点&#xff09;&#xff0c;以上所说的 环境请自行百度安装&#xff01;快速使用 拉取项目 git clone gitgithub.com:VoidAndNull…
阅读更多...
Spring Cache

Spring Cache

什么是Spring Cache&#xff1f; Spring Cache是Spring框架的一个模块&#xff0c;它提供了对应用程序方法级别的缓存支持。通过使用Spring Cache&#xff0c;您可以在方法的结果被计算后&#xff0c;将其缓存起来&#xff0c;从而避免相同输入导致的重复计算。 Spring Cache…
阅读更多...
AWS考试认证学习(二)

AWS考试认证学习(二)

一、AWS高级 SAP-C01考试 AWS高级考试 AWS Certified Solutions Architect - Professional 报名费&#xff1a;300美金 SAP-C01考试内容主要覆盖的五大领域和对应领域所占权重&#xff1a; 1、组织复杂性设计 12.5% 2、新解决方案设计 31% 3、迁移规划 15% 4、成本控制…
阅读更多...
Linux 发行版 CentOS 于 Ubuntu 软件的安装、卸载、查找

Linux 发行版 CentOS 于 Ubuntu 软件的安装、卸载、查找

CentOS于Ubuntu 内核都是Linux&#xff0c;是一样的。 CentOS 软件格式 .rpm sudo yum [-y] [ install | remove | search ] 软件名称 install 安装 remove 移除 search 搜索 Ubuntu 软件格式 .deb sudo apt [-y] [ install | remove | search ] 软件名称 install 安装 remove…
阅读更多...
二叉树的层序遍历（两种方法：迭代+递归）

二叉树的层序遍历（两种方法：迭代+递归）

题目&#xff1a; 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]] 解题思路&#xff1a;迭代法…
阅读更多...
Vector＜T＞ 动态数组（随机访问迭代器）（答案）

Vector＜T＞ 动态数组（随机访问迭代器）（答案）

答案如下 //------下面的代码是用来测试你的代码有没有问题的辅助代码，你无需关注------ #include <algorithm> #include <cstdlib> #include <iostream> #include <vector> #include <utility> using namespace std; struct Record { Record…
阅读更多...
第一财经专访张晨：图技术赋能金融领域进入全新阶段

第一财经专访张晨：图技术赋能金融领域进入全新阶段

2023世界人工智能大会期间&#xff0c;创邻科技创始人兼CEO张晨博士受邀走进第一财经的演播室&#xff0c;围绕人工智能技术和图技术在金融行业的赋能展开讨论&#xff0c;为线上数万名观众分享精彩前沿观点。 现场直击 AI赋能金融 大模型催生新业态 | 图技术赋能金融领域进入…
阅读更多...
string类的模拟实现

string类的模拟实现

文章目录 string类的模拟实现string基本框架的实现operator的实现string常用函数的实现 string类的模拟实现 前文对于string的常用函数做了讲解&#xff0c;由于string是一个面试官常考的点&#xff0c;总喜欢让模拟实现string类&#xff0c;下面来模拟实现一下string&#xf…
阅读更多...
优化企业集成架构：iPaaS集成平台助力数字化转型

优化企业集成架构：iPaaS集成平台助力数字化转型

前言 在数字化时代全面来临之际&#xff0c;企业正面临着前所未有的挑战与机遇。技术的迅猛发展与数字化转型正在彻底颠覆各行各业的格局&#xff0c;不断推动着企业迈向新的前程。然而&#xff0c;这一数字化时代亦衍生出一系列复杂而深奥的难题&#xff1a;各异系统之间数据…
阅读更多...
最新文章

Copyright @ 2022~2023