分类：Vue

2020
10-08

VUE实时监听元素距离顶部高度的操作

VUE实时监听元素距离顶部高度的操作 效果图如下所示.html<!--监听ref距离顶部高度--><divref="pronbit"><div>今日热门</div><div>今日热销</div></div>.jsmounted(){window.addEventListener('scroll',this.handleScrollx,true)},methods:{handleScrollx(){console.log('滚动高度',window.pageYOffset)console.log('距离顶部高度',this.$refs.pronbit.getBoundingClientRect().top)},}补充知识：Vue异步更新队列及$nextTick的使用问题一：什么是$next... 继续阅读 >
2020
10-08

Vue 监听元素前后变化值实例

Vue 监听元素前后变化值实例 我就废话不多说了，大家还是直接看代码吧~exportdefault{data(){return{item:''}},watch:{item(now,before){letremove=before.filter(x=>now.indexOf(x)==-1);letadd=now.filter(x=>before.indexOf(x)==-1);/*显示字符串或数组元素的增加和减少*/console.log(add,remove);}}}补充知识：Vuejs+Element监听-window.resize-el-menu响应式显示效果代码template<template><divclass="sideb... 继续阅读 >
2020
10-08

vue-cli或vue项目利用HBuilder打包成移动端app操作

vue-cli或vue项目利用HBuilder打包成移动端app操作 一、测试项目是否可以正确运行指令:npmrundev1、首先我们先建立一个vue的项目，本人用的是vue-cli随便建立的，然后运行项目二、修改路径(assetsPublicPath:‘./')1、打开我们config中的js文件，修改assetsPublicPath的路径为"./"（下图的右下角位置）2、检查下assetsRoot:path.resolve(__dirname,‘…/dist'),assetsSubDirectory:‘static',assetsPublicPath:‘./',(一般情况下是这样的)三、打包文件指令:npmrunbui... 继续阅读 >
2020
10-08

vue 组件间的通信之子组件向父组件传值的方式

vue 组件间的通信之子组件向父组件传值的方式 父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；使用步骤：定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件；准备获取数据：com-b要获取父组件data中的name属性；在<com-b:name=“name”></com-b>使用v-bind绑定name属性，红色部分为属性名称，可以随意写。在子组件定义部分里添加选项，值是个字符串数组props:[‘name']，将上边红色的属性名称写在这里；之后就可定义在子组件中使用name属性了... 继续阅读 >
2020
10-08

vue-preview动态获取图片宽高并增加旋转功能的实现

vue-preview动态获取图片宽高并增加旋转功能的实现 vue-preview是一个常用的图片查看器，微博网页版就是用的这个插件：我在项目中也用过这个插件，总体来说，还是比较满意。但是缺少一个图片旋转功能。安装使用第一步：安装npmivue-preview-S第二步：引用配置importVuePreviewfrom'vue-preview'Vue.use(VuePreview)Vue.use(preview,{mainClass:'pswp--minimal--dark',barsSize:{top:0,bottom:0},captionEl:false,fullscreenEl:false,shareEl:false,bgOpacity:... 继续阅读 >
2020
10-08

解决vue项目获取dom元素宽高总是不准确问题

dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确：this.$refs.editor[0].offsetHeight;原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；解决方法：利用Vue.nectTick(callback)this.$nextTick(()=>{this.$refs.editor[0].offsetHeight;})Vue.nectTick()是在下次DOM更新循环结束之后执行延迟回调补充知识：vue获取指定元素的高度宽度等（使用vue中的ref获取到的是dom元素高度或者宽度）使用vue的... 继续阅读 >
2020
10-08

Vue实现input宽度随文字长度自适应操作

Vue实现input宽度随文字长度自适应操作 业务需求，输入文字，后面的元要紧随其后，奈何input默认是有宽度，我想要达到，输入文字，动态改变input的宽度,试了很多方法，目前自己琢磨一种，有遇到问题的可以参考一下，直接贴代码<divclass="textcontain"><inputtype="text"v-model.number="item.cardComboMoney"maxlength="5"placeholder="设定数值"oninput="value=value.replace(/^(0+)|[^\d]+/g,'')":disabled='disabled'... 继续阅读 >
2020
10-08

在vue中实现给每个页面顶部设置title

在vue中实现给每个页面顶部设置title 实现思路很简单：就是利用路由的导购守卫beforeEach在每次页面跳转前更改对应的title1.首先在route里面给每个路由加上meta属性2.在main.js里面加上导航守卫router.beforeEach((to,form,next)=>{window.document.title=to.meta.title==undefined?'默认标题':to.meta.titlenext()})补充知识：vueelementtab标签页文本溢出时，鼠标上去Tooltip文字提示重点：el-tooltip标签内加slot=“label”<el-tooltipclass="item-ta... 继续阅读 >
2020
10-08

vue实现移动端项目多行文本溢出省略

vue实现移动端项目多行文本溢出省略 多行文本溢出省略在做微信公众号开发时,有个需求是这样的找到了一个方法,<div>2323文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。</div><!--上面这样写是无效的--><!--... 继续阅读 >
2020
10-08

vue 实现超长文本截取,悬浮框提示

vue超长文本截取，悬浮框提示样式：<style>.overflow-table.ivu-table-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}</style>table：<Tableborder:columns="comDataColunms":data="comDataList":loading="tableDataLoading"class="overflow-tabletable-context"></Table>主要代码：{title:'统一信用代码',key:'ucCode',render:(h,params)=>{returnh('span',{domProps:{titl... 继续阅读 >
2020
10-08

vue和H5 draggable实现拖拽并替换效果

前言公司项目需要做拖拽替换效果，本人用的vue框架。在网上找了很多资料都是用的Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果，我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。JQ有实现拖拽的插件，我下载过一个插件并看过源码，大致原理是给目标元素设置定位属性，通过监听鼠标mousedown，mouseup事件，再计算鼠标位置变化，然后给元素样式设置偏移值来实现拖拽效果的。H5提... 继续阅读 >
2020
10-08

vue同个按钮控制展开和折叠同个事件操作

我就废话不多说了，大家还是直接看代码吧~<el-button:icon="!moreshow?'el-icon-arrow-down':'el-icon-arrow-up'"@click="getmoreshow">{{!moreshow?更多:隐藏}}</el-button>data(){return{moreshow:false,count:1,}}mounted(){this.getmoreshow()//避免点击两次才生效},methods:{getmoreshow(){if(this.count%2==0){this.moreshow=true}else{this.moreshow=false}this.count++},}补充... 继续阅读 >
2020
10-08

vue-列表下详情的展开与折叠案例

vue-列表下详情的展开与折叠案例 如下所示：功能描述1、默认折叠，点击时展示全部数据2、点击A项，A展开，之后有两种情况：①再次点击A，A折叠；②点击其他项，如B，这时B展开，A折叠解决方式1、给展开折叠图标添加一个样式，显示成动画效果<divclass="arrow":class="{'open':showDetail===index}"></div>.arrow{positionabsolutewidth:0.6rem;height:0.3rem;top2.0remright0.8rembackgroundurl(../../../assets/images/icon_up.png)no-repeatba... 继续阅读 >
2020
10-08

Vue 解决通过this.$refs来获取DOM或者组件报错问题

1.关于this.$refs的使用场景如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素<pref="p">hello</p><!--this.$refs.p指向该DOM元素-->如果ref属性加在组件上，那么this.$refs.name指向该组件实例<child-componentref="child"></child-component><!--this.$refs.child指向该组件-->2.为什么有时候通过this.$refs.name来获取会报错？一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来获取内容就会... 继续阅读 >
2020
10-08

vue 组件之间事件触发($emit)与event Bus($on)的用法说明

vue 组件之间事件触发($emit)与event Bus($on)的用法说明 组件之间事件触发之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。新增按钮组件：操作按钮组合组件：此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。此时就需要用到组件间的事件触发。父子组件之间事件触发可以使用$emit$emit... 继续阅读 >