- 博客(30)
- 收藏
- 关注
RSS订阅原创 vue+vite+ts 中使用html2canvas生成海报时报错#1 591ms Error loading image
项目遇到的问题vconsole也报了错解决：应该是生成海报前原本的dom里有img元素且src为空引起的在每个img元素里我都加上了v-if的判断就没有再报错了在这篇文章 https://www.dazhuanlan.com/woxianyu/topics/1018750 说到 【在 img 对象的 src 属性是空字符串 (“”) 的时候，浏览器认为这是一个缺省值，值的内容为当前网页的路径。】 我这边每次报错内容都带着当前网页路径...
2022-05-20 11:24:33
1706
3
原创 微信小程序wx.downloadFile苹果手机失败显示 file data is empty的解决方案
Android和微信开发者工具使用downloadFile正常，但ios系统上却失败了。经过多次测试，发现原来是上传的文件里面内容为空，所以才会fail所以只要改下，文件大小大于0KB就ok了，downloadFile就能success...
2021-05-03 21:38:23
3205
原创 H5页面调起手机打电话功能
1. 发短信：<a href="sms:12345678902">联系客服</a>2. 拨打电话：我看到其他文章有讲到要在head的meta标签加上这个（不过我自己做项目的时候没有加 ，也可以用）<meta name="format-detection" content="telephone=yes" />拨打电话：<a href="tel:12345678902">联系客服</a>只要加入 tel: 就可以调起以下这些功能，超
2020-11-21 20:35:19
5432
原创 vue项目进行数据埋点
可以下载插件vue-uweb详细介绍可以看这里vue-uweb结合友盟+ 网站流量统计分析系统进行数据的统计和分析第一步：在vue项目的main.js里：import uweb from 'vue-uweb'// 使用 vue-uweb 插件Vue.use(uweb,'YOUR_SITEID_HERE')// 如果想要通过传递 options 参数进行更多设置Vue.use(uweb,options)SITEID的值在友盟里面能找到。只要在main.js里导入了，网站就会追踪你
2020-11-21 20:14:32
2789
原创 移动端vue项目中前端对后台返回的数据按A-Z进行分类
结合vant的索引栏组件需求：能够如图片（截图官方文档的）这样显示。并且由前端对返回的数据进行处理，按A-Z分类，并且对应字母的数据如果为空，则不显示字母，例如：I开头的数据为空，则不显示I索引栏template模板中：<div class="indexBar"> <van-index-bar> <div v-for="(item, index) in classificationLettersList" :key="index">
2020-08-19 22:26:41
1106
原创 vue项目中使用vue-pdf遇到的坑
vue.js pdf viewer安装：npm i vue-pdf --save在使用该vue-pdf插件的文件中导入import PDF from 'vue-pdf'// 注册组件export default { components:{ PDF }, data(){ return { numPages:undefined } }, mounted(){ // 获取pdf文件的页数 PDF.createLoadingTask("http://file.
2020-08-19 21:49:03
4857
原创 结合vue实现移动端页面的瀑布流布局
参考博客：浅谈瀑布流原理及Vue实现结合自己项目的需求进行修改基本原理：多行等宽不等高元素排列。第一排图片的顶部会处于同一个高度，依次排列在顶端，第二行以及之后的行则利用定位在最短的一列下面进行排列效果图：// 封装了WaterFallFlow.vue子组件<template> <div class="waterfall_container"> <div v-for="(item, index) in waterfallList"
2020-08-15 20:38:03
2549
原创 利用apply来改变API的传参方式
apply可以改变传递给函数参数的形式MDN:apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。MDN之apply的详解妙用：1、可以使用push将元素追加到数组中。因为push接受可变数量的参数，利用apply可以一次推送多个元素。var arr= [1,2,3];arr.push.apply(arr,
2020-08-15 19:52:55
446
原创 js获取video元素的视频时长并且不在页面显示视频元素
需求：页面只需要视频时长但不需要视频元素video标签的属性duration能够获取视频的时长，但是需要先获取到视频元素video，再通过video.duration获取到对应视频元素的时长解决办法：隐藏视频元素，仍然通过video.duration的方式获取到时长// template:<div class="duration"> <video v-show="false" :src="1.mp4"></video> <span></spa
2020-08-15 19:40:26
2084
原创 vuex单项流与v-model双向绑定之间引起的问题
vuex中是单项流v-model是vue中的双向绑定以下写法会报错// store.jsconst store = new Vuex.Store({ state:{ searchValue:"" }})// 在组件里 template模板<input type="search" v-model="searchValue" />// 在组件里 script标签里import { mapState } from 'vuex'computed:{ // 映射为当前组件
2020-08-09 18:37:28
561
原创 vue之在移动端中当处于首页时路由无法后退
全局：beforeEach(to,from,next)：在路由跳转前处理afterEach(to,from)：在路由跳转后处理查到资料 禁止后退的方法是history.pushState(null, null, location.href)即向history中添加一个记录，只是在历史记录堆栈中添加了一条记录（所以第一次点<返回按钮就可以阻止后退，但是再多点几次就失效）当点击返回按钮时，监听到返回事件（由于微信是一定会执行返回的），这是history就会取出刚添加的记录并替换当前页面的路径。
2020-08-08 22:20:52
645
原创 监听移动端的表单提交事件
其实，只要是表单控件，移动端监听到该表单元素被点击就会自动弹出键盘没有设置提交按钮的情况：通过监听enter键就可以处理表单的提交@keypress.13比如，我用type=search的input标签时弹出的键盘中相当于enter功能的键显示【搜索】文字。用的是textarea标签时，显示的是【换行】，如果监听了@keypress.13，不仅会换行还会处理@keypress.13的事件当然也可以直接设置提交按钮监听表单的提交~...
2020-08-08 20:54:14
344
原创 通过js获取元素外边距
如果外边距margin不是在内联样式中定义的，是不能通过style获取使用style获取的是内联样式的可以通过getComputedStyle去获取
2020-08-08 20:44:54
2141
原创 vue之v-bind绑定的数据是使用数组下标访问的元素报错原因
template模板中：script的data：data(){ return { worksCaseList:[ { coverImgUrl:'./image/1.jpg', title:'1' }, { coverImgUrl:'./image/2.jpg', title:'2' }, ...... ] }}报错：原因：受javascripy的特性限制，使用数组下标的方式访问实不会触发Vue的数据绑定vue官网
2020-08-08 20:40:58
1279
1
原创 vuex之使用变量存储函数名并通过dispatch(变量)调用actions中的方法
vuex文件// store.jsimport Vue from 'vue'import Vuex from 'vuex'import actions from './actions.js'import ImageInfo from './modules/imageInfo.js'Vue.use(Vuex)const store = new Vuex.Store({ state:{ type:['Video','Image'], videoList:[], imageList:[
2020-08-08 20:05:35
1118
原创 解决vue项目中调用后台接口成功获取到数据但元素渲染报null错误
由于获取到后台数据是个对象，所以我在data里面定义数据的时候给赋的初值是null假设：data(){ return { videoObj:null }}template模板里对应的DOM元素：<div>{{ videoObj.title}} </div>由于给videoObj赋了null这个初值，所以在调用接口前初始渲染读取的是null，即div的里面的videoObj初始读取的是null，所以会报 TyperError:Cannot read proper
2020-08-08 19:37:38
4250
原创 解决调用接口获取数据后在mounted内获取不到DOM元素的原因
我在做项目的时候遇到这个问题，调用后台接口获取数据赋值给数组列表并且重新渲染DOM元素内容其实是想通过js给DOM元素修改下样式，因此引发出这个问题~很奇怪的是，我在mounted钩子函数里去获取了不用重新渲染的父节点，能够获取到该元素，而且包含了我想要获取的被重新渲染的子节点，但我直接用document.querySelector()获取该子元素，返回的依旧是null，改用成通过ref获取，也是返回null。我觉得应该是调用接口获取数据是异步操作，所以此时获取不到元素，我就在获取子元素的外边套了
2020-08-08 19:35:23
3348
1
原创 vue全局过滤器---格式化时间戳/将时间戳转换成“几天前”“几个小时前”“几分钟前”
我自己编写了个文件并命名为filter.js格式化时间戳函数：将时间戳转换成“几天前”“几个小时前”“几分钟前”将两个函数导出在main.js中导入并且对两个函数进行全局过滤器注册通过Object的API获取键值，返回一个元素为键值的数组...
2020-08-08 19:30:36
721
原创 学习笔记
v-show指令的值可以是布尔值、属性名、函数名，如果使用函数来控制，无论函数内容是什么，只要最终返回的是布尔类型的true和false即可。表单元素的value属性的绑定值最好不要是父元素传递的值，即props里的属性。原因：避免直接更改prop，prop是单向绑定，不能更改数据，只能由父组件传输过来。每当父组件重新渲染时，该值会被重新覆盖,所以对value属性的值应该使用data或计算属性定义数据，再通过$emit等方法将值传递给父组件。路由缓存问题：通过watch监听路由变化解决问题..
2020-08-02 19:10:41
104
原创 结合bind封装querySelector()
bind()的作用：不会直接调用，而是返回一个函数，即克隆了当前的函数；并且将this指向传递的第一个实参上。可以将document.querySelector 或者document.querySelectorAll 进行封装var query = document.querySelector.bind(document)这样就可以直接通过query(‘选择器名称’)来获取元素，简单实用~可以参考这个链接，有更详细的介绍~HTML5中类jQuery选择器querySelector的高级使用 doc
2020-08-02 15:41:52
417
原创 解决vue项目的htmparser2的报错
无缘无故项目就报了这个错，解决方案：直接删除了这个模块再安装哈哈哈npm uninstall htmlparser2npm i htmlparser2解决~
2020-08-02 15:32:52
640
原创 前端项目小bug总结
事件源e之获取currentTarget可能会存在一个问题：// 用鼠标移动举例document.onmousemove=function(e){ console.log(e.currentTarget) // 控制台输出为null}原因：currentTarget为null原因尽管如此，在打代码时还是可以直接e.currentTarget获取当前事件处理函数绑定的对象。vant中的Grid组件的属性direction我在使用该属性时没有显示效果，原因是！！！vant版本问.
2020-08-02 15:28:39
161
原创 事件源e之控制台输出的e.currentTarget为空的原因
事件源e之获取currentTarget可能会存在一个问题：// 用鼠标移动举例document.onmousemove=function(e){ console.log(e.currentTarget) // 控制台输出为null}原因：currentTarget为null原因tips:点击蓝色字可以跳转到StackOverflow链接通过console.log()去输出会存在问题。尽管如此，在打代码时还是可以直接e.currentTarget获取当前事件处理函数绑定的对象。.
2020-08-02 15:06:13
1312
原创 解决子组件复用而未重新渲染问题
我在做页面的时候发现，当跳转到另一个页面的时候，由于两个页面复用了一个相同的子组件，导致新页面不会重新渲染子组件部分。组件复用了所以不会重新渲染。举例：子组件：（随意写了）Box.vue<div> <input type="text" name="usename" /> <label for="username"></label></div>父组件引入子组件Home.vue<div class="home_contai
2020-08-02 15:02:32
1523
原创 解决vue中父组件传图片路径src给子组件却无法正常显示图片的原因
子组件Cover.vue<div> <div class="cover"> <img :src="src" /> ... </div></div> props: { src: { type: String, required: true, },}父组件// 引入子组件<Cover src="@/assets/images/hello.png"></Cover&
2020-08-02 14:59:10
5384
1
原创 解决父组件无法修改子组件样式问题
父组件无法修改子组件样式原因：组件的style标签加了scoped属性，所以再父组件的style中修改子组件的样式是无法应用到子组件上的。但是，子组件的根节点元素，即以下代码的div.box_container子组件 Box.vue <template> <div class="box_container"> <span class="title">我是Box</span> <span class="content">我
2020-08-02 14:58:03
915
原创 Vue获取元素的宽高
获取元素第一种：this.$refs第二种：document.querySelector()等等首先确保获取的元素不是undefined 或 null 等等元素得在mounted()生命周期内才获取得到获取元素的宽、高（1）如果你元素有内联样式style=“width:100px;height:100px;”则可以通过以下方式获取宽，高this.refs.名称.style.width或this.refs.名称.style.width 或 this.refs.名称.style.widt..
2020-08-02 14:56:14
16644
原创 vue项目中遇到复用相同的UI框架的组件，但想要渲染出来的样式不同的解决方案
由于修改UI框架的样式必须是全局修改，不可以在style标签带有scoped属性的组件内修改，会失效。所以只能全局修改，那么，全局修改就会导致所有使用该组件的样式都一样。但是做项目做页面又会遇到同个组件样式不同。而且！！！这些封装好的组件就只有一两个标签，但是最终渲染出来时是有很多个标签并且大部分标签之间有很多嵌套，很难准确修改到对应部分。而且有些样式无法继承之类的，所以修改哪部分就必须找到哪部分，无法通过修改临近的元素或者父级元素、祖辈元素来修改想要的部分。解决方案：以下方案得根据实际需求使用
2020-08-02 14:52:43
2282
原创 通过JS动态控制CSS伪元素
在做页面的时候遇到本次问题的这部分的原结构是引用Ui框架vant的组件。我是想通过触发JS事件动态修改该组件里伪元素的内容因此收集了相关API和我最终的解决方案获取伪元素的APIgetComputedStyle(元素，“伪元素”)MDN解释：语法：let style = window.getComputedStyle(element, [pseudoElt]);element：用于获取计算样式的Element。pseudoElt 可选：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或
2020-07-27 22:57:24
785
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人