- 博客(65)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 driver.js自定义用户引导样式
Driver.js 是一个强大的，轻量级，使用原生 JavaScript 引擎开发的库，用于在页面聚焦用户的关注点。它支持所有主流浏览器，并且可高度自定义。Driver.js 并不仅仅是一个指南性质的库，其用户场景非常广泛，能够用于任何需要为页面构建浮层的情况，譬如当用户需要与某些元素交互而隐藏其他元素的场景。功能特性使用简单，无外部依赖极轻量，约～4kb，原生 JavaScript 引擎开发API 功能强大，高度可定制可着重（突出）显示页面上的任何元素。
2023-04-06 16:19:47
1626
原创 nuxt 3.0.0-rc.10创建项目报错临时解决方案
昨天创建项目的时候还好好的，今天创建项目就报错了。昨天nuxt依赖版本还是3.0.0-rc.9，今天变成了3.0.0-rc.10。一看GitHub，原来是10个小时之前更新版本了。使用命令创建项目失败原因不得而知，但应该和本次更新脱不了关系。报错信息：No such built-in module: node:stream/promises。执行npm install，npm run dev，就可以成功运行了。点击下载按钮，将项目下载到本地，进行解压。临时解决方案：进入沙盒案例。
2022-09-15 11:17:26
1198
原创 CSS遮罩层样式
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遮罩层样式<.
2022-04-13 13:59:37
492
原创 CSS弯月
效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>弯月</title> <style> .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; widt
2022-03-28 15:06:08
688
原创 CSS挥手的小企鹅
效果一代码一<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>睁眼小企鹅</title> <style> .penguin { --penguin-skin: black; position: relative; margin: auto; display: block; margi
2022-03-28 14:54:00
190
原创 CSS粉色爱心
效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>粉色爱心❤样式</title> <style> .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0;
2022-03-28 14:25:40
1062
原创 Windows11初体验——感觉图标变圆润、界面更清爽了
前提前两天看到一篇推送文章——Win11你升级了吗，我就问了一下我的小伙伴Win11体验感如何（他已经升级了），小伙伴说界面很友好，如果平时不玩游戏的话，目前的版本是不影响使用的，而且不需要重装系统，也就不需要数据备份、重新安装软件了，就在Win10的基础上升级就好了。虽然我不敢做第一波吃螃蟹的人，但按捺不住那颗跃跃欲试的心。我是今年4月份刚买的新款电脑，所以硬件要求是满足的。我的小伙伴二话不说，就帮我升级了系统。准备工作2021年10月5日，微软宣布Windows 11全面上市，适用
2021-10-20 17:27:46
1058
1
原创 自定义Element单选按钮选中样式
Element默认样式自定义后的样式代码：<template><el-radio-group v-model="radio" class="radio-checked"> <el-radio :label="1">刘备</el-radio> <el-radio :label="2">关羽</el-radio> <el-radio :label="3">张飞</el-radio>
2021-09-13 10:19:36
1939
原创 border-image属性+点九图设计使用方法
前提UI做的一个页面的设计图，主体内容背景是一个八边形，加四个不规则顶角边框。实现思路宽、高固定，那就简单了，直接让UI给出一个固定宽高的背景.png就好了。宽、高不固定，可以参考聊天气泡框实现原理，4个顶角是固定的，将中间的纯背景进行拉伸。UI给我的设计图（关键词：点九图）4个顶角的尺寸是58px*58px，目前中间的那部分尺寸也是58px，其实中间尺寸>1px就可以了，最好留点安全距离，以便拉伸的时候不会影响到4个角。我使用css border-image属性.
2021-09-10 16:50:51
900
原创 ElementUI 日期时间选择器（自定义快捷选项：今天、昨天、最近一周、最近一个月、最近三个月、本月、上个月、下个月）最详细使用总结
整体效果截图：局部效果截图：今天昨天最近一周最近一个月最近三个月本月上个月下个月吐槽在网上找半天，方法都不靠谱，特别是计算月初和月尾，以30天为计算差太不严谨了，不过也给了我灵感。还有就是一天的计算时间，我都是以00:00:00开始到23:59:59结束。代码下载地址目前待审核，等审核成功再更新。。。未完待续。。。附：我是在https://codepen.io/在线完成测试的，也是在线直接导出的，解压之后找到src文
2021-06-23 15:49:52
2188
转载 npm安装卸载命令
npm安装模块 【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录； 【npm install -g xxx】利用npm安装全局模块xxx； 【npm install xxx】安装但不写入package.json； 【npm install xxx –save】 安装并写入package.json的”dependencies”中； 【npm install xxx –save-dev】安装并写入package.json的”devD
2021-06-02 11:18:46
1251
原创 vue 浏览器调试工具devtools 不用谷歌商店就能完成安装
参考博客：https://www.cnblogs.com/chenhuichao/p/11039427.html第一步将github项目clone到本地，如果不能访问github或者下载速度慢，可参考博客==>https://blog.csdn.net/fyydashen/article/details/103937233git clone https://github.com/vuejs/vue-devtoolsGithub：GitHub - vuejs/vue-devtoo.
2021-05-13 10:17:14
393
原创 Vue+Element将多选框组件el-checkbox-group成行排列
官网地址组件 | Element更改前：更改后：关键样式==>style="display:block;padding-top:10px"，代码如下：<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-checkbo...
2021-04-25 17:39:04
5992
1
原创 关闭VSCode的自动保存功能
不知道有没有小伙伴和我一样，之前都已经习惯了ctrl+s手动保存代码，不知道从哪一天开始，VSCode一旦失去焦点，或鼠标右键单击的时候，就会自动保存。有时候代码还没从另一块面板ctrl+c、ctrl+v结束，代码一保存页面就会刷新，代码格式也会发生变化。刚开始我觉得自动保存挺好，省的丢了代码，只是我还不习惯。后来是真的不习惯，于是我就关闭了该功能。很简单，点击文件，找到自动保存，取消勾选就好了。记得写完代码要保存哦！...
2021-04-19 15:37:47
4114
原创 Win10前端开发环境配置
前提：我是前端开发，换了个电脑，需要重新配置环境。一、安装Node.jshttps://nodejs.org/zh-cn/download/下载完成，点击安装文件一路Next，傻瓜式安装即可，会自动配置环境变量和安装npm包。安装完成之后，打开cmd命令行，输入以下命令查看版本号。新建两个文件夹，配置自定义的全局模块安装目录。配置命令如下，注意路径是自己本地的路径新建一个系统变量在Path里新增路径在cmd执行以下命令，发现配置已生效。...
2021-04-09 13:20:02
817
原创 Element+Dialog 使用插槽自定义弹窗标题
前提：我想给 Element 的弹窗标题动态字段加个样式。官网给出了插槽，但只有 footer 插槽的例子，于是在此做个记录。https://element.eleme.cn/2.15/#/zh-CN/component/dialog<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog :visible.sync="dialogVisible
2021-04-02 17:08:05
3137
原创 ElementUI+el-dropdown+el-tooltip 提示信息不显示
如下代码，提示信息不显示：<el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item c
2021-03-31 14:58:17
1236
5
原创 Vue+style 动态样式绑定（收藏图标）
主要代码：0：未收藏1：已收藏<vab-icon :icon="row.is_collect == 1 ? 'star-fill' : 'star-line'" :style="{ color: row.is_collect == 1 ? 'orange' : '' }" />效果截图：代码：<el-table v-loading="listLoading" :data="grouplist" border> <el-table
2021-03-23 16:00:59
1779
原创 Vue+Element自定义按钮和下拉框全局样式
前提我们使用的是Vab Admin Pro管理模板，它基于Vue2.x+element-ui。在线演示地址：https://chu1204505056.gitee.io/admin-pro/?hmsr=authorization&hmpl=&hmcu=&hmkw=&hmci=#/index我还参考了element-ui的plain属性样式效果截图代码在public/static/css文件夹下新建公共样式 button.scs...
2021-03-22 20:35:37
1133
原创 Vue + el-tabs + echarts 样式失效问题
解决方案：将 tab 下的组件用 v-if 判断，重新渲染即可。<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="仪表盘1" name="first"> <Dashboard1 v-if="activeName == 'first'"></Dashboard1> </el-tab-p
2021-03-18 10:24:54
623
原创 Vue 使用/deep/在当前页面修改Avue-CRUD组件的默认样式
Avue-CRUD组件默认样式：此页面不需要新增按钮，刷新图标按钮和列显隐图标按钮我都隐藏了（refreshBtn:false,columnBtn:false）但是有搜索功能，默认显示搜索图标按钮。我觉得该行太空了，不想要该功能，设置搜索显隐按钮（searchBtn: false），该行依然占位，搜索按钮也没了，所以不可取于是我便去修改Avue-CRUD组件的默认样式F12打开控制台，找到控制该div样式的类.avue-crud__menu效果截图错误示...
2021-02-03 16:38:52
4627
12
原创 Avue项目基于Vue2.x使用mixin封装用户引导driver插件配置文件
官方文档Avuehttps://avuejs.com/混入 (mixin)https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80driver.js插件Github地址：https://github.com/kamranahmedse/driver.jsGitee地址：https://gitee.com/mirrors/Driverjs在线案例：https://kamranahmed.info/driver.js
2021-02-02 19:02:18
1738
原创 在Avue项目中使用echarts图表
效果图：一、先在命令行安装echarts方法一：npm安装npm install echarts --save方法二：cnpm安装// npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S目前我安装的版本是：echarts 5.0.1二、代码<template> <!-- 为 ECharts 准备一个具备大小（宽高）的
2021-01-29 17:34:07
901
2
原创 Vue+Element 动态表单自定义正则表达式验证
使用场景宏命令输入验证，宏命令格式如下：{$xxx}，xxx暂为任意字母、数字、下划线组合的字符串，但{$}是固定的格式。动态表单验证需要用到prop属性，可参考官方文档：动态增减表单项局部代码如下<template> <el-form :model="add_host_Form" size="small"> <el-form-item label="macros"> <el-row style="font-size: 13px" v-
2020-12-27 19:53:37
1557
1
原创 Vue+Element 动态绑定disabled属性
代码要实现一个动态添加和删除的时间控件列表，列表第一个不能删除，属性为disabled。<ul style="list-style: none"> <li v-for="(item, index) in run_datetime" :key="index"> <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="item.day"
2020-12-25 14:07:49
9589
原创 JS 合并纯字符串数组并去重
局部代码：// 第一步、不去重合并数组var arr1 = ["a", "b", "c"];var arr2 = ["a", "c", "d"];var arr_before = arr1.concat(arr2);console.log("去重前", arr_before);var arr_after = [];// 第二步、去重操作for (var i = 0, l = arr_before.length; i < l; i++) { for (var j = i + 1;
2020-12-24 11:32:36
707
原创 Vue+Element 将常用的数据字典封装成配置文件
将常用的数据字典封装成配置文件(devicetype.js)，代码如下：// 数据显示时使用export const deviceType = { 11: "服务器", 12: "数据库", 13: "网络设备", 14: "企业应用", 15: "打印机", 16: "UPS", 17: "PC终端", 19: "虚拟设备"}// 数据搜索传参时使用export const deviceSearch = [{
2020-12-23 11:07:05
954
原创 Vue+$route 循环执行定时器，并销毁
要实现的功能：1. 当我初次打开一个页面时，就开始循环执行定时任务，定时刷新页面列表；2. 当我离开或关闭当前页面时，销毁定时器任务；3. 当我再一次进入打开的页面时，又开始循环执行定时任务。因为页面之间是路由跳转，所以用beforeDestroy方法并不能执行销毁定时器。所以我使用的是监听路由跳转来操作。mounted() { // 初次打开页面执行获取列表方法和定时任务 this.getNatRule(); // methods里的方法 this.timer = set
2020-12-21 19:26:14
706
原创 Vue+Element 单选模式下Cascader级联选择器使用总结
一、单选模式下选择任意节点在单选模式下，只能选择叶子节点，是因为父子节点存在关联。官方文档中写道：“可通过props.checkStrictly = true来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。”使用示例：<el-cascader :props="{ checkStrictly: true }" :options="options"></el-cascader>二、单选模式下选中节点后，关闭下拉框在单选模式下，选中节点后，下拉框不会...
2020-12-11 03:27:20
7653
11
原创 VSCode Vetur版本0.31.0报错且不能格式化Vue文件
今天下午在写代码的时候，VSCode编译器右下角突然报错，报错内容如下：Vetur find `tsconfig.json`/`jsconfig.json`, but they aren't in the project root.而且不能进行格式化vue文件操作了，我这人有强迫症，找到是Vetur插件在一个小时前更新造成的结果，我采用的是版本回退的方法解决的这个问题。在Vetur插件进行鼠标右键，选择==>安装另一个版本。选择之前的版本，然后重启VSCode编译器。我选择的是0
2020-12-09 15:57:02
3575
14
原创 Vue+$route 页面跳转传参
父页面代码，传值操作：goToDetail(row) { this.$router.push({ path: "assetdetail", query: { alias: row.name, id: row.id } })}子页面代码，取值操作：// 取query对象值this.$route.query// 取query具体属性值this.$route.query.aliasthis.$route.query.id...
2020-12-08 22:19:35
204
原创 Vue+$route 监听页面跳转
场景：父页面A，子页面B。从父页面A跳转到子页面B，进行添加操作，添加完成，关闭子页面B，跳转回父页面A。因为新增一条数据，需要重新加载列表。父页面A局部代码如下：watch: { $route(to, from) { // console.log("到哪个页面去", to.path); // console.log("从哪个页面来", from.path); if (to.path == "/asset/allasset" && from.path =
2020-12-08 22:01:48
2700
1
原创 Vue+Element 使用三元表达式改变form表单label标签文字内容
在这里只贴出局部代码<el-form-item :label="[triggerForm.recovery_mode == 1 ? '问题表现形式' : '表达式']" prop="expression"> <el-input type="textarea" v-model="triggerForm.expression"></el-input></el-form-item>...
2020-12-08 15:51:15
5261
原创 Vue 改变变量指向的地址
在项目中，将a赋值给b，b改变，a值也会发生改变。我是使用强制改变变量指向的地址来解决的。var str1 = "abc";var str2 = "";// str2 = str1;str2 =JSON.parse(JSON.stringify(str1));
2020-12-03 16:38:05
809
原创 Vue+Element el-select数据回显(value和label)
遇到的问题：在编辑时，回显的数据为数字。因为巡检周期字段是按约定好的数字传参的，而前端需要根据数字展示文字。常见的情况还有性别，数字0表示男，数字1表示女。1 ==> 日巡检2 ==> 周巡检3 ==> 月巡检4 ==> 单次巡检修改前的效果：修改前的代码：<el-select v-model="editTaskForm.run_style" placeholder="请选择"> <el-option label="日巡..
2020-10-29 15:43:23
11741
4
原创 JQuery 使用listnav和pinyin插件实现中文首字母导航排序
参考网站：https://www.jb51.net/article/27643.htm截图如下：a.b.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head&g..
2020-10-21 16:12:16
620
原创 Vue 利用filter和match实现多条件模糊查询
运行截图：复制下面代码，直接可以运行<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>博客列表</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> #show-blogs{ max-wid
2020-10-15 15:05:49
2388
ElementUI日期时间选择器 自定义快捷选项最详细使用代码
2021-06-23
archetype-catalog.xml
2021-03-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人