- 博客(109)
- 收藏
- 关注
RSS订阅
原创 vue 防抖 input 输入框 filter 过滤 数组数据
直接上代码：<el-input placeholder="地区" v-model.trim="searchValue" @input="throttle()" suffix-icon="el-icon-search"></el-input>// v-for="item in query(searchValue)"<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitie
2021-04-13 12:02:34
741
原创 vue 富文本编辑图片提取并定位图片src
<divv-if="goods.detail2Show"class="goods-detail-intro-content"@click="imgDetao($event)">{{ goods.detail2 }}</div>imgDetao(e) { // ImagePreview([item]); if (e.target.nodeName === "IMG") { console.log(">>&
2020-05-23 17:09:37
1505
原创 vue3中的对象时为proxy对象，如何获取值
vue3中的对象时为proxy对象，如何获取值使用vue3.0时，因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象，Proxy对象里边的[[Target]]才是真实的对象。第一种获取target值的方式：通过vue中的响应式对象可使用 toRaw() 方法获取原始对象//第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象import { toRaw } from '@vue/reactivity'
2022-03-30 19:01:36
21445
8
原创 vue3.0删除node_modules 无用的依赖
// 安装插件npm i depcheck//查看无用的插件npx depcheck// 对应删除npm uninstall kd-layout
2022-03-17 18:29:22
1613
原创 借助 Promise判断多张图片是否加载完成
var urls = ["https://sina-static.oss-cn-beijing.aliyuncs.com/images/slide/300250_1.jpeg", "https://sina-static.oss-cn-beijing.aliyuncs.com/images/slide/300250_2.jpeg"];let promiseAll = [], imgs = [], total = urls.length;for (let i = 0; i < total
2022-02-11 14:09:43
678
原创 使用async与await封装ajax请求
封装ajax 的es6升级版<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发送 AJAX 请求</title></head> <body&
2021-12-02 20:49:50
829
原创 h5 浏览器唤醒app 兼容版本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ho
2021-11-12 17:06:01
1527
原创 移动端调试工具两种方案
一：<script src="https://g.alicdn.com/code/lib/vConsole/3.3.4/vconsole.min.js"></script><script> console.log(new VConsole());</script>二：<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script>//<scr
2021-11-03 10:56:33
158
原创 JS设置Cookie过期时间
JS设置Cookie过期时间//设置cookiefunction setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}获取cookiefunction getCo
2021-10-28 20:48:27
1678
原创 用js来判断用户端浏览器方法
用js来判断用户端浏览器function getBrowserInfo(){ var ua = navigator.userAgent.toLocaleLowerCase(); var browserType=null; if (ua.match(/msie/) != null || ua.match(/trident/) != null) { browserType = "IE"; browserV
2021-10-28 11:14:01
214
原创 js判断页面是首次加载还是被刷新
两种方法；一：<script language="javascript"> window.addEventListener("beforeunload", function(event) { vm.slideId = Number(vm.slideId) + Number(1); if (vm.slideId > 3) { vm.slideId = 0; } setAccessToken('localLongNum
2021-10-14 20:42:50
320
原创 自己的vscode-settings.json配置
{ // 換行 "editor.wordWrap": "on", // 是否允许自定义的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默认启用了根据文件类型自动设置tabsize的选项 不檢查縮進，保存后統一按設置項來設置 "editor.detectIndentation": false, // 重新设定tabsize 代码缩进修改成4个空格 "editor.tabSize": 2, // #每次保存的
2021-09-06 11:12:13
1407
原创 vue倒计时：天时分秒
<p>倒计时：{{day}}天 {{hour}}：{{min}}：{{second}}</p>data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', second: '00', }},// 倒计时countTime () { // 获取当前时间 let date = new Date() l
2021-07-26 18:49:09
2065
原创 js实现四舍五入完全保留两位小数的方法
/** * js保留两位小数（不四舍五入） * @description formatDecimal */export function formatDecimal(num, decimal) { num = num.toString() let index = num.indexOf('.') if (index !== -1) { num = num.substring(0, decimal + index + 1) } else {
2021-07-26 11:37:54
443
原创 element 时间日期选择器限制选择范围为7天
template 部分 <el-date-picker v-model="time" style="width:350px" :type="dateType" size="small" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" :value-format="dateFormat" :picke
2021-07-16 10:18:19
1998
转载 JS提取任意两个数组的公共部分（超简单）
const intersection = (a, b) => { const s = new Set(b); return [...new Set(a)].filter(x => s.has(x));};intersection([1, 2, 3], [4, 3, 2]); // [2, 3]
2021-07-15 14:03:26
1303
转载 10 个 GitHub 上超火的 CSS 技巧项目，找到写 CSS 的灵感！
https://github.com/FrontEndGitHub/FrontEndGitHub/issues/710 个 GitHub 上超火的 CSS 技巧项目，找到写 CSS 的灵感！
2021-07-06 18:15:19
176
原创 js 数字 转换 百 千 万 亿显示
js 数字 转换 百 千 万 亿显示var changeUnit = function(value) { let newValue = ['', '', '']; let fr = 1000; const ad = 1; let num = 3; const fm = 1; while (value / fr >= 1) { fr *= 10;
2021-06-29 20:10:33
1047
原创 vue实时监听屏幕body 的宽度变化
mounted(){ window.onresize = function () { //监听屏幕的改变 setTimeout(function () { that.refresh(); }, 10) };}methods: { refresh() { let devicewidth = document.documentElement.clientWidth; console.log(devicewidth); // i
2021-06-23 16:06:10
849
原创 Vue element-ui table组件只展开一行(手风琴效果)
<template> <div class="app-content"> <div class="table_expand_item"> <b>element-ui table只展开一行demo</b> <el-table :data="tableData" :row-key="getRowKeys" :expand-row-keys="exp.
2021-06-16 13:58:07
833
原创 Elementui select 设置点击事件，在Change事件前触发
Elementui select 设置点击事件，在Change事件前触发 <el-select v-model="list.userJumpId" clearable placeholder="请选择二跳页名称/ID" style="width: 250px" :disabled="userJumpNameDisabled" @click.native="clickUserJumpIdState" @change="userJumpChan
2021-06-03 16:51:35
3029
原创 js保留两位小数（不四舍五入）
js保留两位小数（不四舍五入）function formatDecimal(num, decimal) { num = num.toString() let index = num.indexOf('.') if (index !== -1) { num = num.substring(0, decimal + index + 1) } else { num = num.substring(0) } return parseFl
2021-06-03 15:29:07
560
原创 js 时分秒与秒数的转换
1. 时间戳 格式化为 时分秒（00:00:00）/** * 时间秒数格式化 * @param s 时间戳（单位：秒） * @returns {*} 格式化后的时分秒 */ var sec_to_time = function(s) { var t; if(s > -1){ var hour = Math.floor(s/3600); var min = Math.floo
2021-05-27 21:48:25
1566
原创 设置localStorage的过期时间
设置 localStorage 的过期时间判断function setLocalStorage(key, value) { var curtime = new Date().getTime(); // 获取当前时间 ，转换成JSON字符串序列 var valueDate = JSON.stringify({ val: value, timer: curtime }); try { localStorage.setItem(ke
2021-05-27 17:07:43
508
原创 vue 强制刷新组件
困扰我的问题。也是到网上看到解决方案。分享出来使用vue进行开发时，如果要刷新当前路由，则调用router.go(0)方法即可。但是某些情况下，我们可能要求仅仅刷新某个组件，而不是路由1.使用this.$forceUpdate强制重新渲染如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件，从而达到更新目的。<template><button @click="reload()">刷新当前组件</button><
2021-05-26 11:52:40
154
原创 js改变数组的两个元素的位子，互换、置顶
//js数组的元素上移和下移动var fieldData=[ {name:'id',value:'ID'} , {name:'username',value:'用户名'} , {name:'email',value:'邮箱'} , {name:'sex',value:'性别'} , {name:'city',value:'城市'} , {name:'sign',value:'签名'} , {name:'experience',val
2021-04-27 12:05:11
1790
原创 element table 拖拽排序问题
需要引用sortablejs GitHub地址//安装sortable.jsInstall with NPM:$ npm install sortablejs --save//在组件内引入import Sortable from 'sortablejs'//为需要拖拽排序的表格添加ref属性<el-table ref="dragTable">//在数据渲染完毕添加拖拽事件created(){ this.layerAddQuick()},async lay.
2021-04-21 17:16:47
221
原创 es6 [“1“,“2“,“3“]转换成[1,2,3]
let nameList = ["1","2","3"]nameList.map(Number)小炒面
2021-04-14 18:08:25
320
原创 vue+elementUI动态表头表数据循环遍历动态展示
查了一些资料。终于解决了这个问题。直接上代码// table 里面直接<el-table :data="tableData" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 1)" :header-cel
2021-04-11 18:58:34
910
原创 es6获取数组A对应的数组B的属性值
在开发element table 处理数据的过程中碰到了这个问题。就顺便记录下来。思路：通过数组A 获取数组B的对应其他属性值,情景如下.关键方法有: map() 和 findIndex(); map()直接遍历更新对象,findIndex返回符合条件的索引值话不多说，直接上代码： let AopnoIdList=["14","15"] let aopnoList = [{ "label": "全部", "value": "" }, { "label":
2021-04-11 18:55:17
955
原创 在elementUI中使用el-time-picker，如何只显示时分，还有怎么设置时间范围？
在elementUI中使用el-time-picker，如何只显示时分，并添加范围校验？直接上代码<el-time-picker v-model="dataList.startTime" format='HH:mm' 设置下拉框时间格式 value-format="HH:mm" 设置返回值时间格式 :picker-options="{ 校验开始时间不得大于结束时间或最大时间值 selectableRange:`00:00
2021-03-18 16:47:59
8336
3
原创 element-ui table 表格组件实现可拖拽效果（行、列）
1、首先，需要执行npm install sortablejs --save-dev 安装sortable.js2、在页面内引入<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in
2021-03-16 15:20:44
747
原创 element UI 对导航el-menu 样式的修改
**element UI 对导航el-menu 样式的修改**.el-menu--horizontal > .el-submenu .el-submenu__title,.el-menu--horizontal > .el-submenu.is-active .el-submenu__title,.el-submenu__title i { color: #fff;}.el-menu--horizontal > .el-submenu.is-active .el-subme
2021-03-08 10:12:50
13065
4
原创 echarts折线图个性化填充、线条、拐点样式以及hover样式
具体设置：//基本样式itemStyle : { normal : { lineStyle:{ width:2,//折线宽度 color:"#FF0000"//折线颜色 } }},//hover样式emphasis: { // 鼠标hover上去的时候，拐点的颜色和样式 itemStyle: { color: '#fff', //颜色 borderColor: '#00.
2021-02-26 16:05:37
3636
原创 封装本地缓存加过期时间
var oldDate = new Date(); var dateOver = new Date( oldDate.getFullYear(), oldDate.getMonth(), oldDate.getDate() ).getTime() + 1000 * 60 * 60 * 24; //次日凌晨清楚数据// local缓存// var date = new Date()..
2021-02-09 15:15:06
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人