分类：VUE

2020
10-10

vue 实现一个简单的全局调用弹窗案例

vue 实现一个简单的全局调用弹窗案例 1.实现效果图2.第一步，新建一个.vue文件定义一个弹框的基本模板style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个vue文件里，样式是用less写的，需要你的项目引入less注意：我这里的组件右上角关闭是一张图片需要换成你自己本地的路径<template><divid="tip_alertModal"><divclass="t-alert-mask"></div><divclass="t-alert-container"><divclass="t-alert-title"><span>{{title}}</s... 继续阅读 >
2020
10-10

vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作 前言在v-for循环语句上，定义一个点击事件传入两个参数（当行数据、当前事件对象），如下代码片段，当前事件对象必须加上‘$'符号<template><div><ul><liv-for="(item,index)inarrData":key="index"@click="operate(item,$event)">{{item.title}}</li></ul></div></template><script>exportdefault{data(){return{arrData:[{id:1,title:'第一条数据'},{id:2,... 继续阅读 >
2020
10-10

Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前) 在methods中创建方法showtime，传入要跟当前时间要对比的时间showtime(time){letdate=typeoftime==="number"?newDate(time):newDate((time||"").replace(/-/g,"/"));letdiff=(newDate().getTime()-date.getTime())/1000;letdayDiff=Math.floor(diff/86400);letisValidDate=Object.prototype.toString.call(date)==="[objectDate]"&&!isNaN(date.getTime(... 继续阅读 >
2020
10-10

vue 导出文件,携带请求头token操作

vue 导出文件,携带请求头token操作 前言本文并不能直接复制到本地看效果，仅提供代码参考1.使用axios的方式携带请求头token2.设置响应的数据类型responseType:"blob"3.请求成功，返回二进制文件的数据回来4.请求失败，返回json5.示例代码<template><div><el-buttontype="primary"size="small":loading="btnLoading"@click="exportFile">导出</el-button></div></template><script>importaxiosfrom"axios";exportdefault{data(){return{btnLoad... 继续阅读 >
2020
10-10

vue radio单选框,获取当前项(每一项)的value值操作

vue radio单选框,获取当前项(每一项)的value值操作 前言本文使用了lable关联选中，实际使用中如果不需要，直接将循环语句v-for写在input标签上就可以1、使用v-for循环的radio单选框01）需要注意的是，这是使用的是change事件，而不是click点击事件<template><div><labelv-for="(item,index)inradioData":key="index"><inputtype="radio"v-model="radioVal":value="item.value"@change="getRadioVal"/>{{item.value}}</label></div></t... 继续阅读 >
2020
10-10

vue循环中点击选中再点击取消(单选)的实现

vue循环中点击选中再点击取消(单选)的实现 没有展开时点击展开之后<divclass="flashread_item_box_time"><spanclass="moment_time">9分钟前</span><divclass="flashread_item_box_zan"><spanclass="flashread_item_box_item"><iclass="iconfonticon-changyongtubiao-mianxing-"></i>10</span><spanclass="flashread_item_box_item"@click="tocomment(index)"><iclass="iconfonticon-pinglun":class="{showcolor:currentTab==index}">... 继续阅读 >
2020
10-10

vue使用echarts实现水平柱形图实例

vue使用echarts实现水平柱形图实例 文件结构：testData.js文件constdtuEdition={name:'有方有线',number:60,proportion:40,edition:{'有方有线V1.0.0':20,'有方有线V1.2.0':15,'有方有线V2.0.1':10,'有方有线V3.0.0':8,'有方有线V3.2.0':5,'有方有线V3.4.0':4,'有方有线V4.0.0':3,'有方有线V4.0.2':2,'有方有线V4.0.3':1}}exportdefault{namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名dtuEdition}dtuDi... 继续阅读 >
2020
10-10

在vue中实现清除echarts上次保留的数据(亲测有效)

在vue中实现清除echarts上次保留的数据(亲测有效) 因为我是将echarts封装好后，父组件只要传递值就可以进行渲染。但是点击多次数据请求的时候echarts会多次渲染。如果试过clear()与setOption(this.options,true)没用之后。可以试一下下面的方法。首先是在父组件中对数据进行请求，在赋值之前，先清空。data里定义的三组echarts数据在axios发送请求后先清空再赋值。补充知识：vue.js使用vue-echarts给柱形图绑定点击事件我就废话不多说了，大家还是直接看代码吧~<template><divc... 继续阅读 >
2020
10-10

vue 项目引入echarts 添加点击事件操作

vue 项目引入echarts 添加点击事件操作 main.js中importechartsfrom'echarts'Vue.prototype.$echarts=echartsvue文件中_this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar'))_this.calendarChart.on('click',function(param){console.log(param)})_this.calendarChart.setOption(_this.scatterOption)console结果补充知识：vue根据路由守卫，判断用户权限，进行路由跳转判断用户权限，可以说是每一个项目都会用到的，... 继续阅读 >
2020
10-10

Vue this.$router.push(参数)实现页面跳转操作

很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用this.$router.push(location)来修改url，完成跳转。push后面可以是对象，也可以是字符串：//字符串this.$router.push('/home/first')//对象this.$router.push({path:'/home/first'})//命名的路由this.$router.push({name:'home',params:{userId:wise}})跳转页面并传递参数的方法：1.Params由于动态路由也是传递params的，所以在this... 继续阅读 >
2020
10-10

Vue页面跳转传递参数及接收方式

Vue页面跳转传递参数及接收方式 最近接触了vue项目，这里记录一下vue跳转到下一页面携带参数的两种方式。典型应用场景：列表页跳转到详情页一、配置路由文件路径：src/router/config.phpimportVuefrom'vue'importRouterfrom'vue-router'importclassifyfrom'.././components/classify/classify.vue'importclassifyChildfrom'.././components/classify/classifyChild.vue'exportdefaultnewRouter({mode:'history',routes:[{path:'/clas... 继续阅读 >
2020
10-10

vue实现点击按钮“查看详情”弹窗展示详情列表操作

html：<template><div><Modalv-model="classStatus"width="900"title="详情：":styles="{top:'80px'}"><Tablestripeclass="task-table":columns="columnsName4":data="taskDetailList"></Table></Modal><div@click="showtaskDetail()">点击弹窗按钮</div></div></template>js：<script>importhttpfrom'@/assets/http.js'exportdefault{name:'xx',data(){return{columnsName4:[{title:'序号'... 继续阅读 >
2020
10-10

vue 获取元素额外生成的data-v-xxx操作

vue 获取元素额外生成的data-v-xxx操作 需求描述：由于样式中使用了scoped，所以编译后标签对中生成data-v-xxx属性。在【.dialog_content】的div中动态添加元素节点p和span时，也需要给元素节点添加data-v-xxx属性。由于data-v-xxx属性是会变化的，那如何获取它，添加在动态添加的元素节点中呢？本博客将给出解决方案。【解决方法】获取属性名【document.getElementById("dialog_submit").attributes[0].name】设置属性【nodeP.setAttribute(dataV,"")】varnodeP=do... 继续阅读 >
2020
10-10

vue移动端写的拖拽功能示例代码

vue移动端写的拖拽功能示例代码 相关知识点touchstart当在屏幕上按下手指时触发touchmove当在屏幕上移动手指时触发touchend当在屏幕上抬起手指时触发mousedownmousemovemouseup对应的是PC端的事件touchcancel当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。效果图实现步骤html总结了一下评论，好像发现大家都碰到了滑动的问题。就在这里提醒一下吧。可... 继续阅读 >
2020
10-10

在Vue中获取自定义属性方法:data-id的实例

获取自定义属性的方法：第一步：首先在标签上绑定上@click="getDateId（item.id）",并将属性值传到绑定的事件里面第二步：在标签上继续绑定：date-id="item.id"属性第三步：在<script>里面的属性methods里面添写上事件函数getDateId(id){}在事件函数里面获取id的值即可<template><h2class="leftt-title"@click='getDataId(item.id)':data-id="item.id"></h2></template><script>methods:{getDataId(id){cons... 继续阅读 >