蜗牛~~

今天这篇文章，让你彻底学会props属性……props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。

结构： <div class="twoTable fuceng"> <div class="h_top"> <span>新建任务</span> <img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete"> </div> <div cla

直接上代码~ <el-tree :data="item.pgxzdata" show-checkbox ref="tree" highlight-current node-key="id" v-model="multipleSelection" .

goAnchorParent(selector) {//参数selector是id选择器（例如：#anchor14） document.querySelector(selector).scrollIntoView({ behavior: "smooth" }); },

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

一、在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

使用iframe标签，将html页面放入static文件夹下，通过iframe的src属性访问html页面<iframe src="../../static/test.html" frameborder="0" style="width:400px;height:400px;margin:0 auto"></iframe>就显示成功

突然接到公司需求，说客户想让我们把项目直接打包为C/S模式的类型，其实我是不太清楚这是个什么操作，最后经过调查与理解，总结出：exe文件是C/S桌面应用程序，web项目是B/S结构，服务器/客户端程序，它们是两个不同的东西因此我就开始了将vue项目打包为exe程序的艰难之路~~~~~第一步：安装electron这条路太坎坷了，安装electron的时候出现了各种问题，当我从官网准备将electron用git克隆的时候，出现连接超时，也出现该问题的宝宝可以参考这条：https://blog.

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。与vuex的区别 vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。 Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。 与公共组件的区别

elementui中树形表格切换展开不同层级。

一、安装 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" .

elementUI表格多选toggleRowSelection回显无效

方法一、props/$emit父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。1.父组件向子组件传值接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]//App.vue父组...

效果图（可拖拽）：第一步：下载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...

排查一：先看看项目中是否安装并引入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'.

效果图：第一步：去官网下载本地包https://www.tiny.cloud/get-tiny/self-hosted/（1）下载社区版就可以 上面版本比较卡下载不下来的话，就下载下面版本的（2）下载下来解压后是这样的然后进入js文件夹找到tinymce文件夹（3）将这个文件夹的所有内容，复制出来，粘贴到vue项目中的static文件夹下第二步：引入（1）在index.html中引入tinymce.js文件<scrip...

带你学会promise和async

又是一个新知识点，撸起袖子开始干！！！1、在vue中安装一个插件npm install element-resize-detector

效果（循环滚动，可切换方向）：轮播组件BaseSwiper.vue：<template> <div class="swiperBox"> <img class="imgLeft" @click="clickLeft" src="../../../assets/img/左.png" alt=""> <img class="imgRight" @click="clickRight" src="../../../a..

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.

当用户输入的时候，我们需要自动去掉输入框两边的空格， 注意，中间是能输入空格的。此时我们利用全局自定义指令实现对el-input的只去除首尾空格的需求。1、在directive文件夹下创建一个trim文件夹。2、index.js文件。

说是下载，其实是把这个链接放入浏览器地址栏，回车出现的代码，一键复制，粘贴到项目中你新建的文件里面、、、为了防止内网无法使用，咱不用cdn引入，直接下载js放入本地使用。wangeditor及css和js文件夹自己创建即可。本文讲的不是npm安装，是下载js本地引入哦~可以放入自己的静态资源文件夹下。

效果：可以对线和节点进行删除和编辑使用的插件是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页面完整代码...

一、效果：使用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..

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"> .

先看效果：点击图片按钮可调整菜单宽度伸缩后页面结构一共分为三部分，加上一个伸缩按钮，在你的项目对应的部分都加上class名。我这里定义的分别是box、left、mid、resize(按钮类名)html页面结构划分完成之后，完善一下样式（直接复制，菜单类名换成你的）/*拖拽区div样式*/.resize { cursor: col-resize; position: relative; // top: 45%; top: 400px;..

效果图：高度不写死，实时监听屏幕大小，高度动态变化第一步：首先先安装动态监听一个元素高度的插件 element-resize-detector该插件之前博客写有（可前往详细查看）vue项目中监听div的宽高变化_蜗牛~~-CSDN博客_vue 监听div宽度npm install element-resize-detector第二步：使用这个插件监听父元素高度在mounted中写入监听方式，然后填入你的页面父元素class名 mounted() { .

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。computed称为计算属性，顾名思义，计算就要返回一个计算的结果，所以，当我们要处理大量的逻辑，但是最后要取得最后的结果的时候可以用computed；简单示例：要求： <input type="text v-model="num1...

效果图：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.

插件分享：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll

很简单哦~~~~~~~用iframe标签即可实现----第一步：添加iframe标签代码 <iframe :src="this.url" class="htmlShow" frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>第二步：保存从后台获取的url地址第三步：即可完成在页面中的呈现...

今天这篇文章，让你彻底学会组件自定义事件……我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。问题一：什么是组件自定义事件呢？自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。问题二：如何实现子组件给父组件传值？（1）复习一下props父

hash路由模式打包部署到tomcat1、修改config/index.js文件下的assetsPublicPath为'./'2、修改router文件夹下index.js添加 base: ‘/文件夹名称/’ （例如：yuncheng，可以自己随意设置）3、在tomcat下webapps里面新建一个文件夹，名称是之前配置时设置的名称（yuncheng）4、将自己打包的dist文件夹的内容放进tomcat下的webapps的yuncheng文件夹下注意：2.3.4可以简化为：在...

1、定义想要处理的tree数组//在vue的data中定义一个数组，这个数组我写的是死数据，所以写的不规范，最终结果是正确的tableData: [{ id: 3, date: '2016-05-011', name: '王小虎1', type:1, address: '11', children: [{ id: 31, d.

后台传来的文件流：我的下载： download(){ var self = this axios({ method: 'get', url: "/treeKan/download?dataId="+ this.$route.query.id, responseType: 'arraybuffer', //注意这个参数必须加，不然会出现下载好的文件打开是乱码情况 }) .then(res =&.

功能：设置cookie保存时间为7天，关闭浏览器cookie不会消失，否则cookie会默认关闭浏览器自动清除的，如果设置了cookie过期时间，关闭浏览器，cookie仍被清空了，那可能是浏览器设置的原因，记得把下面按钮关闭效果：设置cookie:将用户名，密码，以及保存的天数，以及记住密码的check按钮的布尔值存入cookie //设置cookie setCookie(c_name, c_pwd, exdays, flg) { var exdate.

先看效果图：第一步：在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> &lt...

过滤可以用于前端在做列表搜索功能的时候，进行的一个筛选操作，我的需求是拿到一个三层级数组，但是只需针对第二层级进行搜索筛选，若存在则返回该内容所存在的所有层级的数据//这是我从后台拿到的数据，我只需对data里面的每个对象中的serviceList中的每一项中的name作为筛选条件，进行筛选过滤var dataNetService = { "name": "mulu", "data": [ { "clusterId": "feite