vue
为什么名字都被占用
哈喽~艾瑞巴蒂,简单介绍一下自己:首先我不是什么技术大佬,只是一个成长中的职场小白。没有牛逼的教育背景,全靠生拼;没有丰富的项目经验,全靠积累。注册博客的目的,是为了记录自己在工作中遇到的各种坑和奇葩的神仙问题,希望也能帮到正在栽坑的你!
展开
-
el-input-number 数据更新,视图不更新
最终解决 this.$nextTick(() => {});原创 2022-12-29 18:13:42 · 368 阅读 · 0 评论 -
vue使用ueditor(vue-ueditor-wrap)
解析公众号富文本转载 2022-11-08 18:46:31 · 1079 阅读 · 0 评论 -
elementui InputNumber数据更新,视图不更新
最终解决方案:this.$nextTick();原创 2022-08-25 15:23:39 · 432 阅读 · 0 评论 -
vue 富文本字符串如何绑定事件并传参
可以通过冒泡的方式汇总到onRichtxt方法上onRichtxt内可以通过标签属性区分是哪个点击的。原创 2022-07-26 12:45:40 · 717 阅读 · 0 评论 -
js正则禁止输中文韩文日文
中文/[\u4e00-\u9fa5]/日文/[\u0800-\u4e00]/韩文/[\uac00-\ud7ff]/原创 2022-07-21 10:45:04 · 588 阅读 · 0 评论 -
Taro小程序 webview src已修改但页面不刷新
解决办法:加时间戳 重点就是这 时间戳一定要加在/#/里 不能加在后边参数里原创 2022-06-20 14:35:51 · 1160 阅读 · 0 评论 -
vue-awesome-swiper init方法无效
解决办法v-if来重新渲染swiperVisible<swiper class="swiper" :options="swiperOptionTop" ref="swiper1" v-if='swiperVisible'> <swiper-slide class="slide-1" v-for='item in imgList'> <img :src='item' /> </swiper-slide></sw.原创 2022-03-14 14:07:44 · 951 阅读 · 0 评论 -
html网页全部色调置灰
直接在body里加上这个样式即可html{ filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1); -webkit-filter: grayscale(100%);}原创 2021-12-20 17:41:47 · 188 阅读 · 0 评论 -
解决移动端使用vue-pdf实现pdf文件预览造成的中文缺失或电子章缺失
第一步this.pdfSrc = pdf.createLoadingTask(this.pdfSrc);为 let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"; this.pdfSrc = pdf.createLoadingTask({ url: this.$route.query.pathUrl, cMapUrl: CMAP_URL, cMapPacked: true, }.原创 2021-07-03 17:00:32 · 2267 阅读 · 1 评论 -
ios input失焦时,页面被上推问题
解决办法 失焦的时候让页面滚回初始位置<input type="text" v-model="formInfo.realName" maxlength="10" placeholder="请输入您的真实姓名" @blur.prevent="changeBlur" /&原创 2021-05-10 17:49:47 · 238 阅读 · 0 评论 -
vant 插槽无效问题
官方提供的代码<template #title> 11111111 </template>改成这样就行<template name="title" slot="title"> 111111111 </template>原创 2021-07-03 16:51:01 · 1558 阅读 · 1 评论 -
H5直接打开指定APP&&H5直接打开指定小程序
1. 绑定域名登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。2. 引入JS文件在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)备注:支持使用 AMD/CMD 标准模块加载方法加载。.原创 2021-04-20 15:17:49 · 1214 阅读 · 0 评论 -
vue h5移动端查看大图组件(可缩放)
找了很多查看大图的组件发现都没办法自定义样式,或不能缩放(wc-viewer v-viewer),于是就自己写了一个主要思路就是运用swiper 1使用方法<template> <div class="size-detail"> <bigImg :imgList="imgList" :show.sync="showBigImg"></bigImg> <b...原创 2020-12-29 17:01:11 · 1437 阅读 · 0 评论 -
h5 localStorage在APP端无效
原因:因为安卓设置了清除缓存 所以存不上解决:Android 系统 App 这里需要对 webview 操作 enable localStoragewebView.getSettings().setDomStorageEnabled(true)原创 2020-12-24 15:04:20 · 2362 阅读 · 2 评论 -
如何运行dist文件夹
npm install express -gnpm install express-generator -g express expressDemo (expressDemo是项目名)cd expressDemo npm installnpm start //浏览器打开http://localhost:3000/#/原创 2020-12-09 09:55:49 · 1997 阅读 · 0 评论 -
element-ui 颜色选择器自定义换肤
颜色选择器可以实现简单全色值皮肤切换,适合做基础皮肤切换<template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :size="size" > </el-color-picker></template><scr.原创 2020-11-25 14:30:34 · 798 阅读 · 0 评论 -
rem.js 源码
;(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; .原创 2020-11-21 19:03:23 · 245 阅读 · 0 评论 -
vue 实现九宫格抽奖demo
<template> <div class="luckDraw"> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapper"> <p class="integral">今日还剩 <span>1<.原创 2020-11-18 13:55:33 · 168 阅读 · 0 评论 -
h5 vue解决弹窗滑动穿透问题
1.在mian.js中引入prototype.jsimport Vue from 'vue';//弹出框禁止滑动Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动原创 2020-09-10 10:41:35 · 577 阅读 · 0 评论 -
小程序解决弹窗滑动穿透问题
## 解决方案1.当弹窗没有滚动条的时候直接监听 catch:touchmove 方法, 然后直接返回就可以了<view catchtouchmove="{{preventTouchMove}}"></view>preventTouchMove(){ return}2.当弹窗内容需要滚动的时候&&当前页面无需滚动如果你页面没有滚动条可以直接给当前页面最父级元素fixed定位一下或者overflow:hidden一下3当弹窗内容需原创 2020-08-13 18:38:31 · 803 阅读 · 1 评论 -
h5 Vue 的移动端图片查看插件
wc-view移动端图片浏览插件.演示地址演示地址安装npm i wc-view --save-dev使用import wcView from 'wc-view';import 'wc-view/style.css';Vue.use(wcView);img 标签时: <img class="wc-preview-img" :src="url" v-for="(url, key) in list" :key="key" @click="$preview($ev转载 2020-08-06 15:05:56 · 683 阅读 · 0 评论 -
数字金额增加动效
实现1:数字直接累加增加效果numberAnimate(100.34)numberAnimate(num) { let n1 = new NumberAnimate({ from: num ? num : 0.00,//开始时的数字 speed: 1000,// 总时间 refreshTime: 100,// 刷新一次的时间 decimals:原创 2020-07-15 13:56:47 · 435 阅读 · 0 评论 -
微信小程序实现上传文件 如图片/word excel到服务器
说道上传文件,首先要想到微信官方文档给的API,wx.uploadFile({ })通过这个API来达到上传至服务器的效果:代码示例如下接下来我们先来说说上传图片功能,这个比较简单一些上传图片:wx.chooseImage({ })从本地相册选择图片或使用相机拍照代码示例如下:在点击图片触发响应事件函数里写上以上代码,就会调起手机选择相册或者拍照。以上就达到了上传图片的功能上传word/pdf等文件:这个功能真是苦恼了我好久,因为项目中要用到上传wor转载 2020-07-07 14:28:35 · 9408 阅读 · 2 评论 -
vue-pdf无法显示中文
1.引入importCMapReaderFactoryfrom'vue-pdf/src/CMapReaderFactory.js'2.重置一下pdf文件this.pdfUrl=pdf.createLoadingTask({url:res.data.datas.invoicePicUrl,CMapReaderFactory})原创 2020-06-22 16:13:35 · 2929 阅读 · 3 评论 -
js 比较几个数字大小
首先把数字装进数组这样好做处理var desc=function(a,b){return b-a};var asc=function(a,b){return a-b};var num=[10, 18, 13, 100, 16, 11];num.sort(asc);console.log(num);原创 2020-06-17 17:59:05 · 1849 阅读 · 0 评论 -
小程序如何使用过滤器
解决办法:使用wxs1.wxml页面引入<wxs module="filter" src="../../wxs/filter.wxs" />filter.wxs文件 我写了一些常用的日期转化 金额保留两位小数等等var parseDate = function (date, fmt) { if (!date) return ''; fmt = fmt || 'MM月dd日 HH:mm'; date = getDate(date); v.原创 2020-06-10 18:54:43 · 519 阅读 · 0 评论 -
uni-app scrollview的滑动事件无法触发
大概布局就是这样<view class="container"> <scroll-view scroll-y="true" @scrolltolower="loadMore" style="height: 100%;"> <view class="list"> <view class="list_item" v-for="item in shoplist" :key="item.create_time"> <原创 2020-06-10 09:43:59 · 2352 阅读 · 0 评论 -
uni-app input值不更新问题
<template> <view> test <input type="number" placeholder="请输入数量" @input="onInput" v-model="number" /> </view></template><script> export default { data() { return { ..原创 2020-06-02 14:26:29 · 4272 阅读 · 5 评论 -
小程序h5 实现全景图播放功能(如vr看房)
以vue项目为例插件官网地址https://photo-sphere-viewer.js.org具体功能配置请参考官网api项目目录结构1.安装以依赖cnpm install three -Scnpm install photo-sphere-viewer -Sb.jpg(全景图片)quanjing.vue<template> ...原创 2020-05-06 14:24:39 · 8366 阅读 · 0 评论 -
公众号文章里使用svg进行交互
前言今天产品发我一个文章问我怎么实现的 之前印象里公众号文章都是简单的图文 而且都是在公众号素材管理里添加素材 也就是用公众号自己的富文本编辑器,后来查了查 才发现还有这个骚操作F12插入svg代码片段,简直绝了,这算是微信漏洞?哈哈哈我就不一一写啦 直接转载篇文章了哈现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验,而不再跳转H5。结合这一需求,本期分享...转载 2020-03-20 15:18:35 · 3598 阅读 · 0 评论 -
js 查找字符串中某字符出现的次数
var str = "2,fdsg,grth,af,areg,aser"var num = str.split(",").length;console.log(num)原创 2020-03-19 10:20:12 · 2703 阅读 · 1 评论 -
微信小程序获取文件图片的MD5
问题: 上传同一张图片解决办法:获取图片MD5值来对比如何使用?1.对应页面引入对应的spark-md5.js//引入jsconst sMD5 = require('../../utils/spark-md5.js')//选择图片 获取图片MD5 wx.chooseImage({ success(res) { c...原创 2020-03-13 15:44:41 · 2082 阅读 · 1 评论 -
解决浏览器缓存问题的三个解决方法
1.使用meta标签设置缓存机制<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="...原创 2020-03-04 10:58:09 · 1353 阅读 · 0 评论 -
vue防暴力重复点击
问题:快速点击按钮会重复多次调用接口,防止出现这样的情况解决办法:用全局指令来解决1.新建plugins.js2.在main.js引用export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('preventReClick', { inserted (el, binding) ...原创 2019-12-24 10:13:33 · 2012 阅读 · 1 评论 -
微信小程序解决canvas层级最高问题
1.产品需求:想把小程序某一页面保存图片到手机2.遇到问题:保存到手机不授权的时候得给个弹窗结果弹窗没法展示在最上层3.解决办法 把canvas移到屏幕外就可以啦.canvasBox{ position: absolute; width: 100%; right: -900px; top: -600px;}...原创 2019-12-05 16:45:13 · 2246 阅读 · 0 评论 -
微信小程序-可以跨页面更新数据方法--》通知广播WxNotificationCenter如何使用
以下两种场景,在微信小程序官方并没有提供类似iOS的NSNotificationCenter 或者 Android的广播类似的解决方案。A页面 -> B页面,B页面完成相关逻辑需要通知A页面刷新数据(并传值) 通知(广播)已入栈并且注册过通知的页面(并传值)如果遇到以上的场景,要怎么处理呢?在github上发现了WxNotificationCenter,下载地址:https://...转载 2019-11-30 18:41:59 · 935 阅读 · 0 评论 -
小程序开发者工具模拟器鼠标无法显示 鼠标指针在微信开发工具中不显示
1.问题:鼠标划在模拟器上就是不显示鼠标 但是能点解决方法:原创 2019-11-27 09:38:56 · 2303 阅读 · 0 评论 -
用户登录如何给密码加密xxtea.js
先说一下xxtea.js 可以用这个加密这个就是xxtea.js的源码保存一下就好了/**********************************************************\| || xxtea.js ...原创 2019-11-21 17:57:37 · 661 阅读 · 0 评论 -
css样式 文字和数字不连接 被折行分离问题
解决办法.question{ color: #6a6a6a; font-size: 30rpx; line-height: 44rpx; overflow: hidden; word-break: break-all;}加一个这个样式就好了...原创 2019-11-16 10:50:46 · 838 阅读 · 0 评论 -
elementUI如何让数字输入框input-number默认不为0
<el-input-number v-model="searchParams.skuCount" :controls="false" :min="0" :max="999999" :precision="0" style="width:95px;"></el-input-number>//data中一般默认会这么写searchParams...原创 2019-10-18 14:32:00 · 8385 阅读 · 5 评论