![](https://img-blog.csdnimg.cn/d95acab9241540179fba635c257518fe.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
分享Vue相关开发实战案例
z.week
技术驱动创新
展开
-
Vue使用有赞ImagePreview(图片预览)遇到的问题
首先说下有赞ImagePreview的使用有赞官方文档:https://youzan.github.io/vant/#/zh-CN/image-preview先上个预览效果图问题点:如果图片预览弹框没有隐藏的话,在路由切换的时候也会一直显示如图,路由已切换:解决方案:beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩beforeRouteLeave ...原创 2019-08-22 09:23:05 · 19552 阅读 · 9 评论 -
一行代码实现「远程搜索」匹配搜索关键字,实时高亮显示
一行代码实现「远程搜索」匹配搜索关键字,实时高亮显示原创 2021-12-21 10:19:49 · 480 阅读 · 1 评论 -
Vue3.0 — element-plus 表单嵌套表格实现动态表单验证【实战】
我想有不少小伙伴都有遇到过表单嵌套表格,那么在这种情况下怎么实现动态验证呢?(即表单项可以动态添加/删除)效果图如下表格有添加和删除按钮,点击提交进行表单验证element官方有给出表单动态验证的方法,但是实际上大多数项目的需求无法满足,所以需要在其基础上进行修改首先data格式必须是对象包裹数组forms: { tableData: []}然后表单绑定form数据<el-form ref="forms" :model="forms">表格绑定tableData数据原创 2021-04-10 20:00:36 · 13331 阅读 · 11 评论 -
Vue 修改data数据后视图没同步更新的解决方案
导致视图不同步更新的原因是因为对象数据嵌套太深,导致vue监听不到数据变化,render函数不会自动更新解决方案一:使用this.$set()方法重置属性语法:this.$set(object, key, value)this.$set(this.labels[index], 'select', !this.labels[index].select)如果还搞不定它就用下面的方法解决方案二:数据修改后调用this.$forceUpdate()强制更新视图this.labels[index].原创 2021-03-25 18:40:06 · 2187 阅读 · 1 评论 -
Vue3.0 使用print打印功能(兼容vue3.0)
npm上没找到兼容vue3.0的print打印功能,于是找到了兼容vue2.0版本的print,在此基础上修改,兼容3.0现已将修改后的兼容版本上传到了npm,可直接安装使用npm i print-vue3.0 --save原创 2021-03-24 16:38:32 · 3394 阅读 · 8 评论 -
Vue filter 实现文章更新日期--时间戳
Vue.filter('formatTime', function(time) { const d = new Date(time); const now = Date.now(); const diff = (now - d) / 1000; if (diff < 30) { return "刚刚"; } else if (diff < 3600) { return Math.ceil(diff / 60) + "分钟前"; } else if (diff < 360原创 2021-03-19 11:17:45 · 152 阅读 · 0 评论 -
记录:子组件相互嵌套导致不渲染的解决方案
简单解释下嵌套场景:A组件中嵌套了B组件B组件中嵌套了A组件C组件也嵌套了A组件或者B组件类似这种循环相互嵌套的组件(很少有这么狗需求了吧,建议项目中不要这么嵌套)这种嵌套方式会导致 比如B组件在A组件可以正常渲染,然而在C组件不渲染经过一番调试,将组件注册到了全局下,得以解决,将此记录下来如果小伙伴们也遇到了类似问题那么可以将这些组件注册到全局可以解决这个问题...原创 2021-03-11 17:26:38 · 657 阅读 · 0 评论 -
补充:(方案二)vue路由hash模式(带#)微信公众号首次授权后ios总是跳首页的问题
解决方案一 请看我另一篇文章 方案一利用 .html 文件作为中转页面进行路由重定向该页面在 static 文件夹下(vue打包时不会被编译),并只做 js 处理:截取参数解码——> 跳转页面<script> let url = location.href.split('?') let pars = url[1].split('&') let data = {} pars.forEach((n, i) => { let p =原创 2021-02-25 11:41:19 · 1155 阅读 · 0 评论 -
vue2.x vue3.x ECharts中国地图散点图,含China.js文件以及中国地图JSON文件
因公司项目需求,需要实现中国地图数据散点分布,如下图按照ECharts官方文档给出的示例,并没有单独的中国地图,需要自己去找配置文档修改配置,达到自己想要的结果实现这一模块需要有china.js这个关键的文件进行处理,否则会报错意思是 [地图中国不存在。必须提供地图的GeoJSON。]因此还需要有中国地图的JSON文件(这文件可不好找,ECharts官方不提供下载)中国地图GeoJSON下载链接以下是china.js文件的代码(function (root, factory) { if原创 2021-01-20 15:22:50 · 3235 阅读 · 0 评论 -
vue 简单的tab切换滑动效果
实现一个简单的滑动效果:代码逻辑比较简单,利用css的transform和transition属性实现简单的tab切换效果贴上代码,仅供参考:html部分:<template> <div class="container"> <div class="flex_c"> <p style="margin-right:20px;" @click="tab('0')">切换</p>原创 2020-08-14 17:43:12 · 3356 阅读 · 4 评论 -
Vue上拉框显示隐藏动画简单demo
css简单布局.picker { height: 300px; background: #fff; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 2020; overflow-y: scroll; box-shadow: 0 0 12px 0 #f4f4f...原创 2020-03-03 11:16:29 · 924 阅读 · 0 评论 -
父子组件与兄弟组件之间的通信
1、父子组件通信1.1 父传子 ----------------------------------------------------------父组件传值到子组件使用 props父组件代码:<template> <div> <child :msg="parentMsg"></child> </div...原创 2019-12-27 13:40:50 · 236 阅读 · 1 评论 -
electron将vue项目打包成exe桌面应用流程及可能出现的问题
近期项目需求,把网页(基于vue)打包成exe桌面应用,在网上找到了electron;这里说说我对electron-builder的使用心得electron打包exe程序主要有两种方法:1、electron-packager:初学者入门demo传送门2、electron-builder:稍微复杂一丢丢,需要配置文件#######先将vue项目打包 npm run build 得到dis...原创 2019-11-13 17:49:16 · 2409 阅读 · 1 评论 -
vue路由history模式刷新页面一片空白,也不报错(解决方案)
如果项目不在根目录下,路由需添加配置(base)router/index.jsmode: 'history',base: '/h5/',config/index.jsbuildassetsPublicPath: '/h5/',后台配置代码:引用链接END....原创 2019-11-07 17:14:02 · 9817 阅读 · 1 评论 -
vue路由hash模式(带#)微信公众号首次授权后ios总是跳首页的问题
ios系统url上#后面的信息不会解析,会被忽略掉比如url:www.demo.com/dist/index.html#/detail?id=10直解析到www.demo.com/dist/index.html,所以跳转到首页解决方案:在index页面添加如下代码 beforeCreate() { window.location.href = window.locat...原创 2019-11-07 17:03:07 · 2396 阅读 · 0 评论 -
vue项目pc端使用flexible适配,字体显小问题
安装 npm i lib-flexible -S安装 npm i px2rem-loader -D在main.js引入 import ‘lib-flexible’build/utils.js修改配置//utils.jsconst cssLoader = { loader: 'css-loader', options: { sourceMap: options.sour...原创 2019-10-22 17:41:03 · 2596 阅读 · 2 评论 -
vue项目自定义滚动指令控制按钮显示隐藏
在vue项目中,有些页面需要toTop的按钮(滚到顶部),因此在页面中需要用到滚动事件,但是如果很多页面都需要用到这个按钮,就要在这些页面中都加上滚动事件,会导致页面代码臃肿,不便维护。这里使用vue自定义指令封装一个全局的滚动事件,在需要的页面引用组件,加上指令即可。下面上代码:1、首先封装一个toTop的按钮组件(默认显示)<template> <div id...原创 2019-09-05 14:10:12 · 1947 阅读 · 1 评论 -
Vue定时器报“timeout.close is not a function”的问题
今天在项目中用到定时器,发现个问题当vue清除定时器时发现报错解决方案:加上window前缀无报错信息原创 2019-08-21 09:04:16 · 1662 阅读 · 0 评论 -
vue父组件异步传递props值,子组件接收不到的问题
父组件异步请求数据之后传值给子组件,子组件接收不到贴上父组件代码图:子组件代码图:打印结果:父组件异步请求数据回来在传到子组件,子组件无法接收,打印的依然是默认值。这里有两种解决思路:第一种:子组件使用watch监听但是watch监听也会有接收不到值的情况,因为要修改props的favoriteValue的值,favoriteValue接收不到的话就无法修改,所以这里同时...原创 2019-08-07 09:31:32 · 17148 阅读 · 6 评论