vue
小任同学`
没有别人的天赋,付出双倍努力就能慢慢超越了。
展开
-
解决vue后台 侧边导航折叠时,echarts图表组件不会自适应页面宽度的问题及echart组件id重复问题
前言侧边导航栏折叠展开是echart不会自适应使用了vuex配合watch监听侧边栏展开时重绘图表echart组件重复使用,id重复问题。原创 2023-01-04 15:30:22 · 1092 阅读 · 1 评论 -
Echarts--markPoint属性
使用很简单,在series对象中添加markPoint对象即可,属性可以设置官方提供的几种基本图形,也可以自己添加对应的图案使用,文本属性也可以设置,同其他一样。原创 2022-12-23 16:34:04 · 10978 阅读 · 0 评论 -
vue3在h5及小程序中滚动吸顶及(动态超出文本折叠)
前言在vue3中滚动至一定高度tab按钮吸顶(h5中在header下、小程序中置顶),动态计算出后台返回的数据长度通过长度展示不同的样式。含判断微信环境和ios终端的方法原创 2022-09-30 16:12:08 · 1043 阅读 · 4 评论 -
vue3+ts 使用vue-video-player 实现音视频播放
前言在vue3 中尝试了很多插件都不支持,vue3-video-player在ios不兼容,所以最后选择用了vue-video-player,但是在ts中编译不是通用的,所以需要手动修改一下编译方法,最后可以使用了,详情请看下面。...原创 2022-08-18 17:28:12 · 8067 阅读 · 25 评论 -
vue3中使用 vue3-slide-verify 滑块验证登录
vue3中使用 vue3-slide-verify 滑块验证登录原创 2022-08-02 17:33:04 · 9698 阅读 · 22 评论 -
vue中如何使用vue-pdf及相应报错解决
使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf,vue3项目用pdfjs-dist原创 2022-07-28 15:15:50 · 15312 阅读 · 18 评论 -
vue项目中实现复制内容到剪贴板
项目中要实现复制功能,实现点击复制内容到剪贴板Vue中使用了vue-clipboard2。原创 2022-07-15 14:55:57 · 567 阅读 · 5 评论 -
vue 项目登录注册中如何使用滑块去校验
vue项目登录注册中如何使用滑块去校验,下面是效果图。1、我们写一个组件写一个样式,在鼠标按下时做处理 计算鼠标滑动的长度 得到结果 如果滑到底部那我们在传回父组件的方法中 赋值即可,这样我们就拿到了校验通过的flag。2、在组件中注册并在登录页引入3、父组件中传入成功与失败的回调,处理传回的事件函数,做后续处理即可...原创 2022-07-14 14:40:27 · 849 阅读 · 1 评论 -
vue3中watch 与 watchEffect 的用法
watch- 默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调;watch- 更明确哪些状态的改变会触发侦听器重新运行副作用;watch- 获取到侦听状态变化前后的值。watchEffect 不需要手动传入依赖,watchEffect 会先执行一次用来自动收集依赖,watchEffect 无法获取到变化前的值;只能获取变化后的值。参数说明:source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量;callback: 执行的回调函数...原创 2022-06-30 17:02:34 · 2107 阅读 · 0 评论 -
vue实现城市选择(多选)效果—手写组件(父子组件传值)
我们可能会有用到多选城市的情况、那么我们详解一下怎么实现多选城市并展示2-2 在父组件中写一个组件引入2-3 js-dataparamsData :为模拟展示:比如我们从详情接口获取的数据存在默认展示在页面中。selectCityInfo:为传入子组件的数据。arr为全部的城市、ids为唯一标识的数组(例如code、id等)、chooseItem为选中的数据,默认为citys中的格式2-5父组件css 3、代码-子组件(详解)3-1 子组件templete原创 2022-06-22 19:04:58 · 1821 阅读 · 1 评论 -
vue 项目中检测是否为微信环境还是支付宝环境
项目中运用到的检测环境方式:可根据不同环境实现不同逻辑原创 2022-06-21 14:31:04 · 903 阅读 · 0 评论 -
vue+element-Tree控件 父子传值递归展示1级(父级)和3级标签
需求仅展示最外层父级标签和三级标签 ;二级标签不展示element tree:Element - The world's most popular Vue UI framework(1)默认展示(2)点击选择标签(3)点击确定按钮展示选中标签(1级、3级) (4)点击删除对应标签(1) 父组件 templete(2)父组件 引入子组件(3)js-data中的参数(4)js-methods三、子组件代码(1)templete(2)js(3)css.........原创 2022-06-21 10:26:48 · 1108 阅读 · 0 评论 -
js监听浏览器返回、后退、上一页按钮事件方法
⼤家知道在页⾯中我们可以使⽤javascript window history,后退到前⾯页⾯,但是由于安全原因javascript不允许修改history⾥已有的url链接,但可以使⽤pushState⽅法往history⾥增加url链接,并且提供popstate事件监测从history栈⾥弹出url。既然有提供popstate事件监测,那么我们就可以进⾏监听。...原创 2022-06-08 17:50:25 · 19633 阅读 · 0 评论 -
vue3 多选框选中取消—实现多标签选择
三、标签处理信息处理过后的label标签信息 默认是没chooseFlag处理后加上的信息原创 2022-06-08 14:00:08 · 1671 阅读 · 0 评论 -
vue3+vant3 图片压缩上传
最近遇到的优化需求:图片太大,上传调用后台接口10m以上基本都会报超时用了一个插件安装npm i image-conversion --saveoryarn add image-conversion引入import * as imageConversion from 'image-conversion'orimport {compress, compressAccurately} from 'image-conversion'官方文档image-conversion -.原创 2022-05-26 11:11:10 · 1717 阅读 · 0 评论 -
vue通过传递参数动态展示图片
携带参数展示效果父组件-html <div class="page_linkbox"> <div class="link_left">主页地址</div> <div class="link_right" @click="showLinkwhere"> <img class="right_img" src="../....原创 2022-05-13 17:02:53 · 1512 阅读 · 0 评论 -
vue实现公共组件进度条
用vue写了个公共导航栏功能进度条效果如下:公共组件代码<template> <div class="status_count"> <div class="ul" v-if="opt.speedList"> <div v-for="(item,index) in opt.speedList" :key="index" data-item="it...原创 2022-04-24 17:20:46 · 1737 阅读 · 0 评论 -
vue3使用pdfjs-dist查看pdf文件
安装npm 依赖npm install --save pdfjs-distvue 子组件代码<template> <template v-for="item in pageNum" :key="item"> <canvas :id="`pdf-canvas-${item}`" class="pdf-page" /> </template> aaa</template&g原创 2022-04-22 10:12:16 · 5917 阅读 · 4 评论 -
vue 实现excel本地预览
安装npm依赖npm i xlsx -S 1、点击button 打开上传文件页面2、解析数据3、完整代码<template> <div class="excel-wrapper"> <!-- 上传按钮 --> <input class="input-file" type="file" @change="exportData" sty...原创 2022-04-20 18:55:55 · 6526 阅读 · 2 评论 -
vue3 预览 word 文件 docx #安装 npm 依赖
安装npm依赖npm i [email protected] i jszip预览本地文件<template> <div class="my-component" ref="preview1"> <input type="file" @change="preview" ref="file"> </div></template><script原创 2022-04-19 17:27:40 · 2330 阅读 · 0 评论 -
限制身份证号1-17只能输入数字18位为大写X
在做银行卡效验时限制身份证号1-17只能输入数字18位为大写X代码如下:IsCardNum(val) { var str = val.replace(/\s+/g, '') + '' str = str.toLocaleUpperCase() var reg = /[^0-9\X]/g let strArr = str.split('') let XIndex = strArr.findIndex((ele) => {...原创 2022-04-12 16:02:27 · 886 阅读 · 0 评论 -
微信小程序web-view 嵌入h5页面
web-view | 微信开放文档具体可以参考微信开放文档中web-view微信小程序wxml<web-view src="{{kocUrl}}"></web-view>jsconst app = getApp();Page({ /** * 页面的初始数据 */ data: { kocUrl: '' }, /** * 生命周期函数--监听页面加载 */原创 2022-04-12 15:54:03 · 922 阅读 · 0 评论 -
Vue3+vant3 年月日 时间选择
html <template v-if="mustInfo.idcardValidPeriod != '-1'">//这是做 是否显示及必填判断 <van-field v-model="authInfo.startDate" label-class="authTitle" readonly input-align="right" ...原创 2022-03-01 18:06:22 · 2112 阅读 · 0 评论 -
vue3上传图片解析身份证,银行卡
遇到需求需要上传身份证,或者银行卡传的时候需要传一个file 文件 在这里 我用了组件也可以用npm包pluplad(具体我没使用过)Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮 —技术博客1、html部分这里我用到了vant3的组件 链接:Vant 3 - Mobile UI Components built on Vue <div class="idcardCont" v-if="mustInfo.u...原创 2022-02-25 13:37:04 · 1998 阅读 · 0 评论 -
vue - 简单实现数据回显
简单记录自己写的数据回显,比较复杂如果有更好的方法请指正我是用判断来显示通过值来判断可否点击 //这块是判断是否显示 哪一个输入框 <template v-if="isInput"> <van-field v-model="repeatauthInfo.repeatbankNo" label="本人实名银行卡" name="本人实名银行卡2"原创 2022-01-11 19:06:36 · 13360 阅读 · 0 评论 -
vue 动态加载css本地背景图片
在css中,正常这么引入是可以显示的background: url(../assets/images/banner.png) no-repeat center;代码中看的效果如下:但是在js中引入则需要加上 require(),不然无法显示转载 2022-01-11 17:02:23 · 1370 阅读 · 0 评论 -
滚动条位置判断
//获取滚动条距离顶部位置function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = do.原创 2021-12-28 16:47:32 · 293 阅读 · 0 评论 -
vue-css /deep/ 穿透 scoped
vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。有些Sass 之类的预处理器无法正确解析>>>。可以使用/deep/操作符(>>>的别名)通过>>>穿透scoped<style scoped> 外层 >>> .van-cell(第三方组件) { 样式...原创 2021-12-21 17:55:35 · 107 阅读 · 0 评论