单飞吧的博客

1、安装sortablejs2、在需要的页面引入3、具体使用，注意的是element table务必指定row-key，且row-key必须是唯一的，如 id，不然会出现排序不对的情况

echarts文字显示不清晰问题

基础布局，添加 @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

以 Element UI 中的 el-table-column 举例，创建 js 文件，引入 Element，使用 extends 继承import { TableColumn } from 'element-ui';export default { name: 'TableColumn', extends: TableColumn};

创建 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.

创建容器<template> <div class="right" ref="playWndBox"> <!-- 视频数据站位 --> <div id="playWnd" class="playWnd" :style="{height: playWndHeight + 'px',width: playWndWidth + 'px'}"></div> </div></template>插件所需

第一步把 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

在和风天气插件注册自己的插件，复制以下代码，更改 key 为自己的 key，更改 script 的 src 为自己的script<template> <div class="nav-header-wrapper"> <div id="he-plugin-simple"></div> </div></template><script>export default { name: "weather"

<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

// 计算时间差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

安装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

在 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

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()

安装及注册 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">

只需要在路由中使用meta对象，添加 title 即可{ path: '/title', name: 'title', component: () => import('../views/title'), meta:{ title:'更改title' }},

效果，该组件使用了 Element 的一些 icon 图标，以及 过渡动画 el-collapse-transition具体使用方法，主要使用方法 provide ，inject，this.$children 和 _uid （vue中无论递归组件，还是自定义组件，每个组件都有唯一的_uid）<!-- 折叠组件 --><navigation-bar v-model="barName" accordion> <navigation-bar-item label="测试1

Vue 中下载文本内容为指定格式文件，代码如下，直接复制即可<el-button style="margin-bottom: 15px" type="primary" size="small" icon="el-icon-download" @click="saveCode">下载</el-button>// 下载提示 saveCode() { this.$prompt('请输入文件名', '下载为txt文件', { confirmButto

其实就是使用 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 =

使用计算属性computed，监听计算属性data () { return { name1: '', name2: '', age: '' } },computed: { listenChange () { const {name1,name2} = this return {name1,name2} } }, watch: { list

基础布局<div ref="lucky"> 左侧 </div><!-- 拖拽线 --><div id="line" ref="moveDom" class="dragLine"/><div ref="rightDom"> 右侧 </div>执行方法mounted() { this.options() this.drag()},定义方法methods: { // 拖动改变宽度 moveHand

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

一、安装npm install html2canvas二、引入并注册 html2canvasimport html2canvas from 'html2canvas';components: { html2canvas}三、基础使用，document.body 为要截图的元素html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas);});四、Vue 中使用

使用transform 设置 scale 进行放大缩小，使用 transformOrigin 定位基点，在 data 中定义变了 scal 为 1// 放大 enlarge() { this.$nextTick(() => { // imageWrapper 获取元素 let imageWrapper = document.getElementById('imageWrapper'); this.scal = (parseFloa

当孙子组件需要访问父组件的数据，又不适用 vuex，和第三组件进行通讯时，可以使用 provide / inject，我们只需要在上一层级的声明的provide，那么下一层级无论多深都能够通过inject来访问到provide的数据1.父级组件如下<template> <div class="test"> <son prop="data"></son> </div></template> <script>

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=

首先我们需要知道 子组件如何向父组件传值。//子页面 opTitle.vuevar data = 10;//第一个参数对应父页面自定义的事件,第二个值代表要更新的值this.$emit('update',data)//父页面 引入组件import topTitle from …components:{topTitle}//在自定义标签上自定义事件<template> <top-title @update='changeData'></top-t

一、定义公共的mixins文件：如mixin.vue<template> </template> <script> export default { name: 'mixin-test', components: {}, props: {}, data () { return { mixinData: 'mixin中的变量'

在 package.json 的同级目录新建 vue.config.js 文件module.exports = { lintOnSave: false, publicPath: '/reinforced', outputDir: 'reinforced', // 构建输出目录 devServer: { proxy: { '/api': { target: 'http://155.06.3.23:9001

！可将变量转换成boolean类型，null、undefined和空字符串取反都为true，其余都为false。console.log(!null) // trueconsole.log(!undefined) // true应此当变量为空时，!变量为ture，!!变量就为falsevar a = '';// 当 a = false，也就是 a 为空，执行语句if(!!a) { console.log(a)}...

发送 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

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.

在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及以后的版本省去了可见的配置项,需要自己在根目录

使用插件 vue-puzzle-vcode，安装方法如下npm install vue-puzzle-vcode --save使用方法如下，更多参数请查看 官网<template> <div> <Vcode :show="isShow" @success="success" @close="close"></Vcode> <button @click="submit">登录</button&gt

identify 是一个vue的组件，使用canvas来生成图形验证码。identify：在 components 文件夹下创建 identify.vue文件，代码如下<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></templa

为路由对象添加 beforeEach 导航守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // 如果用户访问登录也 直接放行 if(to.path == '/login') return next() // 从sessionStorage 中获取到保存的 token 值 const tokenStr = window.sessionStorage.getItem('tok

生命周期 四个阶段 创建 挂载 更新 销毁创建creat：仅创建了new Vue()或组件对象，同时创建了组件对象中的data对象使用：前:beforeCreat() 后：creatd() 比如可做this.axios.get挂载mount：开始扫描dom树，形成虚拟dom树，并首次替换绑定内容为data中的变量值使用：前:beforeMount() 后：mountd() 可做dom操作更新update：在任何位置修改了data中的变量值，都会触发更新阶段使用：前:beforeUpdate()

如果vue中原生事件不起作用，可以使用 .native修饰符，语法（.native@keyup.enter）@keydown 键盘按下时触发@keypress 键盘按住时触发@keyup 键盘弹起@keyup.13 按回车键@keyup.enter 回车@keyup.up 上键@keyup.down 下键@keyup.left 左键@keyup.right 右键@keyup.delete 删除键获取按键的键码 e.keyCode...

安装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 严格模式（可以不选）

首先：访问图标库 iconfont ， 将喜欢的图标添加至购物车点击购物车，将购物车内的图标添加至项目将图标下载至本地解压文件，并在项目中创建test文件夹，并将解压的文件复制到该目录下 ，demo_index.html文件可以查看图标名称在app.vue中添加以下样式<style> /*每个页面公共css */ @font-face { font-family: 'iconfont'; // 文件路径 src: url('~@/st

首先：在 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