![](https://img-blog.csdnimg.cn/20210115135251742.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 2
以实战为索,逐步深入Vue 2各个环节,掌握Vue 2项目所遇到的问题
阳光的男夹克
心软的人没遇到 小火慢炖的粥掺了水
展开
-
Vue Element 表格实现拖拽排序
1、安装sortablejs2、在需要的页面引入3、具体使用,注意的是element table务必指定row-key,且row-key必须是唯一的,如 id,不然会出现排序不对的情况原创 2022-06-28 16:09:43 · 4780 阅读 · 0 评论 -
echarts 显示不清晰问题
echarts文字显示不清晰问题原创 2022-06-11 17:20:23 · 1260 阅读 · 5 评论 -
Element Tree 点击节点获取所有的父节点
基础布局,添加 @node-click=“handleNodeClick”<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>handleNodeClick(node) { // 最终的数据 this.breadList = [] // 获取点击当节点的dom的信息 let selectNode = this.$refs.tree.getNode原创 2022-05-12 16:31:50 · 3994 阅读 · 3 评论 -
Vue 如何继承一个组件
以 Element UI 中的 el-table-column 举例,创建 js 文件,引入 Element,使用 extends 继承import { TableColumn } from 'element-ui';export default { name: 'TableColumn', extends: TableColumn};原创 2022-03-11 15:51:52 · 2589 阅读 · 0 评论 -
Vue 把Llist 数据转化为 Tree 数据
创建 js 文件treeList,添加以下方法/** * 将 list 数组转化为 treeList * @param {Array} dataList list数据 * @param {string} id 节点key值 * @param {string} pId 父节点key值 * @returns {Array} treeList */export const listToTree = (dataList, id, pId) => { const data = JSON.原创 2022-03-07 10:18:49 · 1215 阅读 · 0 评论 -
vue 中使用海康威视视频插件
创建容器<template> <div class="right" ref="playWndBox"> <!-- 视频数据站位 --> <div id="playWnd" class="playWnd" :style="{height: playWndHeight + 'px',width: playWndWidth + 'px'}"></div> </div></template>插件所需原创 2022-02-24 11:10:34 · 7397 阅读 · 8 评论 -
List 数据处理为 Tree 数据(动态表单)
第一步把 Tree 数据的顶级数据先找出来,参数 data 就是 List 数据inputTree1(data) { data.forEach((item,index) => { if (item.fields.SUPER_ID === '-1') { item.fields.children = [] // this.data 就是tree数据,初始为空数组 this.data.push(item.fields) this.inputTr原创 2022-02-22 14:02:00 · 271 阅读 · 0 评论 -
vue 和风天气
在和风天气插件注册自己的插件,复制以下代码,更改 key 为自己的 key,更改 script 的 src 为自己的script<template> <div class="nav-header-wrapper"> <div id="he-plugin-simple"></div> </div></template><script>export default { name: "weather"原创 2022-02-15 11:48:21 · 937 阅读 · 0 评论 -
Vue实现下拉表格组件
<template> <div> <div class="select-table"> <el-form ref="verification" label-width="80px" :model="selectData" :rules="rules"> <el-form-item label="姓名" prop="userName"> <el-input @change="chang原创 2022-01-10 15:45:46 · 1887 阅读 · 0 评论 -
Vue 日期运算(计算时间差)
// 计算时间差dateDiff(date1,date2) { let date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日 //根据年 . 月 . 日的值创建Date对象 let date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]); let date2Str = date2.split("-"); let date2Obj = new Date(date2St原创 2021-12-22 11:21:44 · 5604 阅读 · 1 评论 -
Vue 中使用 moment 转换日期和时间
安装npm install moment在 main.js 全局引入import moment from 'moment'Vue.prototype.$moment = moment常用时间格式 今天为 2021-12-1// 时间戳转时间 2021-12-01this.$moment(1638336553801).format('YYYY-MM-DD')// 时间转时间戳this.$moment(new Date()).valueOf()// 获取今天 2021-12-1th原创 2021-12-01 13:31:45 · 2004 阅读 · 0 评论 -
Element table 表头吸顶效果(适用于表头无fixed属性使用)
在 main.js 自定义 sticky 指令Vue.directive('sticky', { // 指令的定义 inserted(el,binding) { // 获取表头 const dom = el.children[1] const dom2 = el.children[2] // 获取滚动元素 const scrollParent = document.querySelector(binding.value.parent) scrollP原创 2021-11-24 12:36:43 · 2039 阅读 · 3 评论 -
Vue 修改页面 title
router.js 添加 meta{ path: "/home", name: "首页", component: () => import("../views/home.vue"), meta:{title:"首页"}},main.js 添加一下代码// 页面titlerouter.beforeEach((to,from,next)=>{ if(to.meta.title){ document.title = to.meta.title } next()原创 2021-11-19 11:49:04 · 678 阅读 · 0 评论 -
使用 vue-splitpane 实现页面可拖动改变宽高
安装及注册 vue-splitpane,在main.js 里全局注册npm install vue-splitpane#importimport splitPane from 'vue-splitpane'# use as global componentVue.component('split-pane', splitPane);页面中使用<div className="container"> <split-pane split="vertical">原创 2021-09-15 16:02:59 · 1004 阅读 · 2 评论 -
Vue中更改页面浏览器的 title
只需要在路由中使用meta对象,添加 title 即可{ path: '/title', name: 'title', component: () => import('../views/title'), meta:{ title:'更改title' }},原创 2021-09-15 15:52:49 · 206 阅读 · 0 评论 -
Vue 封装一个折叠面板组件
效果,该组件使用了 Element 的一些 icon 图标,以及 过渡动画 el-collapse-transition具体使用方法,主要使用方法 provide ,inject,this.$children 和 _uid (vue中无论递归组件,还是自定义组件,每个组件都有唯一的_uid)<!-- 折叠组件 --><navigation-bar v-model="barName" accordion> <navigation-bar-item label="测试1原创 2021-09-15 15:48:17 · 1300 阅读 · 0 评论 -
Vue 中下载文本内容为指定格式文件
Vue 中下载文本内容为指定格式文件,代码如下,直接复制即可<el-button style="margin-bottom: 15px" type="primary" size="small" icon="el-icon-download" @click="saveCode">下载</el-button>// 下载提示 saveCode() { this.$prompt('请输入文件名', '下载为txt文件', { confirmButto原创 2021-09-06 14:31:29 · 941 阅读 · 0 评论 -
vue中读取本地文件内容
其实就是使用 FileReader对象,h5提供的异步api,可以读取文件中的数据。<input @change="uploadCode($event)" type="file" id="fileInput">// 导出 uploadCode(event) { //此处校验文件后缀 let file = event.target.files[0].name; // (利用console.log输出看file文件对象)json let num =原创 2021-09-06 14:27:53 · 7126 阅读 · 0 评论 -
vue watch如何同时监听多个属性
使用计算属性computed,监听计算属性data () { return { name1: '', name2: '', age: '' } },computed: { listenChange () { const {name1,name2} = this return {name1,name2} } }, watch: { list原创 2021-08-31 15:55:05 · 642 阅读 · 0 评论 -
Vue 实现左右拖动改变元素宽度
基础布局<div ref="lucky"> 左侧 </div><!-- 拖拽线 --><div id="line" ref="moveDom" class="dragLine"/><div ref="rightDom"> 右侧 </div>执行方法mounted() { this.options() this.drag()},定义方法methods: { // 拖动改变宽度 moveHand原创 2021-08-17 17:39:00 · 1492 阅读 · 2 评论 -
Vue 中使用 orgTree
1、安装 orgTree 和 lessnpm i vue2-org-tree// 建议版本为 5.0.0,不然可能会报错npm install --save-dev less less-loader2、main.js 引入并注册import Vue from 'vue'import Vue2OrgTree from 'vue2-org-tree'Vue.use(Vue2OrgTree)3、在组件内引入 less 文件,less 文件可以去 citHub 下载<style la原创 2021-08-12 11:06:46 · 2362 阅读 · 0 评论 -
Vue 中使用 html2canvas 把 html 元素导出为图片
一、安装npm install html2canvas二、引入并注册 html2canvasimport html2canvas from 'html2canvas';components: { html2canvas}三、基础使用,document.body 为要截图的元素html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas);});四、Vue 中使用原创 2021-08-12 10:05:31 · 244 阅读 · 0 评论 -
vue 实现元素的放大缩小
使用transform 设置 scale 进行放大缩小,使用 transformOrigin 定位基点,在 data 中定义变了 scal 为 1// 放大 enlarge() { this.$nextTick(() => { // imageWrapper 获取元素 let imageWrapper = document.getElementById('imageWrapper'); this.scal = (parseFloa原创 2021-08-12 09:58:39 · 3763 阅读 · 0 评论 -
Vue provide / inject 组件通讯
当孙子组件需要访问父组件的数据,又不适用 vuex,和第三组件进行通讯时,可以使用 provide / inject,我们只需要在上一层级的声明的provide,那么下一层级无论多深都能够通过inject来访问到provide的数据1.父级组件如下<template> <div class="test"> <son prop="data"></son> </div></template> <script>原创 2021-07-28 13:53:44 · 85 阅读 · 0 评论 -
vue 动态绑定class 和 style 最常用几种方式
1、对象绑定单个 class<div :class="{'active':isActive}"></div>data() { return { isActive: true }; }结果渲染为<div class="active"></div>2、对象绑定多个class,需要逗号隔开就行,这里的 active-three 需要用双引号<div class="activeOne" v-bind:class=原创 2021-03-01 17:04:48 · 695 阅读 · 1 评论 -
sync修饰符的用法
首先我们需要知道 子组件如何向父组件传值。//子页面 opTitle.vuevar data = 10;//第一个参数对应父页面自定义的事件,第二个值代表要更新的值this.$emit('update',data)//父页面 引入组件import topTitle from …components:{topTitle}//在自定义标签上自定义事件<template> <top-title @update='changeData'></top-t原创 2021-02-27 18:14:25 · 256 阅读 · 0 评论 -
Vue mixin 使用方法
一、定义公共的mixins文件:如mixin.vue<template> </template> <script> export default { name: 'mixin-test', components: {}, props: {}, data () { return { mixinData: 'mixin中的变量'转载 2021-02-24 10:01:28 · 767 阅读 · 0 评论 -
Vue 跨域处理
在 package.json 的同级目录新建 vue.config.js 文件module.exports = { lintOnSave: false, publicPath: '/reinforced', outputDir: 'reinforced', // 构建输出目录 devServer: { proxy: { '/api': { target: 'http://155.06.3.23:9001原创 2021-02-24 09:16:50 · 121 阅读 · 1 评论 -
js中!和!!的区别及用法
!可将变量转换成boolean类型,null、undefined和空字符串取反都为true,其余都为false。console.log(!null) // trueconsole.log(!undefined) // true应此当变量为空时,!变量为ture,!!变量就为falsevar a = '';// 当 a = false,也就是 a 为空,执行语句if(!!a) { console.log(a)}...原创 2021-02-23 19:12:48 · 101 阅读 · 0 评论 -
Vue axios 发送 get 和 post 请求
发送 get 请求this.axios.get('/rebar/produceTask/selectProProduceTaskItemList',{params:data}).then( res => { console.log('发送get请求')})发送 post 请求,使用 this.qs.stringify() 传参需要安装 qs,使用方法请查看博客getDataList() { var data={ name:this.queryInfo.na原创 2021-02-23 18:35:34 · 357 阅读 · 0 评论 -
Vue 中 qs 的使用
npm install qs //安装 qs在 main.js 中引入并注册 qsimport Qs from 'qs';Vue.prototype.qs = Qs;使用 qs.parse() 可以将URL解析成对象的形式let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';this.qs.parse(url);console.原创 2021-02-23 18:25:35 · 1159 阅读 · 0 评论 -
Vue中px自动转化成对应的rem
在index.html设置缩放<meta name="viewport" content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=0" />安装 postcss-px2rem(postcss-px2rem 就是为了让我们直接将代码中px自动转化成对应的rem的一个插件)npm i postcss-px2rem -S由于Vue Cli3及以后的版本省去了可见的配置项,需要自己在根目录原创 2021-01-26 12:02:25 · 637 阅读 · 2 评论 -
Vue 实现滑动验证码
使用插件 vue-puzzle-vcode,安装方法如下npm install vue-puzzle-vcode --save使用方法如下,更多参数请查看 官网<template> <div> <Vcode :show="isShow" @success="success" @close="close"></Vcode> <button @click="submit">登录</button>原创 2021-01-26 11:14:39 · 2583 阅读 · 3 评论 -
Vue identify生成图片验证码
identify 是一个vue的组件,使用canvas来生成图形验证码。identify:在 components 文件夹下创建 identify.vue文件,代码如下<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></templa原创 2021-01-26 10:51:21 · 208 阅读 · 1 评论 -
Vue 路由导航守卫
为路由对象添加 beforeEach 导航守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // 如果用户访问登录也 直接放行 if(to.path == '/login') return next() // 从sessionStorage 中获取到保存的 token 值 const tokenStr = window.sessionStorage.getItem('tok原创 2021-01-21 17:14:42 · 123 阅读 · 0 评论 -
Vue 生命周期
生命周期 四个阶段 创建 挂载 更新 销毁创建creat:仅创建了new Vue()或组件对象,同时创建了组件对象中的data对象使用:前:beforeCreat() 后:creatd() 比如可做this.axios.get挂载mount:开始扫描dom树,形成虚拟dom树,并首次替换绑定内容为data中的变量值使用:前:beforeMount() 后:mountd() 可做dom操作更新update:在任何位置修改了data中的变量值,都会触发更新阶段使用:前:beforeUpdate()原创 2021-01-21 11:03:07 · 111 阅读 · 1 评论 -
Vue 键盘事件
如果vue中原生事件不起作用,可以使用 .native修饰符,语法(.native@keyup.enter)@keydown 键盘按下时触发@keypress 键盘按住时触发@keyup 键盘弹起@keyup.13 按回车键@keyup.enter 回车@keyup.up 上键@keyup.down 下键@keyup.left 左键@keyup.right 右键@keyup.delete 删除键获取按键的键码 e.keyCode...原创 2021-01-21 10:59:51 · 1120 阅读 · 0 评论 -
创建 Vue 项目
安装nodejs,使用以下命令在cmd窗口查看是否安装成功node -vnpm -v安装步骤如下所示1、安装生成脚手架的工具:npm i -g @vue/cli2、用脚手架生成工具为本次项目生成一套脚手架结构代码 vue create vuexm;vuexm项目名称3、可选结构1)、Manually select features2)、Babel 将所有新版的js代码翻译为旧版也支持3)、Router4)、Vuex5)、() Linter / Formatter 严格模式(可以不选)原创 2021-01-11 21:51:02 · 366 阅读 · 1 评论 -
vue 如何使用字体图标
首先:访问图标库 iconfont , 将喜欢的图标添加至购物车点击购物车,将购物车内的图标添加至项目将图标下载至本地解压文件,并在项目中创建test文件夹,并将解压的文件复制到该目录下 ,demo_index.html文件可以查看图标名称在app.vue中添加以下样式<style> /*每个页面公共css */ @font-face { font-family: 'iconfont'; // 文件路径 src: url('~@/st原创 2021-01-10 14:51:23 · 845 阅读 · 1 评论 -
Vue 使用 print.js 实现打印组件
首先:在 common 文件夹下面创建 print.js 文件 代码如下// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, option原创 2020-10-28 14:17:38 · 3531 阅读 · 0 评论