- 博客(60)
- 收藏
- 关注
RSS订阅原创 uniapp api整理
1.获取屏幕信息：wx.getSystemInfo 屏幕高度，信号栏高度，窗口高度（右上角胶囊以下高度）wx.getSystemInfo({success(res){}}；2.wx.getMenuButtonBoundingClientRect()可以获取到右上角胶囊的布局位置信息 这里的top和bottom是胶囊到屏幕上边沿的距离，需要用wx.getSystemInfo获取信号栏高度，差值相当于标题栏的padding,标题栏高度=（top-信号栏高度）*2+胶囊高度...
2021-06-29 16:51:27
232
原创 transform:translate rotate scale skew perspective
//transform:none | transform-functions//transform-functions://1.transtrate(x,y) x,y轴水平移动 2.rotate(数值deg)定义旋转 3.translate3D(x,y,z) 定义3D转换 4.skew(x,y) 2D倾斜变化 沿圆心图形旋转例如skew(-20deg,y)正方形就变成菱形 4.scale(x,y)定义2D缩放 以中心开始向四周变化，宽高各增加多少倍 5.perspect
2021-06-29 14:56:13
90
原创 transition过渡
<!-- * @Descripttion: * @version: * @Author: wangLei * @Date: 2021-06-28 11:17:41 * @LastEditors: wangLei * @LastEditTime: 2021-06-29 09:58:01--><template> <div> <!-- 1.transition-duration：过渡所需时间，所有状态改变都
2021-06-29 10:50:52
115
原创 rem和media适配
1.media scss rem自适应适配：1.1：定义：根据不同屏幕尺寸动态改变页面样式;rem实质上是一个相对单位，我们做的时候只需根据设计稿做媒体查询，规定不同屏幕范围html字体大小，在实际元素尺寸上用实际尺寸/设计稿对应尺寸的html字体大小，得到相对大小，浏览器会*html字体大小得到实际尺寸；例如：750px设计稿，划分15等分就是50px html字体大小就是750/15=50px,div宽度100px就是100rem/50=2rem,750就是15rem,div的宽度在任何尺寸下只
2021-06-28 10:23:02
369
原创 overflow形成bfc模式格式化上下文在绝对定位，防止垂直边距重叠，防止float浮动元素覆盖，三栏布局左右固定宽度中间自适应中的运用
本质上是形成独立区域，不管其他元素什么布局互不影响<!-- * @Descripttion: * @version: * @Author: wangLei * @Date: 2021-06-17 09:38:01 * @LastEditors: * @LastEditTime: 2021-06-17 16:00:32--><template><!--1. absolute脱离文档流 bfc模式独占一行--> <!-- <div c
2021-06-17 16:06:04
112
原创 vue实现云打印功能
1.js工具文件：// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) {if (!(this instanceof Print)) return new Print(dom, options);this.options = this.extend({‘noPrint’: ‘.no-print’}, options);if ((typeof dom) === “string”) {this.dom =
2021-06-04 14:40:25
596
4
原创 vue element上传图片之后对图片支持缩放和裁剪
使用工具：vue element ImgCutter 功能描述：限制上传一张图片，上传要在左边框展示，支持预览、裁剪、删除已上传图片，裁剪之后左侧框同步更新1.下载element ImgCutter并引入cnpm i element-ui main.js:import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);cnpm insta
2021-06-04 10:52:28
610
原创 scss使用总结
scss作用：1.可直接定义变量，$开头；可以在变量中引用定义过的变量,$-:$2:形成嵌套，这样在找层级是就不需要每次都从头开始，避免同样的选择器写多次3.父选择器的标识符&用于为元素与在特定父元素下生效的样式 a & b:父元素为a的b元素，等同于b{a & {}} 接伪元素不带空格，接子元素带空格4.群组选择器的嵌套；>（第一个子元素，没有>就是所有特定属性名的子元素）、+（跟在特定元素后的特定元素）和~（跟在特定元素后的所有特定元素）5.嵌套属性：将
2021-05-24 22:16:53
170
原创 项目中展示图片，避免用户右键复制图片地址进行盗图问题解决
在table表格中可以使用动态id给每一个图片列绑定id，如果是只有一个位置展示图片给固定的就可以；将对应的id传入方法便于方法获取该元素<span slot="showPics" slot-scope="text, record"> <img :id="'showPics'+record.id" style="width:50px;height:50px" :src="getUrl('showPics'+record.id,record.showPics)" alt=
2021-05-12 14:34:55
195
原创 js计算时间跨度
1.在评论类需求会遇到 几分钟，几小时，几天前评论 0和1单位不加s，大于1加s显示复数：minutesfunction pluralize(time, label) { // 时间戳以秒算, 分钟，小时，天数 if (time === 1) { return time + label } return time + label + 's'}export function timeAgo(time) { const between = Date.
2021-04-30 14:36:25
275
原创 vue axios前端拦截器设置
/** * 请求封装 * 实例配置: 设置baseUrl 和 timeout * 请求拦截: 为深入配置 可进行token配置 * 响应拦截: 与后台进行配置 主要拦截 response status异常 以及 返回结果错误 */import axios from 'axios'import router from '../router'import Message from '@/utils/message'// 创建axios实例const service = axios.cre
2021-04-29 15:53:46
159
原创 vue 挂载公共方法
1.对于公用的可以定义一个文件，在main.js引入，挂载在vue入口文件的vue实例原型链上，这样每个模块里面都可以通过this.变量名访问这个变量；Vue.prototype.$axios = axios2.对于其中几个模块公用的可以用js文件抛出一个对象，在各个页面import引入，在vue实例mixins:[mixin] 引入公用3.对于页面层级较深，公用变量的用vuex...
2021-04-29 11:16:38
339
原创 expor,export default和module.exports,exports比较
前两个是es6用法，编译时执行，代码在编译时就确定各自引用关系后两个是commonjs用法，运行时执行；1.export直接抛出的变量 用import {变量名} from 文件路径接受； 或者 export {变量名} 用 import 变量from 文件路径2.export default 变量名，用import 变量名 from 文件路径 接受注：在每个js文件中export default 只能用一次；export可以一直用；结合使用也不影响；结合使用时引入用import {
2021-04-29 10:48:44
192
原创 js 动态随机颜色
randomColor(){return ‘#’ + Math.random().toString(16).substr(2, 6).toUpperCase();},:style="{background:randomColor()}
2021-04-07 18:49:09
304
原创 vue-cli 2.0同时启动Local和Network访问 不需在host设置ip,动态读取本机ip
1、首先设置localhost和本地ip访问在config文件下的index.js文件中，修改host为：host: ‘0.0.0.0’，或者在package.json文件下"scripts"的"dev"值后新增–host 0.0.0.0"，即：“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0”,2、设置启动后终端显示localhost和network访问地
2021-04-05 00:34:10
1356
1
原创 根据节点获取层级数据
根据最后一个节点 找到完整的层级数据{value:1,label:1,children:[{value:2,label:2,children:[{value:4,label:4,}]},{value:3,label:3,children:[{value:5,label:5,}]}]}根据当前节点5 返回[1,3,5]完整的路径数据node原数据 target当前节点值unction deepFinds(node, target){l
2021-04-05 00:30:18
205
原创 递归去除树状最后一层为空的children
使用场景：多级级联最后一级chidren数据给了数组，要做的是删掉空children，否则最后一级会出现空白但是又一直展示原数据：{label:1,value:1,children:[{label:2,value:2,children:[]} ,{label:2,value:2,children:[]}]}处理之后：子节点为空没了{label:1,value:1,children:[{label:2,value:2} ,{label:2,value:2
2021-04-05 00:17:54
2278
原创 设置NPM的仓库地址：有的公司需要设置仓库地址，否则项目依赖下载报错
报错如图：临时配置：npm install --registry=https://registry.npm.taobao.org永久配置：npm config set registry http://registry.npm.taobao.org/再下载依赖即可
2021-03-04 15:24:51
541
1
原创 Vue Devtools调试工具安装和vue.js not detected解决办法
Vue Devtools调试工具安装和vue.js not detected解决办法：下载安装包地址：https://link.csdn.net/?target=https%3A%2F%2Fpan.baidu.com%2Fs%2F1vKcb1pTQ0oITRBzr190Thg提取密码：k0s1将下载的文件进行解压，解压完之后，文件内容如下：打开谷歌浏览器，点击右上角，选择更多工具按钮，选择扩展程序，然后将之前解压的Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx文
2021-03-03 22:19:14
659
1
原创 element ui合并单元格
标题 数据是数组形式，相同属性前后排列，相同属性合并行相信你肯定看了 ElementUI 官方文档了，没看的话先去看下表格各个属性的意义，方便下文阅读：传送门但你会发现此例过于简单，死数据，但我们开发的时候往往都是后台传递过来的数据，导致我们 rowspan 的参数需要自己做判断，根据数据的相同行（或列）进行合并；我们先看下结果：代码附上： ...
2019-10-14 22:54:08
145
原创 元素宽度随内容撑开设置为display:inline
标题行内元素不可设置宽高，所以设置为display:inline就可以随内容多少撑开元素宽度
2019-10-14 00:23:48
1007
原创 输入框正则限制内容注意事项
标题 ios端完成键done存在的问题在vue框架下，input事件去监听v-model的变量，在ios端点击done按钮，即使输入框有内容input内部获取的v-model绑定的变量也是空值，在input事件下首先让监听的输入框获取焦点可以解决这个问题，元素.focus()...
2019-10-11 18:09:26
108
原创 一秒面掩码js部分
var vm = new Vue({el: “#fix”,data: {val: [],finaVal: ‘’,// 输入框显示值maskshow: “”,// 判断是否掩码显示flag: true,str: “”,// 存放真实值vall: [],// 最终值finaVall: ‘’,maskshowl: “”,flagl: true,strl: “”,// 第...
2019-10-11 18:03:23
156
原创 关于移动端的一些常见问题总结
1.解决页面使用 overflow: scroll 在 iOS 上滑动卡顿的问题?首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是：(1) 看是否能把 body 和 html 的 height: 100% 去除掉。(2) 在滚动的容器中增加：-webkit-overflow-scrolling: tou...
2019-07-20 21:46:08
657
原创 viewport专项研究
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点...
2019-07-10 22:23:11
62
原创 promise基本使用总结
标题 promise基本使用总结Promise对象代表一个未完成、但预计将来会完成的操作。它有以下三种状态：pending：初始值，不是fulfilled，也不是rejectedfulfilled：代表操作成功rejected：代表操作失败Promise有两种状态改变的方式，既可以从pending转变为fulfilled，也可以从pending转变为rejected。一旦状态改变，就「...
2019-06-19 12:03:12
205
原创 ui按钮组件的使用
标题 ui按钮组件的使用安装：cnpm i mint-ui -S导入 import MintUi from ‘mint-ui’import ‘mint-ui/lib/style.css’Vue.use(MintUi)Toast组件使用import { Toast } from ‘mint-ui’ 用到提示框组件import ‘bootstrap/dist/css/...
2019-05-07 13:56:25
197
原创 webpack基本配置
标题 webpack基本配置1.网页中常见静态资源：js,css,inages,字体文件，模板文件2,网页中引入静态资源多了以后有什么问题：加载速度慢，因为发起很多二次请求；要处理错综复杂的依赖关系3.解决上述两个问题：合并，压缩，精灵图，图片Base64编码；requirejs或者webpack解决依赖关系4.webpack是前端的一个项目构建工具，给予nodejs开发的前端工具1.安...
2019-05-07 13:46:46
202
原创 分别用keyup，watch监听文本框内容变化
标题 分别用keyup，watch监听文本框内容变化keyup事件监听 文本框：watch监听：监视路由：
2019-05-07 13:32:23
212
原创 vue-resource处理get,post,jsonp请求
标题安装vue-resource:npm i --S vue-resource引包：在引入vue之后引包 <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>html部分： <input type="button" value="get请求" @click='g...
2019-05-06 20:45:35
142
原创 vue中生命周期函数总结
标题 vue中生命周期函数总结1.beforeCreate在实例未完全创建成功触发 beforeCreate(){//这是第一个生命周期函数 同级的data和methods里面的内容是未定义状态 }2.created 实例完全解析完触发，此时data和methods都可以用beforeMount这是第三个生命周期函数，模板在内存中编辑完了，还没挂载到...
2019-05-06 20:43:38
297
原创 vue中常用的数组迭代方法
标题 vue中常用的数组迭代方法学习数组迭代方法every() 迭代数组每一项，每项都符合条件的才返回true，反之falsesome() 迭代数组每一项，只要有一项符合条件就返回true，如果全部不符合才返回falsemap() 迭代数组每一项，可以给特定条件会返回重新组成新的数组filter() 迭代数组每一项，可以给特定的条件进行筛选返回新的数组forEach() 迭代数组每一项...
2019-05-06 20:27:04
1549
原创 v-if和v-for的区别
标题 v-if和v-for的区别v-if在条件不满足的时候直接从dom数消失，v-show行间样式变成display:nonev-if有较高的切换性能消耗，v-show有较高的初始渲染消耗，如果元素需要频繁切换，最好不要用v-if,推荐使用v-show;如果元素可能永远不会被显示出来，推荐使用v-if...
2019-05-06 20:24:07
3711
4
原创 vue中事件修饰符总结
标题 vue中事件修饰符总结.stop阻止冒泡 冒泡事件：同一事件从子元素向父元素触发，事件默认冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式；同一事件从父元素向子元素触发.self只当事件在该元素本身（比如不是子元素）触发时触发回调.once事件只触发一次 事件函数只触发一次 可以和上面的修饰符连用；如果是阻止默认事件等，只阻止一次,就算...
2019-05-06 20:19:24
281
原创 path模块、语法继承实现公共头部公共底部
标题 path模块// 引入path模块获取文件名及后缀：path.basename(‘c:/a/b/index.html’)//index.html不包含后缀名：path.basename(‘c:/a/b/index.html’,’.html’)//index获取目录名：path.dirname(‘c:/a/b/index.html’)//c:/a/b获取拓展名：path.extna...
2019-05-06 20:14:25
154
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人