suoh's Blog
My life is a straight line,turning just for you.
展开
-
elementUI表格实现可编辑和增加行功能--直接复制即可
结构: <div class="twoTable fuceng"> <div class="h_top"> <span>新建任务</span> <img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete"> </div> <div cla原创 2020-07-16 17:24:37 · 10897 阅读 · 2 评论 -
获取elementUI的树形组件复选框所选的所有节点id
直接上代码~ <el-tree :data="item.pgxzdata" show-checkbox ref="tree" highlight-current node-key="id" v-model="multipleSelection" .原创 2021-04-28 19:02:59 · 1913 阅读 · 0 评论 -
vue中点击按钮平滑滚动到页面某个div位置
goAnchorParent(selector) {//参数selector是id选择器(例如:#anchor14) document.querySelector(selector).scrollIntoView({ behavior: "smooth" }); },原创 2022-04-27 11:10:06 · 1372 阅读 · 1 评论 -
vue实现斑马线进度条
vue实现斑马线进度条原创 2023-03-07 11:09:52 · 662 阅读 · 2 评论 -
VSCode创建vue模板(快捷方便)
1、ctrl+shift+p快捷键召唤控制台,输入snippets并回车2、这时会出来vue.json文件3、在json文件中编写你要定义的模板{ /* // Place your snippets for Vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the原创 2021-09-02 14:57:51 · 5009 阅读 · 2 评论 -
vue中使用自定义指令实现按钮权限展示问题
一、在src下新建directive文件夹二、定义index.js文件,在vue上注入自定义指令import hasBtn from './permission/hasBtn'const install = function (Vue) { Vue.directive('hasBtn', hasBtn)}if (window.Vue) { window['hasBtn'] = hasBtn Vue.use(install); // eslint-d原创 2022-04-28 17:34:20 · 1733 阅读 · 0 评论 -
vue组件中插入html页面
使用iframe标签,将html页面放入static文件夹下,通过iframe的src属性访问html页面<iframe src="../../static/test.html" frameborder="0" style="width:400px;height:400px;margin:0 auto"></iframe>就显示成功原创 2021-12-09 11:13:56 · 3119 阅读 · 0 评论 -
vue中组件的props属性(详)
今天这篇文章,让你彻底学会props属性……props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。原创 2021-10-28 11:20:54 · 178350 阅读 · 51 评论 -
vue+electron将项目打包为exe程序---成功跨过所有坑,完美打包
突然接到公司需求,说客户想让我们把项目直接打包为C/S模式的类型,其实我是不太清楚这是个什么操作,最后经过调查与理解,总结出:exe文件是C/S桌面应用程序,web项目是B/S结构,服务器/客户端程序,它们是两个不同的东西因此我就开始了将vue项目打包为exe程序的艰难之路~~~~~第一步:安装electron这条路太坎坷了,安装electron的时候出现了各种问题,当我从官网准备将electron用git克隆的时候,出现连接超时,也出现该问题的宝宝可以参考这条:https://blog.原创 2020-07-15 16:44:57 · 7945 阅读 · 15 评论 -
vue中mixin的混入使用--超详解
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。与vuex的区别 vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。 Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。 与公共组件的区别原创 2020-07-14 11:18:10 · 3996 阅读 · 1 评论 -
elementui中树形表格切换展开不同层级
elementui中树形表格切换展开不同层级。原创 2022-08-19 16:25:49 · 2380 阅读 · 0 评论 -
vue中实现分片大文件上传
一、安装 spark-md5npm i spark-md5 --save二、上传大文件组件(全代码)复制粘贴就能用<template> <div class="myDiv"> <el-upload class="upload-demo" action="#" :on-change="uploadFile" :show-file-list="true" :file-list="fileList" :auto-upload="false" .原创 2022-04-27 17:28:58 · 12893 阅读 · 25 评论 -
elementUI表格多选toggleRowSelection回显无效
elementUI表格多选toggleRowSelection回显无效原创 2022-07-14 17:24:30 · 3331 阅读 · 1 评论 -
Vue组件间的传值
方法一、props/$emit父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。1.父组件向子组件传值接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]//App.vue父组...原创 2019-08-25 21:24:26 · 268 阅读 · 0 评论 -
vue中使用go.js实现ER图(节点下拉展示)并去除插件水印
效果图(可拖拽):第一步:下载go.js文件直接通过Go.js(直接右击保存链接到本地)第二步:引入(1)将下载好的js文件放入vue项目中的static文件夹下(2)在index.html中引入 <script src="/static/go.js"></script>第三步:使用test.vue<!-- @description: @date:Created in 2021/12/9 18:51 @modif...原创 2021-12-15 11:18:26 · 5025 阅读 · 3 评论 -
解决vue2.x在ie浏览器打开空白问题
排查一:先看看项目中是否安装并引入babel-polyfill这个东西,(Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码)。引入则跳过vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的引入方法:(1)安装 npm install --save babel-polyfill(2)修改webpack.base.conf.js app: ['babel-polyfill'.原创 2021-12-06 17:01:14 · 5844 阅读 · 2 评论 -
vue实现本地使用tinymce富文本编辑器
效果图:第一步:去官网下载本地包https://www.tiny.cloud/get-tiny/self-hosted/(1)下载社区版就可以 上面版本比较卡下载不下来的话,就下载下面版本的(2)下载下来解压后是这样的然后进入js文件夹找到tinymce文件夹(3)将这个文件夹的所有内容,复制出来,粘贴到vue项目中的static文件夹下第二步:引入(1)在index.html中引入tinymce.js文件<scrip...原创 2021-12-14 16:06:16 · 7053 阅读 · 7 评论 -
promise和async用法及区别(详解)
带你学会promise和async原创 2023-01-09 09:40:22 · 7019 阅读 · 0 评论 -
vue项目中监听div的宽高变化
又是一个新知识点,撸起袖子开始干!!!1、在vue中安装一个插件npm install element-resize-detector原创 2021-04-27 10:54:59 · 13316 阅读 · 0 评论 -
this.$route与this.$router的区别
原创 2019-07-26 10:04:48 · 270 阅读 · 0 评论 -
vue实现循环滚动图片(多图片轮播)
效果(循环滚动,可切换方向):轮播组件BaseSwiper.vue:<template> <div class="swiperBox"> <img class="imgLeft" @click="clickLeft" src="../../../assets/img/左.png" alt=""> <img class="imgRight" @click="clickRight" src="../../../a..原创 2021-11-16 16:48:57 · 14571 阅读 · 13 评论 -
vue实现网页截图
1、安装html2Canvasnpm install html2canvas --save2、在需要的vue组件中引入import html2canvas from "html2canvas";3、编写一个截图按钮<el-button class="button-dalod" size="mini" title="生成图片" @click="toImage()" icon="el-icon-download"></el-button>4、调用函数toI.原创 2021-11-16 17:11:37 · 11499 阅读 · 4 评论 -
vue利用自定义指令全局去除el-input框前后空格
当用户输入的时候,我们需要自动去掉输入框两边的空格, 注意,中间是能输入空格的。此时我们利用全局自定义指令实现对el-input的只去除首尾空格的需求。1、在directive文件夹下创建一个trim文件夹。2、index.js文件。原创 2023-03-13 11:08:00 · 6093 阅读 · 0 评论 -
vue2中使用wangEditor(JS引入)
说是下载,其实是把这个链接放入浏览器地址栏,回车出现的代码,一键复制,粘贴到项目中你新建的文件里面、、、为了防止内网无法使用,咱不用cdn引入,直接下载js放入本地使用。wangeditor及css和js文件夹自己创建即可。本文讲的不是npm安装,是下载js本地引入哦~可以放入自己的静态资源文件夹下。原创 2023-08-29 10:36:06 · 1382 阅读 · 0 评论 -
vue实现对指定节点进行拖拽成流程图
效果:可以对线和节点进行删除和编辑使用的插件是Vue super flow:https://caohuatao.github.io/话不多说,上代码:1、安装插件npm install vue-super-flow2、在main.js中引入import SuperFlow from 'vue-super-flow'import 'vue-super-flow/lib/index.css'Vue.use(SuperFlow) 3、vue页面完整代码...原创 2021-08-16 17:37:10 · 5316 阅读 · 13 评论 -
vue中使用video标签插入视频并自动播放
一、效果:使用video标签的好处是,视频周围没有黑边,观看效果好看二、html: <div v-for="(item,i) in vedioList" :key="i"> <video muted="muted" :id="startvideo+i" class="video" :src="item.path" type="video/mp4" poster="false..原创 2021-11-12 14:21:30 · 23028 阅读 · 4 评论 -
vue自定义指令(详解)
vue自定义指令,核心就是需要自己亲手去操作DOM而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性,所以自定义指令,就是自己亲手对原生操作dom进行了一次封装局部指令需求一:定义一个v-big指令,让它和v-text功能类似,把绑定的值放大10倍我们现在自定义一个big指令,展示放大10倍的num值,让v-big指令和v-text指令作用一样<template> <div class="myDiv"> .原创 2022-02-17 17:28:14 · 3295 阅读 · 4 评论 -
vue实现伸缩菜单功能
先看效果:点击图片按钮可调整菜单宽度伸缩后页面结构一共分为三部分,加上一个伸缩按钮,在你的项目对应的部分都加上class名。我这里定义的分别是box、left、mid、resize(按钮类名)html页面结构划分完成之后,完善一下样式(直接复制,菜单类名换成你的)/*拖拽区div样式*/.resize { cursor: col-resize; position: relative; // top: 45%; top: 400px;..原创 2021-12-06 17:59:28 · 3101 阅读 · 0 评论 -
vue+vuex实现自适应elementUI中table高度
效果图:高度不写死,实时监听屏幕大小,高度动态变化第一步:首先先安装动态监听一个元素高度的插件 element-resize-detector该插件之前博客写有(可前往详细查看)vue项目中监听div的宽高变化_蜗牛~~-CSDN博客_vue 监听div宽度npm install element-resize-detector第二步:使用这个插件监听父元素高度在mounted中写入监听方式,然后填入你的页面父元素class名 mounted() { .原创 2022-01-11 09:48:51 · 2334 阅读 · 2 评论 -
vue中computed和methods的区别
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed;简单示例:要求: <input type="text v-model="num1...原创 2019-07-26 15:01:16 · 513 阅读 · 0 评论 -
vue中使用svg画路径图
效果图:html <svg class="svgClass" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1100px" height="700px"> <!-- 标记点之间的路径 --> <path v-for="(item,i) in paths" :d="item.path_d" fill="none" stroke-width="2" st.原创 2022-03-31 15:57:20 · 4295 阅读 · 2 评论 -
vue加载数据量过多页面卡顿问题(不看会后悔)
插件分享:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll原创 2021-08-11 16:52:46 · 6966 阅读 · 1 评论 -
vue中如何解析后台返回的html路径并展示html内容
很简单哦~~~~~~~用iframe标签即可实现----第一步:添加iframe标签代码 <iframe :src="this.url" class="htmlShow" frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>第二步:保存从后台获取的url地址第三步:即可完成在页面中的呈现...原创 2021-03-16 10:44:42 · 5731 阅读 · 3 评论 -
vue中组件的自定义事件(详)
今天这篇文章,让你彻底学会组件自定义事件……我们在vue中用的click、keyup……等事件,这些属于内置事件,也就是js自带的事件。问题一:什么是组件自定义事件呢?自定义事件,顾名思义就是自己打造的事件,包含事件名,事件回调等,定义好之后去给组件使用。而内置事件是给html元素用的,比如span、div等标签,不是组件。也是一种组件间的通信方式,适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。问题二:如何实现子组件给父组件传值?(1)复习一下props父原创 2021-11-01 14:52:07 · 18884 阅读 · 19 评论 -
vue项目打包部署到tomcat(详细)
hash路由模式打包部署到tomcat1、修改config/index.js文件下的assetsPublicPath为'./'2、修改router文件夹下index.js添加 base: ‘/文件夹名称/’ (例如:yuncheng,可以自己随意设置)3、在tomcat下webapps里面新建一个文件夹,名称是之前配置时设置的名称(yuncheng)4、将自己打包的dist文件夹的内容放进tomcat下的webapps的yuncheng文件夹下注意:2.3.4可以简化为:在...原创 2021-06-21 16:59:28 · 5785 阅读 · 1 评论 -
vue中使用js获取树形数据的所有父节点
1、定义想要处理的tree数组//在vue的data中定义一个数组,这个数组我写的是死数据,所以写的不规范,最终结果是正确的tableData: [{ id: 3, date: '2016-05-011', name: '王小虎1', type:1, address: '11', children: [{ id: 31, d.原创 2020-06-30 16:03:33 · 4689 阅读 · 2 评论 -
vue解析后台传来的文件流实现文件下载功能并兼容ie
后台传来的文件流:我的下载: download(){ var self = this axios({ method: 'get', url: "/treeKan/download?dataId="+ this.$route.query.id, responseType: 'arraybuffer', //注意这个参数必须加,不然会出现下载好的文件打开是乱码情况 }) .then(res =&.原创 2021-03-17 14:59:06 · 3250 阅读 · 9 评论 -
vue中使用cookie实现登录记住密码功能
功能:设置cookie保存时间为7天,关闭浏览器cookie不会消失,否则cookie会默认关闭浏览器自动清除的,如果设置了cookie过期时间,关闭浏览器,cookie仍被清空了,那可能是浏览器设置的原因,记得把下面按钮关闭效果:设置cookie:将用户名,密码,以及保存的天数,以及记住密码的check按钮的布尔值存入cookie //设置cookie setCookie(c_name, c_pwd, exdays, flg) { var exdate.原创 2021-07-15 15:51:43 · 2049 阅读 · 0 评论 -
vue中使用echarts-liquidfill实现水波图
先看效果图:第一步:在package.json中添加依赖 "echarts": "^4.4.0", "echarts-liquidfill": "^2.0.5",然后 npm i 注意:先安装低版本的echarts-liquidfill,之前试了3.0以上的版本会报错,echarts版本可随意第二步:在main.js中引入import 'echarts-liquidfill'第三步:使用html:<div> <...原创 2021-05-06 18:40:51 · 4211 阅读 · 5 评论 -
js过滤多维数组数据
过滤可以用于前端在做列表搜索功能的时候,进行的一个筛选操作,我的需求是拿到一个三层级数组,但是只需针对第二层级进行搜索筛选,若存在则返回该内容所存在的所有层级的数据//这是我从后台拿到的数据,我只需对data里面的每个对象中的serviceList中的每一项中的name作为筛选条件,进行筛选过滤var dataNetService = { "name": "mulu", "data": [ { "clusterId": "feite原创 2020-11-26 17:56:28 · 5369 阅读 · 2 评论