随笔分类 -  vue-h5微信

常见的问题
vue2播放音频组件mp3
摘要：贴代码直接使用，配合了el-slider组件完成 效果图： 父组件 data(){ return{ queryParams{ visitTapesList:[{url:'xxxxxx'},{url:'xxxxxx'},{url:'xxxxxx'}] } } } <Audio v-for="(item 阅读全文
posted @ 2024-03-14 09:32 light丶 阅读(998) 评论(0) 推荐(0)
select下拉，lable选择
摘要：有这样一个需求，下拉选择数据时，点击数据，下拉框不关闭，效果如下 这里负责人只能选择一个，协作者可以选择多个，刘一波，选择了负责人，那么其它的人都是协作者，再次单击负责人或协作者，取消选择，直接复制即可用 HTML <el-form-item label="负责人/协作者" prop="teamwo 阅读全文
posted @ 2023-11-27 14:17 light丶 阅读(40) 评论(0) 推荐(0)
vue3 把base64转成file文件的问题
摘要：网上有许多，我就随便复制了两个,但发现了一些问题 1.通过new File()将base64转换成file文件，此方式需考虑浏览器兼容问题。 // 将base64转换为文件 const dataURLtoFile=(dataurl, filename)=> { let arr = dataurl.s 阅读全文
posted @ 2022-06-27 14:50 light丶 阅读(3200) 评论(0) 推荐(1)
vue 姓名输入框禁止输入英文和符号
摘要：<input type="text" placeholder="请输入姓名" oninput="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v- 阅读全文
posted @ 2022-06-22 09:30 light丶 阅读(393) 评论(0) 推荐(0)
vue 使用npm下载three
摘要：1、安装three.js npm install three 2、安装轨道控件插件 npm install three-orbit-controls 3、安装加载.obj和.mtl文件的插件 npm i --save three-obj-mtl-loader 4、安装渲染器插件 npm i --sa 阅读全文
posted @ 2022-05-06 16:08 light丶 阅读(1000) 评论(0) 推荐(0)
vue 使用swiper的异形轮播图
摘要：官网效果图是这样的 一、我们需要在vue的public的html引入我们下载的css样式 <link rel="stylesheet" href="../src/assets/css/swiper.min.css"> 这个样式可以去官网下载 https://www.swiper.com.cn/dem 阅读全文
posted @ 2022-03-22 11:01 light丶 阅读(4246) 评论(0) 推荐(0)
vue 使用定位获取经伟度
摘要：一、第一种方法使用百度定位 1.在public处放入 <script type="text/javascript"src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=您的密钥"></script> 密钥生成方法网上有许多 2.在方法里使用 l 阅读全文
posted @ 2022-03-22 10:37 light丶 阅读(4327) 评论(0) 推荐(0)
vue把demo生成图片
摘要：1.在vue命令行下载依赖 npm install --save html2canvas 2.然后在需要使用的页面引入 import html2canvas from "html2canvas"; 3.在demo上添加ref 使其变成 我要转化为图片的区域 表示，我只要截取这个Div里面的内容变成图 阅读全文
posted @ 2022-03-03 14:43 light丶 阅读(468) 评论(0) 推荐(1)
vue把url生成二维码图片
摘要：1.使用npm命令下载qrcode npm install qrcodejs2 --save 2.在需要使用的页面引入 import QRCode from "qrcode"; 然后在js事件里使用 //把url生成二维码 QRCode.toDataURL(url) //在这里拿到地址，把它赋值给d 阅读全文
posted @ 2022-03-03 14:31 light丶 阅读(1174) 评论(0) 推荐(0)
vue报错：sass-loader You may need to install it
摘要：解决方案： 第一步：安装sass-loade npm install sass-loader --save-dev 第二步：安装 node-sass npm install node-sass --save-dev 按装好看有没有报错，如果报 说明是版本太高，我们重新删除，降一下版本就好了 打开pa 阅读全文
posted @ 2022-02-15 17:32 light丶 阅读(797) 评论(0) 推荐(0)
vue使用cube-ui（滴滴ui组件）
摘要：官方文档：https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start 根据文档我们要下载并按装相关的依赖，我们一步一步来 1.打开终端运行： npm install cube-ui --save 2.在package.json中的devDepend 阅读全文
posted @ 2022-02-15 17:19 light丶 阅读(1058) 评论(0) 推荐(0)
vue 跳转传参数据，刷新页面参数丢失
摘要：在使用Vue的跳转页面并带参数过去，并刷新当前页面时，参数会丢失 这种情况可以先把值用转换 home页面 let ut_id = JSON.stringify(ut_id); this.$router.push({ path: "/About", query: { id: ut_id } }); A 阅读全文
posted @ 2022-01-26 11:38 light丶 阅读(797) 评论(0) 推荐(0)
vue 从a页面跳转到外部链接b页面，然后从b页面跳转到回a页面，返回没有执行生命周期
摘要：返回后页面不刷新，一些失效的信息依然显示在页面上，生命周期全部没有执行， 在vue的mounted执行该方法 mounted() { //注意，这里一步，才可以执行methods生命周期里的方法 let that = this; //这个事件在用户浏览网页时触发，pageshow 事件类似于 onl 阅读全文
posted @ 2022-01-25 17:49 light丶 阅读(1882) 评论(0) 推荐(0)
vue h5怎么查看打印信息，
摘要：一般我们开发时都会查看打印信息，来查找报错问题 但，如果是h5，在手机上是不可以像pc上的浏览器一样查看打印的。 使用腾讯的vConsole gitee地址：https://gitee.com/Tencent/vConsole github地址：https://github.com/Tencent/ 阅读全文
posted @ 2022-01-13 10:44 light丶 阅读(249) 评论(0) 推荐(0)
vue 微信h5改变页面标题
摘要：1，在vscode终端下载安装vue-wechat-title: npm install vue-wechat-title 2，在main.js全局引入 import vueWechatTitle from 'vue-wechat-title' Vue.use(vueWechatTitle) 3，在 阅读全文
posted @ 2021-09-03 09:54 light丶 阅读(943) 评论(0) 推荐(0)