- 博客(33)
- 收藏
- 关注
RSS订阅原创 Electron(v26.2.1)无法加载React Developer Tools(v4.28.0)
Electron(v26.2.1)无法加载React Developer Tools(v4.28.0)
2023-09-15 16:54:57
691
原创 解决click和dblclick事件的冲突
问题描述一个dom上同时绑定了click事件和dblclick事件，click事件可以正常使用，但是dblclick事件在执行时会先执行click事件，导致dblclick事件不能按照预想的方式执行解决方案在网上看了一些文章，都提到一种：延时执行click事件，延时250ms效果好点<div onclick="clickHandle()" ondblclick="dblclickHandle()">这是一句话</div>const timeId = null// 单击事
2021-06-15 18:37:03
1167
3
原创 js 格式化时间
/** * 获取年月日 时分秒 * @param {string | number} time 时间字符串 | 时间戳 * @returns { year, month, date, hours, minutes, seconds } */function getDate (time) { const date = new Date(time) const y = date.getFullYear() const M = date.getMonth() + 1 const MM =
2021-06-09 10:22:58
458
原创 Cesium 基础
Cesium 基础温馨提示：以下皆是部分介绍，地图为2D模式，其他详情请参考cesium 中文文档一、vue-cli3+搭建cesium下载安装cesium包npm install cesium在入口文件main.js中引入const cesium = require('cesium/Cesium')const widgets = require('cesium/Widgets/widgets.css') Vue.prototype.cesium = cesiumVue.pr
2021-02-26 16:59:36
1236
1
原创 自定义标签title显示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #app{ width: 300px; margin: 200px auto; text-align: center; backgrou
2021-02-05 11:14:39
180
原创 element-ui 表格切换页码时，保存上一页的复选框的选中状态
1、在使用 vue + element-ui 开发后台管理类型的页面时，有这样一个需求表格每一行添加复选框，可以被选择切换页码时，要保存上一页的复选框的选中状态2、通过代码实现给表格的某一列添加 type=“selection”，这一列就添加了复选框<el-table-column type="selection" width="55" align="center"></el-table-column>有了复选框，我们需要获取用户选择了哪些行数据，给表格添加两个事件
2021-01-21 15:13:38
1345
转载 vue 启动项目时动态切换 ip
一般我们在开发的过程中，根据部署的环境不同可能会使用多个ip，这时候就需要到配置文件中更改ip，然后重启项目，但是这样做会有点麻烦，不仅要修改配置文件，还需要重启项目。如果能够在启动项目时根据不同的命令切换不同的ip，那岂不是很舒服。1、初始化一个项目（我是使用的 vue-cli3）2、新建 src/config/env.json，执行 npm run serve，查看 env.json 中的变化，会发现多了点内容3、在项目根节点（和 package.json 同级）新建 vue.config.j
2021-01-18 13:31:03
1684
2
原创 element-ui 单元格可编辑
element-ui 单元格可编辑一、在使用 element-ui 时，一般都会用到表格组件，在使用过程中，有可能会遇到一种需求：双击任意单元格进行编辑二、我的实现思路是这样： 1、双击后单元格后，单元格能够输入内容 2、获取输入的内容，更新该单元格对应的数据三、具体实现1、让单元格更够输入，第一时间肯定想到的是输入框，其实还有一个 html 标签也能实现输入功能，就是我们最常见的 div，不过需要手动设置一个属性，即：<div contenteditable="true">&
2020-12-22 16:25:35
1175
2
原创 js 在光标处插入内容
开发过程中，有时会遇到这种需求，在光标处插入内容，这时就需要两个操作：1、获取光标位置2、在光标处插入内容假如有一个文本域、一个下拉框，要求把下拉框选中的值插入到文本域中的指定位置<el-input id="textarea" type="textarea" :autosize="{ minRows: 2}" v-model="form.content" placeholder="请输入" clearable @input="input"></el-input>
2020-12-17 14:12:20
2179
1
原创 resetFields 无法重置的问题
1、问题分析：vue + element-ui使用 dialog + form 进行编辑和新增，编辑和新增共用该 dialog + form 组件，如果先点击编辑再点击新增，会出现表单无法重置的情况，使用 this.$refs[‘form’].resetFields() 无效2、解决2.1、其实在 data 中定义的 form 表单字段是表单的初始值，在 mounted 中会调用 resetFields 方法，该方法会保存 form 表单的初始值，在调用该方法时会将初始值重新赋值给 form 表单字
2020-12-01 11:55:06
1258
转载 vue 监听dom元素的宽高变化
1、准备一个插件npm install element-resize-detector2、使用monted(){ // 直接导入使用，也可以在main.js中引入 var elementResizeDetectorMaker = require("element-resize-detector") // 创建实例，无参数 var erd = elementResizeDetectorMaker(); // 创建实例带参数 var erdUltraFast = elementResizeD
2020-11-02 18:09:31
3739
3
原创 数组去重
数组去重1、使用 Setlet arr = [1, 3, 3, 4, 4, 4, 4, true, true, false, false]let res = [...new Set(arr)]console.log(res) // [ 1, 3, 4, true, false ]// 内部有复杂数据类型，不能去重let arr = [1, 3, 3, 4, 4, { a: 1, b: 2 }, { a: 1, b: 2 }]let res = [...new Set(arr)]conso
2020-10-22 09:54:40
94
原创 JS数组扁平化
数组扁平化1、Array.prototype.flat()num: 可选参数，展开嵌套层数，默认是 1let ary = [1, 2, 3, [4, 5]]console.log(ary.flat()) // [ 1, 2, 3, 4, 5 ]let ary1 = [1, 2, 3, [4, 5, [6, 7]]]console.log(ary1.flat()) // [ 1, 2, 3, 4, 5, [ 6, 7 ] ]let ary2 = [1, 2, 3, [4, 5, [6
2020-10-21 17:58:43
118
2
原创 点击文字选中单选按钮
点击文字选中单选按钮直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
2020-09-25 16:19:35
309
原创 高德地图
高德地图 – 相关配置1、驾车路线let drivingOption = { policy: AMap.DrivingPolicy.LEAST_TIME, // 驾车策略：具体请查看 -- https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy province: "浙", // 车牌省份的汉字缩写}// 构造路线导航类let driving = new AMap.Driving(driv
2020-09-18 16:15:02
638
原创 移动端 tab 页切换
移动端 tab 页切换html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <script src="./j
2020-09-16 08:53:12
543
原创 vue 打包添加版本号
vue 打包添加版本号1、在文件名后拼接版本号vue在打包时会用随机字符串作为文件名，控制静态资源及时更新，但是有些时候，浏览器就是不更新，可以在引入静态资源后面再添加版本号。vue-cli 2.0 版本修改 build/webpack.prod.conf.js，在 HtmlWebpackPlugin 插件配置项中添加 hash: truenew HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.
2020-09-08 17:08:09
5169
原创 vue 中 v-for 常用的两种方式
vue 中 v-for 常用的两种方式1、遍历对象准备一组数据// 准备一个对象const obj = { name: '小明', age: 18}通过 v-for 渲染到页面中<div v-for="(value,key,index) in obj" :key="index">{{key}}: {{value}}</div><!-- 其中 value：值 key: 键 index: 角标 -->在页面中显示的是：name: 小明
2020-09-05 18:33:25
332
1
原创 Promise 异步查询转同步形式
Promise 异步查询转同步形式1、一般在调用数据接口时会使用这种形式，因为 async 和 await 配合 Promise 可以将异步函数转成同步函数执行的形式，使得思路更加清晰，也容易避免产生回调地狱。async 要修饰一个函数，await 要在这个函数里，await 修饰的是 Promiseasync function(){ await Promise || 一个返回 Promise 的函数}创建一个 Promiseconst promise = new Promise((r
2020-08-27 16:08:09
568
原创 js 获取随机数
js 获取随机数1、0 - 1之间的随机数let random = Math.random()2、1 - 10之间的随机数let random = Math.floor(Math.random() * 10) + 13、两个数之间的随机数//假设有两个数 a < blet random = a + Math.random() * (b - a)...
2020-08-17 20:50:27
464
原创 总结
http协议特点：简单快速，灵活，无连接，无状态请求报文（头、行、体），响应报文（头、行、体）请求方法：get，post，put，delete状态码：200（成功），301（永久重定向），302（临时重定向），400（请求参数错误），401（无权限），403（禁止访问），404（找不到资源），500（服务器端错误）get请求get请求会主动缓存，回退不会再次发请求，post回退会再次发送请求jQuery解决get请求缓存：在 $.ajax({}) 中加个选项（cache: fals
2020-08-13 10:31:23
213
原创 vue-cli3 PC端适配
vue-cli3 PC端适配1、首先安装两个插件：postcss-px2rem，amfe-flexiblenpm i postcss-px2rem -Snpm i amfe-flexible -S2、配置postcss-px2rem，跟 package.json 同级 创建一个文件 .postcssrc.jsmodule.exports = { plugins: { autoprefixer: {}, 'postcss-px2rem': { remUnit:
2020-08-12 19:27:42
907
原创 Echarts 相关配置
Echarts 相关配置折线图（堆叠折线图）1、图标的位置legend: { //right: 0, //图标靠右侧 //bottom: 0, // 图标靠左侧 data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']},图标默认在顶部中间2、x轴数据格式xAxis : [ { type : 'category', boundaryGap : false, data : data,//['周一','周二','周三','
2020-08-11 09:28:44
187
原创 element-ui相关配置
element-ui相关配置表格1、修改表格的 hover 样式.el-table /deep/ .el-table__body tr:hover>td { background-color: #dcecf9 !important;}/* 加!important 可以修改树状表格子节点的hover样式 */2、固定表头（跟element-ui自带的有点区别）.el-table /deep/ .el-table__body-wrapper { height: calc(10
2020-08-11 09:20:27
443
原创 js 年月日排序
js 年月日排序假定有一组这样的数据，需要根据 creatTime 排序let ary = [ { name: 'k1', creatTime: '20218-8-8'}, { name: 'k2', creatTime: '2019-7-9'}, { name: 'k3', creatTime: '2018-10-1'}, { name: 'k4', creatTime: '2020-8-3'}]准备一个排序函数：function sort(a, b){
2020-08-03 19:32:38
2212
2
原创 js 上传图片并预览
上传图片并预览先准备必要的 dom 元素html：<div id="box"> <div id="img-box"> <input type="file" id="img-file" onchange="uploadImg(this)"> </div></div>接下来是通过 js 实现上传js：// 封装一个获取dom的函数function $(id) { return document.getElementB
2020-07-30 22:25:43
181
原创 HTMLCollection 无法遍历
HTMLCollection 无法遍历今天使用vant的输入框时，原本是想动态改变这个输入框右边图标的默认样式，可是在获取到对应的元素时，遇到了问题。通过 document.getElementsByClassName(‘van-icon-cross’) 得到了 HTMLCollection 对象，并在控制台打印了出来，是显示有元素的，没问题。但是通过 HTMLCollection.item(0) 却无法获取里面的元素，而且这个HTMLCollection 对象无法遍历。document.get
2020-05-22 23:52:40
5916
4
原创 vue-cli3.0 引入layui
vue-cli3.0 引入layui1、官网下载layui：layui2、在public/index.html中引入注意：下载的layui应该放在public文件夹下代码： <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"> <script type="text/javascript...
2020-04-11 02:48:08
2530
原创 js关闭当前窗口、标签页
js关闭当前窗口、标签页1、通过a标签<a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭当前窗口</a>2、通过按钮<body> <button id="btn">关闭当前窗口</button></b...
2020-04-04 22:18:05
9182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人