weixin_45115895-CSDN博客

原创 vant组件插槽失效

vant组件插槽失效项目里有用到vantUI组件库里的折叠面板选项，标题是需要自定义的，理所当然的使用插槽嘛，直接把官方文档的样式粘贴过来了，结果就是不生效，怀疑是不是哪里配置影响到了，各种找原因，找的心累官网代码如下：<van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <div>标题1 <van-icon n

2021-07-29 18:58:21 2501

原创 AES 加解密算法

最近的vue项目有用到对密码进行加解密操作MD5不可逆网上看了一些别的算法，最后确认使用AES算法进行加解密// 安装crypto-jsnpm install crypto-js --save创建CryptoJS.js文件封装加解密方法，内容如下//封装加解密方法import CryptoJS from "crypto-js";export default { // 加密 encrypt(word, keyStr) { keyStr = keyStr ? keyStr :

2021-03-23 17:37:45 326

原创 el-select 中 v-model 绑定的值以及如何进行回显

el-select 最常见的用法如下<el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option></el-select>反显的时候你只需要把要反显的值获取到并赋值给valu

2021-03-11 17:10:07 8152

原创 element-ui el-table表格组件先显示暂无数据再加载数据的问题

项目中用到table表格，动态请求数据时页面会先显示暂无数据，再显示loading，最后再正常显示数据，虽然没啥错但是用户体验不好。解决办法：通过empty-text属性自定义要显示的内容，初始化时值置为空，请求回来数据，但是长度为空时赋值“暂无数据”<el-table v-loading="loading" element-loading-text="小易拼命加载中..." element-loading-spinner="el-icon-loading" e

2021-03-11 16:02:50 3829 3

原创 h5页面在ios机上禁止长按复制

场景：H5长按事件，需要禁止IOS默认的长按复制用以下代码取消：*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none;}// 但是以上代码也会禁止输入

2021-01-21 09:52:42 800 4

原创 vue 过滤器根据状态id显示状态值

<span v-if="item.id" >{{item.id | stateFormat(item.id) }}</span>filters: { stateFormat(stateId) { if(stateId == 0) return '未处理' if(stateId == 1) return '处理中' if(stateId == 2) return '已处理' if(stateId == 3) return '全

2020-12-24 16:12:22 1068 1

原创多行文本溢出，本地测试可以实现，打包后不起作用

vue项目中有实现多行文本溢出的需求，本地测试完全没问题，一打包发布版本后就失效，代码如下：text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;经多方原因查找，发现是打包时一些带有前缀的css样式被删除了，这个插件会根据浏览器删除掉一些它认为不必要的前缀，导致我们没有达到预期效果，网上有两种解决方案：一：手动设置样式,添加下面注释的两行代码，这样打包时就不会被删掉了

2020-12-14 13:59:01 182

原创前端通过封装js公共方法对电话和姓名身份证等私密信息进行数据脱敏显示，即部分隐藏处理

最近的项目有遇到要将身份证信息进行脱敏显示// 参数分别为要脱敏显示的数据（字符串格式哦），头部不需要脱敏显示的数据长度，结尾不需要脱敏显示的数据长度// let tel = 13278945678// this.plusXing (tel,3,4) // 返回的即是132****5678 function plusXing (str,frontLen,endLen) { var len = str.length-frontLen-endLen; var xing = ''; for (

2020-12-14 11:44:57 925 1

原创 Vue.set 向数据中添加响应式属性

Vue.set 向响应式对象中添加响应式属性，及设置数组元素触发视图更新vue项目向获取到的数组中的对象新增一个属性并要求实时渲染到页面上，经过一系列的操作，修改的数据可以在控制台拿到，但是就是没有实时的渲染到页面上，很是纳闷后知后觉的反应过来，vue的数据是响应式数据，自己新增的数据并不具备响应式的特性，需要经过Vue.$set的处理才可以，Vue.set 向响应式对象中添加响应式属性，及设置数组元素触发视图更新参考链接:https://www.jb51.net/article/198276.htm

2020-11-10 15:46:58 1209

原创 elementUI table组件获取表格当前行的索引

elementUI table组件获取表格当前行的索引<el-table-column type="index" width='50' label="序号" ></el-table-column>直接type=“index” 就好,亲测可用

2020-10-27 16:51:20 1527

原创 vue+element-ui table表格一个单元格中添加多行数据

vue+element-ui table表格一个单元格中添加多行数据话不多说,先上效果图,值得借鉴可以接着往下看项目中有这样的需求,需要把所有数据按组的方式进行划分并打包,如果一个商品一条数据的话就显得太繁琐,用户体验并不好,于是乎就想到上面这种方式进行渲染和操作,有了想法就去找实现方式呗直接去翻了elementui组件,竟然没有这种渲染方式,那就只有另辟蹊径了:在table表格一个单元格中使用template自定义内容再添加一个table表格,结果就如上图所示了<el-table :da

2020-10-27 15:04:39 13778

原创点击选项进行跳转时,滚动到对应元素的位置

点击选项进行跳转时,滚动到对应元素的位置a页面b页面a页面跳转到b页面时,b页面的横向滚动列表需要跳转到对应的选项的位置,比如毛衫(最后一项)项目里使用的滚动插件是better-scroll,这里就用better-scroll方法实现核心思想就是跳转时b页面拿到对应的activeId,通过判断activeId和横向列表对应的每一项的id是否相同,从而为其添加active类,获取到列表里具有active类的那一项元素并通过better-scroll的scrollToElement属性滚动到对应位

2020-10-09 15:42:55 782

原创移动端键盘弹起导致页面fixed定位元素布局失效

移动端键盘弹起导致页面fixed定位元素布局失效移动端键盘弹起导致页面fixed定位元素布局失效,元素被软键盘顶上去了h5开发移动端应用时登录页底部有一个隐私政策和服务协议的块,我用fixed定位到了底部,真机测试时,输入框聚焦,隐私政策那一块被顶到上面了原因:当用户进行表单输入时，手机软键盘弹起，此时页面的尺寸发生变化，底部fixed定位的元素自然也会上移，可能就会覆盖页面中的某些元素。解决方案:上面提到，产生这种情况的原因是软键盘弹起，窗口尺寸发生变化，那么就通过监听尺寸的方式解决一下这个问题（

2020-09-28 15:51:55 1484

原创电商网站--放大镜效果的实现

最近有做一个PC端的简单官网,主要是进行商品的展示,目前没有收藏,加入购物车,购买的功能,商品详情页有商品图片,各种详细信息的展示,原型上是没有放大镜的功能的,当时有空余时间,我就想着试试放大镜的效果吧,js可以实现,但是网上页有各种插件,不用白不用,那就用插件吧// 1,,,安装插件vue-piczoomnpm install vue-piczoom --save// 2,,,局部引用(哪个页面需要用,在哪个页面引入)import PicZoom from 'vue-piczoom'expor

2020-09-28 15:31:20 311

原创 axios 内部原理学习

axios 内部原理学习axios是一个基于Promise的http请求库,可用于浏览器和 Node,可以说是目前最为常用的http库.axios同时支持浏览器端和服务端的请求,了解一下其内部的实现原理下面选部分重要代码分析。function getDefaultAdapter() { var adapter; if (typeof XMLHttpRequest !== 'undefined') { //通过判断XMLHttpRequest是否存在，来判断是否是浏览器环境 adapt

2020-09-28 15:05:01 271

原创 vue+elementUI框架实现走马灯图片高度自适应

vue+elementUI框架实现走马灯图片高度自适应element UI自身的carousel组件容器的高度是固定写死的，就算把image图片的宽度设置100%，它会随着浏览器屏幕的宽度等比例缩小到设置的最小宽度,但是因为外面的容器已经写死了一个高度(150px)，这样随着浏览器宽度变小,底部的话就会留有一片空白区域,如下,正常的高度应该有红线区域那么高网上搜索了一些方法,基本思路都是监听浏览器窗口大小然后给carousel组件容器的高度赋值&l

2020-09-25 11:54:02 2008 2

原创 vue 中使用/deep/深度选择器，谷歌浏览器报出警告

使用/deep/深度选择器时,谷歌浏览器控制台报错如下:scss或者less不支持">>>",而/deep/又会报上述警告可以用变量代替>>>符号<style scoped lang='less'> @deep: ~'>>>'; .box { @{deep} .title { } }</style>~表示转义定义好的变量需要加大括号{}具体的看这个链接吧

2020-09-18 17:19:40 1228

原创 css3使用calc()计算高度的用法

使用vue进行移动端h5开发时,底部tabbar封装成了公共组件进行使用,计算页面高度时使用100%减去tabbar高度,一直不起作用,今天终于发现自己错在哪里了,真是被自己蠢哭表达式中有“+”和“-”时，其前后必须要有空格,我没有留空格,然后修改了一下写法,问题解决了还是自己太粗心,对这些基本用法没有深入了解,只知道有这么个东西,导致被困惑许久网上搜索的一篇文章个人认为写的还是挺全面的链接如下:链接: https://www.cnblogs.com/gwkzb/p/12524682.html.内

2020-09-18 16:55:01 3204

原创根据不同的消息类型,执行不同的函数跳转到不同的页面

根据不同的消息类型,执行不同的函数跳转到不同的页面项目有需求,拿到一个消息列表后根据不同的消息类型跳转到不同的页面<div class="newsItem" v-for="(item,index) in list" :key="index" @click="hanldertype(item)">xxxx渲染过程就省略了xxx</div>// 根据不同的消息类型,执行不同的函数跳转到不同的页面hanldertype(item){ // 如果直接传typeId的话,拿

2020-09-02 13:50:38 254

原创商品列表图片高度不一导致排列错误

移动端vue项目渲染商品列表,由于图片差了0.x像素,导致了商品布局错乱,如下图:百度了一下,浮动样式会造成这种情况,样式里确实用了浮动,解决方案需要去掉浮动，具体样式如下：.inner-item{ float:none; display: inline-block; // 一行排多个 vertical-align: top; //因高度不一致，设置靠顶部对齐}后话:浮动样式是好用,有时也要考虑情况,我就没往这个方面想过,差点都要去研究瀑布流了,结果真是啪啪打脸,特此记录

2020-07-16 18:12:15 556

原创 axios请求在header请求头加入自定义信息

axios在header请求头加入自定义信息_this.$axios.post("/api/noticeInfo/notReadNum",data,{ headers:{ 'userid':sessionStorage.getItem("userId") }}).then(function (res){ console.log("未读消息为:",res.data) if(res.data.code == 200){ _this.noReadNums = res.data

2020-07-10 14:18:31 11735

原创 vue-cli3.x创建项目

之前一直用vue-cli2.x创建项目,来学习一下3.x创建项目的流程vue create 项目名 // 不支持大写字母之后基本上一路enter就好,有需要选择的自己设置吧,这里要提一嘴,3.x创建项目会让选择路由模式(hash/history),提示是否选择history模式,输入y就是history,n就是hash模式,这个有不明白的去查一下吧(前面一篇有写到过)创建完成后在VScode打开项目–>新建终端–>npm run serve编译成功后安装依赖一,vant组件的按需

2020-07-07 18:50:59 348

原创 vue调用原生方法(ios/android)

h5调用原生App的方法合集

2020-07-06 11:09:34 2425

原创 vue路由模式(hash/history)的选择

vue路由模式的选择vue-router（前端路由）有两种模式，hash模式和history模式。官方文档上面说了"vue-router 默认 hash 模式",hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些.之前创建项目一直用的都是vue-cli2.0版本,没有涉及到路由模式(hash/history)的选择,也就没有想太多,项目也没有遇到过关于此类的问题,vue-cli3.0版本创建项目会让你选择模式,最近想了解一下关于cli3.0的

2020-07-03 18:52:01 1875

原创移动端判断当前设备是ios还是andriod

判断当前设备是ios还是andriodlet u = navigator.userAgentif(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){ this.osType = 'Android';}if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ this.osType = 'ios';}console.log("this.osType--------",this.osT

2020-07-03 11:41:40 165

原创 Axios请求封装一个公共的请求头

Axios请求封装一个公共的请求头assets/commom/js/下新建一个js文件:eg:requestParams.jsfunction buildRequestParam (conParam) { let userInfo = JSON.parse(localStorage.getItem('userInfo')) let param = { head: { ver: '1.1', mod: 'ios', brandId:1, us

2020-06-23 16:08:06 436

原创 vue报错:Duplicate keys detected,0. This may cause an update error.

一, Duplicate keys detected: ‘0’. This may cause an update error.调试接口时报了这个错,经查询是因为两个v-for并行使用key导致，检查了一下确实如此.修改之后就好了参考文章:https://blog.csdn.net/weixin_30730053/article/details/94978304...

2020-06-22 18:34:59 96

原创模拟实现图片长按保存功能

关于图片的长按保存最近要实现图片的长按保存功能,百度了好多,单由前端实现的方法网上也有,不过看上去好麻烦,头疼,后来有看到博文说原生实现会简单些,咨询了老板,说原生可以实现的,我需要提供所选中图片的url,这样那就简单多了理一下流程:页面有一个图片轮播效果,点击某一张图片,实现图片预览的功能,在此基础上长按进行图片的保存到本地,因为有好几处都用到了这个功能,所以把它封装成了个组件,完整代码看最后声明:图片预览我引用了vant库的imgPreview父组件:// 引入组件import imgPre

2020-06-19 19:22:22 1018

原创给数组中的每一个json对象动态添加键值对

给数组中的每一个json对象动态添加键值对let arr1 = [ { name:"jack", sex:"男" }, { name:"rose", sex:"女" }] let arr2 = [ { age:24 }, { age:22 } ]for(var i=0;i<arr1.length;i++){ for(var j=0;j<arr2.length;j++){

2020-06-19 17:16:27 3177

原创 vue中引入json数据,无请求,直接引入的那种

vue中引入json数据vue项目经常会造一些假数据,一般我都是直接在.vue页面里直接写,今天来看一下外部引入json数据吧购物车页面(cart.vue)的假数据我放在了cartGoods.js里面cartGoods.js代码如下:const goodsJson = [ {"id":1,"title":"苹果","price":2.2}, {"id":2,"title":"香蕉","price":3.2}, {"id":3,"title":"橘子","price":1.4}, {

2020-06-12 12:07:35 2190

原创 vue项目使用sass报错:this.getResolve is not a function

vuevue项目使用sass报错:this.getResolve is not a function这个问题之前遇到过,百度一下解决了也没多想,今天第二次又遇到了,我得奉劝自己一句:你可长点心吧特此记录,以示警戒这种报错是由于sass-loader的版本过高导致,安装的时候需要指定一下版本号,我一般用7.0.0不指定版本的话安装的是8.0版本,就会报这个错误第一步安装sass-loader node-sassnpm install node-sass@^4.9.0 -Dnpm install

2020-06-11 17:04:25 344 1

原创移动端vue项目使用better-scroll导航滚动的指定位置

移动端vue项目使用better-scroll导航滚动的指定位置a页面:b页面:之前实现的是a页面点击跳转到b页面,但是如果点击的是最后一项,b页面不会自动定位到你选中的那一项,需要用户手动滑动才可以看到,用户体验不好新的需求:a页面点击谁,b页面头部导航就自动定位到选中的项刚开始想的有点复杂了,想着获取所有选项的宽度,放到一个数组里面,点击谁就获取谁的下标,拿到对应的那个宽度进行滚动,后来网上搜索了个简便方法,试了一下,成功了,心里简直不要乐开花let el = document.quer

2020-06-03 17:56:26 1856

原创 videoJS报错:VIDEOJS: WARN: Player “myVideo” is already initialised. Options will not be applied.

videoJS报错:VIDEOJS: WARN: Player “myVideo” is already initialised. Options will not be applied.移动端vue项目商品详情页有用到视频播放器,刚进入时没有错误,进入到其他页面再返回到商品详情页就会出现视频缩小到了左上角,且不能再播放了,查看控制台发现报了一个警告VIDEOJS: WARN: Player “myVideo” is already initialised. Options will not be ap

2020-06-03 16:31:05 8155

原创在vue项目里面使用better-scroll动态创建多个滚动列表

在vue项目里面使用better-scroll动态创建多个滚动列表之前的项目有需求如下:一件商品有一种或者多个种搭配,在商品详情页点击更多搭配,进入搭配页根据其搭配种类动态生成对应的横向滚动条,滚动插件我用的是better-scroll图片效果如下:请求回来的数据格式是数组里包含数组,大数组是搭配的种类列表,小数组是对应搭配的单品列表,代码如下:html页面渲染:<div class="coll-item-box" v-for="(item,index) in tryCollArr"

2020-05-26 13:46:32 804 1

原创 elementUI表单验证不起作用

项目中有用到elementUI,登录页有用到表单验证,验证用户名和密码,var checkUsername = (rule, value, callback) => { if (!value) { return callback(new Error("用户名不能为空")); }};var checkPWD = (rule, value, callback) => { if (!value) { return callback(new Error("密码不能为空"

2020-05-19 11:00:06 2429 3

原创 better-scroll在最新的ios13.4版本上页面回弹异常

最近的一个vue项目,客户提出在滑动到底部或顶部过快,会出现页面回弹,刚开始我以为是我自己哪里设置有问题,后来测试发现是ios版本问题在ios刚升级的13.4版本上滑动到底部或顶部过快,就会出现页面回弹,首先想到在BS初始化时设置了禁止回弹:bounce:fasle,结果确实不回弹了,但是到底部或者顶部时整个页面会突然的闪一下,所以此路不通后来问了同事,说在git上有个issue #978 就是关于这个问题的讨论,然后我就去找了一下,链接如下:https://github.com/ustbhuangyi

2020-05-18 16:11:05 644 4

原创 Vue项目中使用input,在IOS上点击输入框不聚焦

vue项目有用到输入框,之前一直用安卓机测试,没啥问题,今天偶然用ios测试了一下,发现输入框不能聚焦,且没法输入,百度了一下,还以为是ios版本不支持,添加了自动聚焦属性后并没有作用,继续搜索,有一个情况跟我很符合,说是为了防止在ios上长按(图片或文字)出现选中效果,在全局引入了user-select：none样式,他会影响input，textarea输入框,把该行代码注释掉就好,试了一下,果然是这个原因,就此这个问题解决原文链接如下：https://blog.csdn.net/weixin_4201

2020-05-18 15:57:55 1122

空空如也

空空如也