- 博客(120)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 flex实现百分比布局
html:<div class="item-info"> <div class="item item-60"></div> <div class="item"></div> <div class="item"></div></div>sass:.item-info{display:flex;.item{flex:1&.item-60{flex:60% 0 0;}}}
2022-02-18 16:53:12
1523
转载 el-input输入值设置最大值、最小值问题
如果使用max、min属性，则必须同时加上与type=“number”。设置type="number"样式，输入框尾部会出现一个上下箭头，min和max只能控制用箭头输入的最大值最小值，对键盘打字输入是限制不住的。如果需要限制input输入的值，最实用的做法是给input绑定一个change事件，在change事件中用正则判断。这里会涉及到一个type=”number”同时正则判定，对"e"失效的问题。（要看怎么理解失效）,可以同时watch一下el-input绑定的model设置了type=”num
2021-10-22 15:19:38
22937
3
原创 ES12到ES6
ES12(2021)1、replaceAll所有符合规则的字符都将被替换掉const str = 'hello world'str.replaceAll('l','')//'heo world'2、Promise.anyPromise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promiseconst
2021-10-14 17:01:30
457
原创 yarn如何配置离线镜像
1、配置是离线镜像缓存文件夹的位置yarn config set yarn-offline-mirror ./npm-packages-offline-cache2、帮助清理所有未链接的依赖项(可以不设置)。yarn config set yarn-offline-mirror-pruning true3、上面设置将创建~/.yarnrc，如果不是全局设置，而是仅当前项目要设置，则需要移动该文件到当前项目目录中：mv ~/.yarnrc .注意后面有个点4、删除之前的node_modu
2021-10-08 11:03:25
2216
原创 localeCompare实现中文排序
定义：用本地特定的顺序来比较两个字符串。语法：stringObject.localeCompare(target)参数：target——要以本地特定的顺序与 stringObject 进行比较的字符串。返回值：说明比较结果的数字。（1）如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。（2）如果 stringObject 大于 target，则该方法返回大于 0 的数。（3）如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。
2021-09-13 14:39:50
731
原创 webpack4实现热更新
webpack4.41.4const webpack = require('webpack')module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true }}
2020-12-24 11:42:43
234
1
原创 document.documentElement.clientHeight 与 document.body.clientHeight
document.documentElement.clientHeight 与 document.body.clientHeight这两个是有区别的，前一个是html标签，后一个是body标签。这两个是不同的东西，如果这两个的值返回相同的值，应该是设置了 body,html{ height: 100%}...
2020-12-18 10:01:45
440
原创 vue实现图片预加载实操
业务场景是这样的：在页面里有一个提醒文案，提醒文案里有个按钮，点击按钮会弹出示例弹窗，弹窗里上面有标题，中间一个比较大的图片，27kb；下面有个按钮。在苹果手机使用微信打开时，上面的标题和下面的按钮都先于图片加载出来。中间的按钮过了一会才渲染出来。为此，我也懒得去找ui沟通能不能把图片弄小一点，正好试试图片预加载这个功能。于是，在网上搜索到1、实例化Image对象，添加src为需要预加载的图片路径function preloadImg(url) { var img = new Image()
2020-12-17 16:51:44
1969
1
原创 elementui实现单元格滚动条
实现某一单元格有滚动条 <el-table-column prop="disclosureAbstract" label="文章摘要" min-width="180"> <template slot-scope="scope"> <div style="max-height:70px;overflow-y:auto;">
2020-11-09 17:16:25
1215
原创 iphone上使用iframe时页面宽度变大的解决方法
场景是这样的，业务需要展示协议，我们公司所有产品的多个地方都有展示协议的需要，于是，我们就封装了一个组件，一个iframe里读取从后管获取的协议页面。起初，协议页面没有设置上下左右边距，ios的页面和安卓的页面还是没有什么区别的。后来业务提了新需求，美化了一下页面，在协议页面上下左右加了边距，于是就出现了ios整体页面宽度大于屏幕宽度的bug，页面出现横向滚动条，协议内容部分被遮盖，需要用户手动拉一下滚动条才能看全协议内容。网上查了ios使用iframe时有个bug:页面宽度会扩大，超出一个屏幕的宽度。
2020-10-21 10:57:46
1280
原创 elementui里input type=“textarea“无法输入及提示校验信息
场景1:是这样的，input 写在el-dialog里面，根据另一个字段决定要不要显示这个input。新增和修改用的都是这个dialog。新增的时候input框输入后没有提示校验信息；但是，修改的时候，如果修改的是让另一个字段使得这个input从隐藏改成显示，然后在这个input里输入值后，不会在input框里显示值，但是查看data里是有值的。原因：出现这种情况时因为视图没有更新。解决办法：网上说的解决办法有添加@input事件。我按照要求添加了@input事件后，然后强制更新this.$forceU
2020-09-18 11:12:14
5288
原创 js遍历数组三种方式对比利弊
js遍历数组有几种方式:for，forEach(es5),for of (es6)for循环略显臃肿；forEach不臃肿，但是，不能用break中断，也不能用return语句跳出去;for of 弥补forEach的不足，还可以遍历字符串；遍历类数组；支持Map,Set对象的遍历...
2020-08-31 19:39:11
340
原创 路由跳转时的参数传递
1.params传递：this.$router.push({ name:'路由名字', params:{ id:'1234' }})获取：this.$route.params.id2.path传递：this.$router.push({ path:'mypathUrl'+id })获取：this.$route.params.id需要在路由表中做相应的配置:{ path:'mypathUrl/:id'}3.query这种方式会在url地址中出现参数
2020-08-31 19:37:31
619
原创 element-ui弹窗清除提示信息
业务情景是这样的：需要在弹窗里填写表单，弹窗提交数据后再次打开时会自动校验，导致弹出一些提示信息。不过，这些字段还没填写，业务上最好是不要出现这些提示信息。所以，需要在再次打开的时候清除提示信息。 add(){ this.operation = 'add'; this.dialogVisible = true; this.$nextTick(() => { this.$refs.form.resetFields(); })
2020-07-22 17:05:39
1957
原创 vue之v-for遍历
vue可以遍历数字，数组，对象数组，对象,字符串，2.6之后可以遍历Iterable ，包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。<div id="example"> <!--循环数字--> <span v-for="count in 5" :key="index">{{count}}</span> <!--循环
2020-07-14 14:40:02
1068
原创 手写swiper组件基本原理
主要使用touchstart,touchmove，touchend事件touchstart时记录用户触摸点的x,y坐标，存入数组[x,y]，将slide Container的transition设置为0s（默认有transition: all 0s ease 0s）touchmove事件也会进行触摸位置移动，触摸的距离len为用触摸点的x坐标e.touches[0].clientX减去touchstart时记录的数组里的x坐标.(得出的len为负值)移动的位置为：负的slide container
2020-07-14 11:24:50
1907
原创 总结javascript中的遍历
(1)for…in可用范围：字符串，数组，对象不可用范围：Map,Set返回：字符串和数组返回下标，对象返回属性名称缺点：无法保证属性的顺序for(let i in 'good'){ console.log(i);//0,1,2}for(let j in ['a','b','c']){ console.log(j);//0,1,2}for(let k in { a:"0",b:"1"}){ console.log(k);//a,b}for (let prop in new
2020-07-05 10:54:41
216
原创 由vue遍历对象引发对深度拷贝的思考
项目中用v-for遍历一个对象{ count:"",age:""}进行参数渲染，输入参数后送到后端要转化为JSON字符串，于是提交之前新声明了一个对象，值为原先对象的JSON.stringify字符串。但是，问题来了，后端接口还没部署上去，调用的时候是502,接口调用不成功不会走剩下的流程。此时，数据已经改动为JSON字符串了，v-for遍历的对象改成JSON字符串“{“count”:“bb”,“age”:“ff”}”。于是遍历时就以字符串的形式进行渲染，出现如下图所示的参数渲染。那么，如何避免出现这
2020-07-02 09:10:40
1228
原创 对element-ui的label和el-tooltip同时使用插槽
我们看element-ui官网可以发现el-tooltip可以使用slot=“content”这个具名插槽来自定义想显示的文案如果想要在标签上显示这个el-tooltip的话，就必须让标签也有个插槽，在这个插槽里插入el-tooltip这个节点。 <el-form-item prop="runKey"> <template slot="label"> <span style="positi
2020-06-30 11:33:26
5879
3
原创 ios微信软键盘之殇
先说一下业务场景。界面有弹窗，在弹窗内输入时，弹出软键盘输入短信验证码。验证成功后隐藏弹窗，弹出有复制按钮的弹窗。点击复制按钮，复制相关内容。在开发这个功能的时候，有两个渠道，一个是支付宝h5,一个是微信h5。结果是微信IOS端出现了bug，弹出有复制按钮的弹窗后，点击复制按钮没有任何反应。于是，我这个比较直的人就一直点，点点点，并且进行了计数，一开始，发现大概点了有一分钟后，界面没有卡了，点击复制按钮成功复制到了内容。我首先想到的是复制插件是不是有问题，查看了复制插件的源码，发现复制插件并没有设置什
2020-06-21 21:55:03
381
原创 用vue写npm插件
一、调用插件通过全局方法Vue.use()使用插件，必须在new Vue()启动之前使用这个方法。main.jsimport cyui from 'cyui';Vue.use(cyui);new Vue({});还可以传入可选的配置对象：Vue.use(cyui,{ someOptions:true });那么，平时，我们这样调用的插件究竟是怎么写出来的呢？二、开发插件官方...
2020-03-22 11:14:38
438
转载 Vue-loader.conf.js
'use strict'// 工具=> build/util.jsconst utils = require('./utils')// 配置=> build/config/index.jsconst config = require('../config')const isProduction = process.env.NODE_ENV === 'production'...
2019-06-26 15:23:02
403
原创 使用vue-loader不必require图片
以前在写vue的时候，经常要写这样的代码，把图片提前require给一个变量，然后再把变量传给组件(注意是组件，不是原生的东西,不是原生如img)：<template> <div> <avatar :default-src="logoUrl"></avatar> </div></template><scr...
2019-06-26 15:17:53
1672
原创 yarn install报网络问题
yarn install的时候老是有一个包没有下载下来，然后就报网络问题了。这其实不是网络问题，实际上是这个包太大,yarn太久没下载下来就直接报网络错误了。There appears to be trouble with your network connection. Retrying…...
2019-05-10 15:31:54
5048
转载 react类中自动绑定
我们可以在类中通过使用ES6增加的箭头函数的方式来实现隐形绑定作用域。而按照之前的处理，我们需要显式的去为我们写的方法进行绑定，类似于 this.myMethod = this.myMethod.bind(this)这样。当我们的类中有很多方法时，会增加大量的绑定的代码的书写。现在我们就可以通过箭头函数的方式来简化这个过程。import React, { Component } from Rea...
2019-04-30 16:00:18
281
原创 javascript的同步异步操作
数组是引用类型，console.log是异步操作，console.log在前面而对数组的操作是在后面时，console.log打印出来的数组可能是被操作之后的数组。为了避免这样的情况发生，必须对数组进行深拷贝。...
2019-04-24 19:20:14
345
原创 详解：为什么在keep-alive组件中使用computed计算属性数据没有变更？
第一步：computed在生命周期的哪个阶段执行？（1）在new Vue（）的时候，vue\src\core\instance\index.js里面的_init()初始化各个功能function Vue (options) {if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) { ...
2019-04-11 10:40:50
2105
原创 Invalid configuration object. Webpack has been initialised using a configuration object that does no
webpack配置报错描述: 一般遇到这个错误，说明你编写的代码语法与本地安装的webpack版本不兼容。原因是项目要用到px转换为rem，使用postcss-px2rem这个插件的时候，0.3.0版本的配置如下：var px2rem = require('postcss-px2rem');module.exports = { module: { loaders: [ ...
2019-02-26 18:05:46
7111
原创 小程序VM144:1 request:fail url not in domain list
可能原因：域名未完成备案url里有端口（可以有端口存在）报错提示说请求的url不在域名列表里，应该是还没有配置服务器域名，可点击开发者工具右上角 详情-域名信息，看看是否配置了域名；详情->项目设置->不校验合法域名...
2019-02-22 10:11:14
7082
翻译 禁止iphone上input[type='text']自动放大
如果font-size小于16px,浏览器将自动放大，然而，元素的默认font-size是11px(至少在chrome和safari).所以设置元素的样式至少为16px就不会产生放大效果。另，select元素必须附加focus伪类：input[type=&quot;color&quot;],input[type=&quot;date&quot;],input[type=&quot;datetime&quot
2019-01-24 09:59:14
2252
转载 image-compressors前端图片压缩工具
image-compressorscompressorSettings.toWidth：结果（压缩/拉伸）图像的宽度（以像素为单位），默认值：100。compressorSettings.toHeight：结果（压缩/拉伸）图像的Mime类型，允许值image / png，image / jpeg，默认值：“image / png”compressorSettings.quality:结果压...
2019-01-23 18:17:40
1379
原创 Vue样式scoped存在的问题
为了解决css存在的一大痛点：天生全局性，每个通过 vue-cli 创建的 Vue.js 应用都内置了两个很好的解决方案：Scoped CSS 和 CSS Modules (模块式 CSS)。现在我们只介绍Scoped CSS.我们只需在&lt;style&gt;标签上添加scoped属性就可以让样式只应用到该组件的元素上。&lt;template&gt; &lt;button class...
2018-11-30 15:26:17
666
翻译 用js创建一个可拖曳的元素
我们一直使用并且理所当然的常见手势是能够在屏幕上拖动元素。尽管这种拖拽手势有多么常见，但是没有很好的内置支持来使网络上的元素可拖动。如果我们希望超越鼠标并支持触摸之类的东西，那就更是如此！这就是本教程的用武之地。在接下来的几节中，我们将介绍一个纯粹的基于JavaScript的解决方案（也就是没有jQuery），它允许您将任何无聊的元素转换为可以在页面上拖动的元素。继续~1.例子原文链接2....
2018-10-23 18:01:42
1337
原创 异步调用三部曲
一、回调地狱 getMoreData(a,b =&gt; { getMoreData(b,c =&gt; { getMoreData(c,d =&gt; { getMoreData(d,e =&gt; { console.log('e'); }) }) }) })})二、Promise改进回调地狱.then(a =&gt; getMor...
2018-10-08 15:06:44
260
转载 wx.getLocalImagData接口的使用时需要注意的点
这篇主要讲到wx.getLocalImagData接口的使用时需要注意的点。wx.getLocalImgData({localId: '', // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示}});该接口获取到的是图片的数据...
2018-10-08 11:35:40
791
原创 javascript格式化数字成K,M等格式
数字格式化成K,M等格式 function nFormatter(num, digits) { const si = [ { value: 1, symbol: "" }, { value: 1E3, symbol: "K" }, { value...
2018-10-07 20:39:36
7377
原创 vue2自定义指令directive
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。官网1.分类 =&amp;gt; 全局 、局部自定义指令有全局指令和局部自定义指令// 注册一个全局自定义指令 `v-focus`Vue.directive...
2018-10-07 16:43:32
900
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人