- 博客(46)
- 收藏
- 关注
RSS订阅原创 平铺转树形结构，树形子节点找所有父级id的path数组
日常与后端交互中，经常涉及平铺转树，通过子节点找父节点path的问题直接上代码：平铺转树形结构数据：/** * @description: formatter array to tree. * @param : arr{Array} tiled arr * @param : pid{string} parent id * @return {Array} * @author: Leo */export function arrToTree(arr, pid = "0") { cons
2021-11-26 11:09:02
566
原创 electron实现消息闪烁，与页面通信
根目录下新建vue.config.jsmodule.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true, builderOptions: { win: { icon: "./public/app.ico", // 自行切换 }, mac: { icon: "./public/app.png", /
2021-07-21 15:52:15
707
原创 element-ui的el-table动态修改表格展示列，table高度变小问题
项目需求需要根据筛选项选择的不同，展示不同的table列当切换搜索筛选项，进行table查询时，出现问题：el-table列动态发生变化后，el-table__body-wrapper的高度变小了el-table__body-wrapper的高度是动态设置的，在网上查的结果对el-table添加css：.table-fixed { /deep/.el-table__body-wrapper { height: calc(100% - 44px) !important; }}
2021-04-08 15:51:17
4674
11
原创 Vue中插槽（slot）使用和理解
最近被新来的同事问起vue的插槽（slot）的问题，想了一下，感觉平时开发中slot使用频率并不是很高。所以结合了一个实例代码，整理了下插槽（slot）的用法。Vue官网文档上是这么描述的：将 slot 元素作为承载分发内容的出口。在我个人理解：slot既然叫插槽，可以理解为占位内嵌的地方，具体到代码中就是组件内可以添加内容的一个空间。1. 匿名插槽// 组件（父） <Card> <p>hello,world</p> </Card&g
2020-06-10 15:52:39
757
原创 html中单文件引入mintui
vue-cli中引入mintui，直接npm install，然后import就行了。单html文件中如何引入mintui使用呢？// 下载本地后引入js 与 css文件<script src="./script/mint_index.js"></script><link rel="stylesheet" href="./style/mint_style.cs...
2020-04-30 17:45:14
996
原创 微信点击后退直接关闭内置浏览器
<script> $(function () { // 需引入jq，不使用jq可使用document.ready onBackCloseWindow(); }); function onBackCloseWindow() { pushHistory(); window.addEventListener("pop...
2020-04-30 17:33:15
623
转载 移动端去除alert域名提示，禁止长按粘贴复制
去除alert域名提示：重写alertwindow.alert = function (name) { var iframe = document.createElement("IFRAME"); iframe.style.display = "none"; iframe.setAttribute("src", 'data:text/plain,'); docum...
2020-04-17 18:07:31
334
原创 前端设置、获取、删除cookie
设置cookie/** * [setCookie 设置 cookie] * @author Leo * @param {[type]} name [变量名，必选] * @param {[type]} value [变量值，必选] * @param {[type]} ...
2019-12-24 09:57:45
831
原创 el-table多选表格，勾选互斥选项功能实现
vue后台项目开发需求，要求勾选通道选项时，短信与彩信勾选为互斥关系（即勾选了短信，再勾选才彩信时，短信默认取消选中状态），其他选项可正常多选。html：<el-table border ref="multipleTable" size="mini" :data="allData.getDataDicUsing.channelList.channelTr...
2019-11-30 18:42:43
2132
原创 vue实际开发中几个实用技巧
1、长列表性能优化我们应该都知道vue会通过object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止vue劫持我们的数据呢？可以通过object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能...
2019-09-25 11:08:31
196
原创 vue后台中实现点击按钮，将文本内容复制到剪贴板
vue使用element-ui项目中实现点击按钮复制文本内容到剪贴板html代码：<el-button :disabled="!allData.getDataDicUsing.allowEdit" @click="copyTemplate(scope.$index, scope.row)" size="mini" type="text">复制</el...
2019-09-24 18:21:02
3064
原创 Vue中关于[__ob__:Observer]数据问题
【ob: Observer】=> 这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。操作数据的过程中不要删除这些属性：因为你已经将数据绑定在了vue之中，vue就肯定要为数据添加监控器的，如果你强制删掉了这些监控器，那么这些数据也就失去了监控，那么你使用vue的意义何在……提交数据时可以通过：JSON.parse(JSON.stringify(…)) 得到深拷贝的原始...
2019-09-02 13:30:15
12229
原创 vue项目中使用nprogress进度条
安装nprogress:npm install --save nprogress引入（以router.js为例）：import NProgress from "nprogress";import "nprogress/nprogress.css";全局路由守卫中监听页面的跳转：// 路由守卫router.beforeEach((to, from, next) => { ...
2019-07-19 14:48:55
591
原创 vue 使用 html2canvas 截屏并下载图片至本地（兼容ie）
安装html2canvas：npm install --save html2canvashtml： <div v-show="imageBoxShow" class="imageBox"> <div ref="imageBoxShow"> <h1>imagboxdddd</h1> <h1...
2019-07-19 14:05:07
1388
原创 vue项目中在可编辑div光标位置插入内容
html：<div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item" @dragstart="dragStart($event, item.labelName)" draggable='true' v-for="(item, index) in modelCommonList" :key="index" ...
2019-07-15 18:03:03
4420
2
原创 移动端1px边框问题
@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft {...
2019-07-11 18:21:37
117
原创 HTTP状态码304与ETag详解
状态码304相关头信息Last-Modified：响应头，表示当前资源的最后修改时间；If-Modified-Since：请求头，表示缓存的资源最后修改时间；状态码304：表示访问的资源没有改变客户端首次访问服务器的静态资源index.html，服务器会把index.html响应给客户端，而且还会添加一个名为Last-Modified的响应头，它说明了当前index.html的最后...
2019-07-11 17:58:36
1415
原创 vue中使用lodash.js
lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注于业务，lodash中文文档下载lodashcnpm i lodash -S引用，以节流throttle为例import throttle from 'lodash/throttle' // 局部引用import _ from "lodash" // 全局引用，下方的throttle...
2019-07-09 13:45:22
3727
原创 vue项目中解决谷歌浏览器默认填充账号密码问题
谷歌浏览器第一次登录保存账号密码之后，后续在碰到需要输入账号密码时，浏览器会默认填充账号密码。项目是vue + element-ui搭建的后台管理系统，不想要账号密码默认填充的效果该怎么办呢？直接上代码： <el-form-item label="账户用户名" :label-width="formLabelWidth" class="inputOnly labelMust"> ...
2019-07-05 14:11:22
6617
4
原创 手机与座机电话正则表达式
let phoneReg = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/.test(trimString(contactPhone));
2019-06-26 18:15:02
1108
原创 Vue中监听页面刷新与关闭
最近项目一个需求，在离开（跳转或者关闭）购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。将提交的异步操作放到 beforeDestroy 钩子函数中。beforeDestroy() { console.log('销毁组件'） this.finalCart()},但是发现 beforeDestroy 只能监听到页面间的跳转，无法监听到页面刷新和关闭标签页。...
2019-06-25 16:28:46
26932
2
原创 vue首屏性能优化，解决页面加载时间过长（白屏）方法
vuecli做了个spa项目，大概有几十个个路由直接 npm run build打包出来，有一个 1M的巨大 js文件，导致首页白屏时间过长分析工具vuecli 2.x自带了分析工具，只要运行 npm run build --report如果是 vuecli 3的话，先安装插件cnpm intall webpack-bundle-analyzer -–save-dev然后新建vue....
2019-06-21 10:23:54
25781
2
原创 vue-cli3实现移动端自适应
1、安装 flexible和 postcss-px2rem（命令行安装）npm i ib-flexible --savenpm i postcss-px2rem --saveflexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。例如在Galaxy S III:例如在iphone6/7/8:...
2019-06-19 17:44:58
4451
2
原创 element-ui中el-upload多文件一次性上传
项目需求是多个文件上传，在一次请求中完成，而ElementUI的上传组件是每个文件发一次上传请求，因此我们借助FormData的格式向后台传文件组html代码：<div class="upload-file"> <el-upload accept=".xlsx" ref="upload" multiple :limit="5...
2019-06-14 10:23:29
46964
38
原创 element-ui中el-upload上传音频文件获取音频时间长度
html代码： <el-upload id="audioUpload" class="avatar-uploader" :action="upLoadAudio" :show-file-list="true" :multiple="false" ...
2019-06-12 08:10:48
7405
2
原创 vue中slot插槽理解，2.6版本新用法
**slot 插槽 ，是用在组件中，向组件分发内容。**它的内容可以包含任何模板代码，包括HTML。vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效。在 2.6.0之前，插槽的用法：1. 匿名...
2019-06-05 17:24:37
3634
原创 vue项目在ie、360兼容模式页面显示空白问题
vue项目中，出现在ie与360兼容模式下打开页面呈现空白问题，如下：控制台报main.js中语法错误~上网搜了一下，大部分解决方案是在webpack配置中与main.js中引入babel-polyfill进行处理由于项目是使用webpack.config.js手动搭建，并未使用vue-cli脚手架，引入babel-polyfill之后在ie、360浏览器中仍然是显示空白。。。原因在...
2019-05-20 06:45:58
6508
原创 Linux上部署线上node环境
最近写一个全栈项目，后端用node+mongodb写的，需要上传到Linux服务器上，记录一下操作流程：安装Xshell/Xftp5/FlashFxp, 我这使用的是FlashFXP，具体用哪个看自己喜好~首先用FlashFXP连接上服务器右键打开 GIT Bash Here，连接服务器进行相关配置操作安装步骤你可以选择本地下载node.js，然后上传到服务器，也可以通过wget直接在服...
2019-05-09 22:34:41
219
原创 vue使用watch监听数据变化及watch中各属性介绍
1、watch使用的几种方法（1）通过watch监听data数据的变化，数据发生变化时，就会打印当前的值watch: { data(val, newval) { console.log(val) console.log(newval) }}（2）通过watch监听docData数据的变化，数据发生变化时，this.change_number...
2019-05-06 15:53:00
1351
原创 css实现上小三角形
三角形在页面布局中常常以拼接形式出现，如下图所示，那么如何用css写出三角形呢？.triangle-up { position: absolute; left: 50%; top: -10px; width: 0; height: 0; transform: translat...
2019-05-06 15:47:14
1353
原创 css消除button标签默认样式
.btn { margin: 0; padding: 0; border: 1px solid transparent; //自定义边框 outline: none; //消除默认点击蓝色边框效果}
2019-05-06 15:40:08
4438
原创 vue实现呼吸轮播图淡入淡出效果
不多说，直接上代码<template> <div class="hj-carousel" @mouseenter="stop" @mouseleave="go"> <transition-group name="list" tag="ul" ref="container"> <li v-for="(item, index) in ...
2019-04-27 22:04:13
3330
2
原创 router-link绑定点击事件失效
router-link 绑定事件不生效在vue中绑定事件是一下这种方法：v-on:click=‘函数名称’;@click = ‘函数名称’;这两种写法都是正常。但是我们使用了 vue-router 路由时会使用 标签来代替 a 标签跳转。我们在 vue-router 标签绑定 @click 事件 。<router-link to="/date" @click="nav_clic...
2019-04-27 21:57:15
1899
原创 CSS3新增定位属性sticky，粘性定位
position:stickysticky 英文字面意思是粘，粘贴。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。什么是结合两种定位功能于一体呢？元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素...
2019-04-05 15:51:17
1215
转载 webstorm上传gitlab、github
关于webstorm在Git上的使用：Git 版本控制工具，是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理。GitHub 一个网站，提供给用户创建git仓库，保存用户的一些数据文档或者代码等。Gitlab 基于Git的项目管理软件,是一个用于仓库管理系统的开源项目。使用Git作为代码管理工具，并在此基础上搭建起来的web服务。以上这些在使用的过程中都需要使...
2019-03-28 10:52:22
1258
原创 Node.js的__dirname，__filename，process.cwd()，./文件路径
简单说一下这几个路径的意思：__dirname： 获得当前执行文件所在目录的完整目录名__filename： 获得当前执行文件的带有完整绝对路径的文件名process.cwd()：获得当前执行node命令时候的文件夹目录名./： 文件所在目录先看一看我电脑当前的目录结构：syntax/ -nodejs/ -1.findLargest...
2019-03-24 21:51:55
332
转载 Express中 res.json 和res.end 及res.send()
今天对某个restful API 进行测试过程发现并发性能很差，吞吐率差了非常多。结果发现是res.end 误用的情况。参考：express 官方文档 http://www.expressjs.com.cn/4x/api.html#res现在总结下 express响应中用到常用三种API：res.send()res.json()res.end()环境测试环境：express 4.14...
2019-03-24 21:45:59
1021
原创 判断数组中是否存在某个对象
var arr=[{"appId":"3","appName":"慧管(西蓝花)"}, {"appId":"4","appName":"慧服务(西蓝花)"} ]var obj={"appId":"3","appName":"慧管(西蓝花)&quo
2019-03-16 11:32:39
2132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人