grr1640610995的博客

原创 js封装一套拖拽类

原创 前端本地sqlite3轻量化存储

前端本地永久化存储

原创 vue3 路由缓存页面

当前页面跳转到某个固定页面时缓存当前页面内容

原创 移动端公共样式

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,li,p,table,th,td,input,textarea { margin: 0; padding: 0; list-style: none; border: none;}@media screen and (min-width: 415px) { html { height: 100%; font-size: 90px; }}.

原创 el-table中实现某一列内容同时包含按钮和title的内容

原创 vue 封装swiper

vue-awesome-swiper | Homepage | Surmon's projectsvue-awesome-swiper | Homepagehttps://github.surmon.me/vue-awesome-swiper/

原创 vscode 任意范围内折叠

#region#endregion

原创 Vue引入背景图的拼接语法

原创 Vue图片点击放大预览

1、安装依赖：npm install v-viewer --save2、main.js 内引用并注册调用:import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer);Viewer.setDefaults({ Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "to.

原创 vue2.6之后的slot用法

此版本舍弃了slot和slot-scope v-slot可缩写为#匿名插槽父组件 fahterSlot <h1>下面是插槽内容</h1> <div style="border: solid 1px red"> <childSlot> <!--子组件--> <template v-slot:default> 我是父组件内容... <...

原创 如何在vue中优雅的自由使用iconfont

参考文献：https://juejin.cn/post/68449035175644364931.在src目录新建一个icons目录，svg下面放iconfont的icon标签的svg标签文件，下载下来复制粘贴即可使用目录结构如下：2.index.js文件：3.如上面代码而言，我们需要封装一下icon，在components下新建SvgIcon文件<template> <div v-if="isExternal" :style="styleExterna..

原创 thinkphp 实现用户注册调用邮箱发送验证码

thinkphp 调用邮箱接口发送验证码1.安装PHPMailer2.开启服务，保留授权密码。3.在控制器中编写代码4.验证

原创 vue中子组件一次性向父组件传递多个参数

子组件：父组件：

原创 封装可自由扩充的表格

原创 封装多功能分页器

原创 Git提交本地和导出diff

1.git status //查看修改2.git fetch //拉取最新代码3.git stash //暂存更改(必须是工作区中已经被git追踪到的文件)4.git rebase //合并拉取的代码，fetch到内容，暂存后要rebase。如果使用git pull 会自动合并5.git stash pop 取出暂存代码 git restore --staged xxx.text 释放暂存区文件，保留修改，加 . 释放所有暂存区文件6.git add /view.index //写入某文件到缓存区

原创 Vuejs优化之install全局引入公共样式的方法

自定义index.js文件中引入组件在main.js中全局注册公共样式

原创 Vue引入背景图的拼接语法

原创 Echarts动态折线图主要实现思路

需求：动态折线图折线随时间每秒向右推移，折线图首屏数据默认为0实现思路：针对首屏数据为0，考虑使用给每条折线设置初始值的方法；综合考量一屏显示的数据量和x轴的时间间隔决定塞入一百条数据，方法如下 2.因为没有接口，暂时使用30-60之间的假数据。折线数据需要与自定义图例对应，所以获取数据时直接把数值给到相应的图例自定义图例 3.接下来需要一个数据格式化的函数，格式化即将插入option.series.data的数据。因为要做到折线随时间推移，所...

原创 echarts Option主要配置项

Option主要配置项mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...fontFamily:"sans-serif", //字体系列fontSize:18, //字体大小};mylineStyle={color:"#333", //颜色，'rgb(12

原创 使用nextElementSibling跳转到下一个InPut框

onkeyup4(event, tabindex) { if (event.keyCode === 190 || event.keyCode === 110) { // 输入.需要执行自动跳转到下一个input框 event.target.value = event.target.value.replace(/\./, '') // 先将输入的.删除 if (tabindex !== 3 && event.target.value.length &.

原创 当setInterval遇上await

StartTimer() { console.log('StartTimer-----') // this.firmwareTimer = setInterval(this.GetData(), 1000) this.firmwareTimer = setInterval(async () => { await this.GetData() }, 1000) }, StopTimer() { clea...

原创 踩坑记 - 下拉列表框动态调整option与同时赋值引起的bug

问题描述在开发过程中，偶尔会遇到动态调整下拉列表框select的option，并同时对下拉列表框select绑定的变量进行赋值，如果option内容太多，而赋值太快，会遇到赋值失败的问题下拉列表框select操作展示问题分析原因是赋值太快，select绑定的值必须存在于option中，但此时option还在动态生成中，导致绑定值不存在于option中，赋值失败解决方案将赋值操作放到this.$nextTick()函数中此函数this.$nextTick()是将回调函数延

原创 记录vue destroyed clearInterval失败引起的bug

问题描述TRENDnet AP新版页面，login后进入Dashboard页面，之后不等加载完成快速切换到其他页面，发现Dashboard中有一个周期性定时器timer未被释放，还在定时向后台请求数据（并非每次都能复现，但出现几率很高）问题分析修改前的代码，主要红框中的await修改后的代码，将红框中的await移除，问题就被fix了，why？可能的原因：不等加载完成快速切换到其他页面，这样导致通过mounted执行的函数loadCPUMemoryData与d

原创 vuex结合router-view刷新当前页

项目案例单击当前页面对应的菜单，以刷新当前页面(即重新载入)结合案例理解一下vuex中的几个概念state： 将state看作是所有组件的data, 用于保存所有组件的公共数据getters： 将getters属性理解为所有组件的computed属性mutaions： 将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type第一个参数是state, 第二参数是payload, 也就是自定义的参数.注意:调用mut

原创 v-router多级菜单实际应用

总结Vue.js + vue-router 可以很简单的实现单页应用。 <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容 <router-view>用于渲染路由匹配到的组件 <router-link>与<router-view>必须成对出现项目案例以TRENDnet Cypress为例说明一下项目中的vue-router menu最大支持三级菜单，以System--> L3 Featu

原创 el-select下el-option选项中添加icon

围绕文件夹与文件来拆分整个对象数组treeFilter(res){constfolder=[]constfile=[]constfolderTree=[]constfileTree=[]consttree=[]letfolderItem={}letfileItem={}//筛选文件夹/文件for(leti=0...

原创 el-tree前端数据的动态生成

思路：区分文件夹与文件treeFilter(res){constfolder=[]constfile=[]constfolderTree=[]constfileTree=[]consttree=[]letfolderItem={}letfileItem={}//筛选文件夹/文件for(leti=0;i...

原创 mavon-editor使用教程

来源：https://www.npmjs.com/package/mavon-editorInstall mavon-editor (安装)$ npm install mavon-editor --saveUse (如何引入)index.js: // 全局注册 // import with ES6 import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavon

原创 Vue 拖拽组件 vuedraggable 和 vue-dragging

Vue 拖拽组件 vuedraggable 和 vue-dragging参考网址：http://www.ptbird.cn/vue-draggable-dragging.html、http://www.itxst.com/vue-draggable/tutorial.html使用过程：安装：npm i -S vuedraggable引入：使用：展示：