canyi8023的博客

v-on="$listeners"和v-bind="$attrs"

$bus主要作用是进行非父子组件信息传递，使用方法如下：第一步：在main.js中将$bus绑定到vue原型上Vue.prototype.$bus=new Vue()第二步：在需要传递信息的组件上将一个方法发射出去，并需要在某个条件激活这个方法<div @click="busclick"> </div>methods(){busclick(){this.$bus.$emit('busfunction')}}第三步：在组件的创建时created中接收em

今天分享一个图片上传和截取功能，需求要求固定尺寸的截取，按照自己的需求进行配置，实现效果如下：首先参考element的上传参考地址：Element - The world's most popular Vue UI framework，截取的部分主要用到了vue-cropper第一步：安装 npm install vue-cropper第二步：1.全局使用main.jsimport VueCropper from 'vue-cropper'Vue.use(Vue...

本来是用title属性来展示提示，但是ui觉得太丑了 需要该样式 ，没找到合适的方法改title属性的样式，然后自己就手写了一个：直接上代码:<template> <div> <span v-on:mousemove="dataDetails($event)" v-on:mouseleave="hiddenDetail($event)">分批付款</span> <!-- 提示框 --> <di...

在项目中运行的时候出现报错，错误为Module build failed (from ./node_modules/babel-loader/lib/index.js)解决方案：控制台输入 npm install @babel/core @babel/preset-env 命令就可以完美的运行了

Vue.extend属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的Vue.component写法使用extend步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend+$mount这对组合是我们需要去关注的。官方文档学习开始之前我们先来看一下官方文档是怎么描述的。Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个...

import Vue from 'vue'import Router from 'vue-router'import store from '@/store/index'import NProgress from 'nprogress'import 'nprogress/nprogress.css'import gatewayHomeRouter from './gatewayHome'Vue.use(Router)//不需要权限的路由export const constantRoutes.

刚接了一个新需求，需要同时生成多个折线图，例如：lineList 是后台请求过来的数据，为一个数组，我们循环这个数组循环调用drawLineOne方法，具体实现代码如下<template v-for="(item,index) in lineList" > <div :key="index" :id="'myChart'+index" :style="{'height': '400px','margin-top':'20px'}"></div>..

今天拿到一个多条线的折线图，但是官网的源码示例是这样的，当我把搜索引擎的周二数据设置为0是并没有在y轴为0上，而是跟上一条线重合了，ECharts折线图是堆叠的，折线图堆叠的意思就是：第二条线的数值=本身的数值+第一条线的数值，第三条的数值=第二条线图上的数值+本身的数值，以此类推......设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可。option = { title: { text: '折线图堆叠' ..

自定义输入表格的行和列，让后生成表格，请看效果：<div> <el-input v-model="initdata.rows" type="number" size="small" placeholder="请输入行" :maxlength="2" style="width:100px" />&nbsp; <span class="margin-left">行</span>&nbsp; <el-input v-model=

开始时间不能大于结束时间；结束时间不能小于开始时间<el-date-picker v-model="startTime" size="small" style="width:200px" :picker-options="pickerBeginDate" type="date" clearable placeholder="开始时间" format="yyyy年MM月dd日" value-format="

刚接了一个新需求 ，自定义表格的行和列，没有想到好的实现方法，就用原生table写了一个，直接上代码：先给大家展示一下效果：下面直接上代码：<el-button style="margin-left: 10px; float: right;" size="small" @click="refresh">重置</el-button><table> <template v-for="(item,index) in tableProD...

这里主要用的是moment .js(JavaScript 日期处理类库），安装npm install moment --save下来正式开始了。。。。1.新建 filter.jsimport moment from 'moment';/** * 获取本周，本月，本季度时间 */export const obtainDataTime = (timeData) => { if ( timeData === 'thisWeekTime' ) { return getThi.

1.开始时间不能大于结束时间结束时间不能小于开始时间 <DatePicker type="date" placeholder="选择开始时间" :options="startOption" v-model="startTime" style="width: 120px;" ></DatePicker> <DatePic