mhbsoft的博客

vue 页面 <el-button @click="testPdf">导出PDF文件</el-button> <div id="container" > <el-button type="danger">危险按钮</el-button> <span>{{ t1 }}</span> </div>js代码methods: { testPdf() { // this.dialogVis

直接上例子：第一种：<template> <div> <div v-for="(item,index) in datas.realForm" :key="index"> <el-form ref="form" :model="datas" label-width="160px" :rules="rules"> <el-form-item label="名字" :rules="rules.name" :prop

App.vue<!-- render 函数 --><Heading tag="ul"></Heading> // 向下传递ul 标签 与this.tag 对应<script>import Heading from './views/Heading.vue';export default { name: 'App', components: { Heading } ......}</scrip

toast.jsimport Toast from "./toast.vue";import Vue from 'vue';const ToastConstructor = Vue.extend(Toast);function showToast(text, duration=2000) { const toastDOM = new ToastConstructor({ el: document.createElement('div'), data() {

vue中对象劫持：Object.defineProperty(obj, prop, descriptor)1 obj：必需。目标对象2 prop：必需。需定义或修改的属性的名字3 descriptor：必需。目标属性所拥有的特性这个介绍的比较多，就不展开了。vue中数组劫持：let state = [1, 2, 3]; // 变成响应式数据let originalArray = Array.prototype; // 数组原来的方法let arrayMethods = Object.

npm install vsbtnmain.tsimport vsbtn from "@/plugins/vsbtn";Vue.use(vsbtn);.vue<!-- 悬浮按钮 --><vsBtn></vsBtn>这样的话，在页面出现上下滚动条的情况下，页面右下角就会出现一个灰色按钮。

请大家一起确认是否是官网不小心写错了最新在做个表格，发现官网这么写的：但是通过实际应用，发现 默认为true，因为只要加了stripe 如下：就会有斑马纹。请大家确认下是不是官网写错了。？...

直接开始：在你所要刷新的 中改写：&lt;template&gt; &lt;router-view v-if="isRouterAlive"/&gt;&lt;/template&gt;&lt;script&gt;export default { data () { return { isRouterAlive: true } },provide() { r...

打包工具rollup用babel的核心模块@babel/core将高级语法转成低级语法@babel/preset-env让rollup使用babel，桥梁rollup-plugin-babel实现一个静态服务rollup-plugin-serve设置环境变量cross-envnpm install rollup @babel/core @babel/preset-env rollup-plugin-babel rollup-plugin-serve cross-env -D.

1. package.json 文件修改 这个文件的 name，名字就会相应的修改。{ "name": "vuetest", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, ......}2. vu

实现功能：element-ui table表头开始单元格 添加元素。直接上代码：html&lt;el-table-column type="expand" width="64" label-class-name="use" &gt; //...这里面是其余的代码&lt;/el-table&gt;jsmounted(){ this.setLabel();},setLabe...

用vue 获取动态元素的宽度 1.等到所有节点加载完成，要放在this.$nextTick里面。 2.要使用$el挂载此元素&lt;el-input ref="companyStyle"&gt;&lt;/el-input&gt;newAddBtn(){ let _this= this; this.$nextTick(function () { _this.input...

单向绑定： 1、让model层的数据绑定到view层。我们想到一个个替换dom节点不可取。因为每次操作dom都是一次对整体dom遍历的过程，影响性能。所以使用createDocumentFragment方式将dom全部劫持，在内存中实现数据绑定操作，最后执行一次dom操作。 2、每次劫持dom节点过程中，会实现对dom节点的数据绑定。使用递归函数实现所有子元素的初始化绑定。 3、最后new ...

由于javascript的限制，Vue不能检测到以下变动的数组（如：objArr）： 1.通过索引直接设置数组的某个值，this.objArr[index] = newValue;2.通过索引直接设置数组中对象的某个属性，this.objArr[index].pro = newValue;3.通过修改数组的长度，this.objArr.length = newLength;...

最近做项目，radio选中一行数据后执行更新(随意的名字)操作，DB中数据修改了，需要重新查询，然后按查询出来的isSelected是否为1判断 radio 是否选中。 html&lt;el-table :data="versionList" size="small"&gt; &lt;el-table-column label="选择版本" show-overflow-tooltip...

直接上代码：&lt;el-date-picker size="small" v-model="nowDate" @change="getSTime" type="datetimerange" range-separator="～" start-placeholder="请输入开始时间" end-placeholder="

tooltip中的formatter用于设置曲线悬浮框的展示内容formatter: function (params, ticket, callback) { //这里面做数据处理 return params.name;}legend中的formatter用于设置曲线上方标题的展示内容，为了解决标题虽然不同但是过长，导致截取以后数据相同，不展示相同标题的问题，想要截取标题重复...

不废话直接上：mapState 与 mapGetters 要放在计算属性computed中。要使用这几个辅助函数首先要引入：import { mapState，mapMutations } from 'vuex'computed: { localComputed () { /* ... */ }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({...

思路： app.vue中 根目录下设置两个 使用全局参数 isLogin来判断登录是否成功，该显示哪部分功能。<div class="wrapper" v-if="!isLogin"> ...内容</div><div class="login_container" v-if="isLogin"> <router-view></router-view></div>需要用到vuex全局变量export defaul

有时候项目需求需要实现这种效果：需要自定义组件，最简单的实现方式：1.vue中html代码&amp;lt;div style=&quot;width: 100%&quot;&amp;gt; &amp;lt;span v-if=&quot;isRight&quot; class=&quot;sn-line&quot; style=&quot;float: left&quot;&amp;gt;{{con

其中之一原因： 有另外一个项目在启动，所以vue ui 或者 npm install的时候报错提示。npm ERR! code EPERM npm ERR! errno -4048 npm ERR! syscall scandir把另外一个运行的vue项目关掉以后，vue create就正常了。不知道为什么，一个vue项目运行的同时，另起一个vue-cli就会报错。有知道的回复留下答案。...

原代码–不显示问题如下&lt;el-tabs v-model="activeName" value="" @tab-click="handleClick"&gt; &lt;el-tab-pane label="用户" name="user"&gt;用户&lt;/el-tab-pane&gt; &lt;el-tab-pane label="

vue表单自定义表单校验，不管对错一定要加 callback();validateDatasourceNm(rule, value, callback) { let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; //只允许输入正数 if (value === '') { callback(); //这句话没有的话 会不知名的问题产生。 }...

当前时间只能选择两年之内的时间 + 只能选择30天之内的时间范围其实这个功能只需要一个时间框，跟后台讨论 只能选择两年之内的时间，数据检索两个月之内的数据就可完美解决，只是无奈 有的 （沙币）不同意。实现：1.html&lt;el-date-picker v-model="resForm.nowDate" type="daterange" start-placeholder="开始...

1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作2.挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发...

1.$set给data对象中的变量设置值，比如我在data中定义了一个对象，在使用的时候我想给这个对象赋予一个a的属性。var app = new Vue({ el:"#main", template:'<div>{{obj.a}}</div>' data:{ obj:{} }})var i=0;i++;app.$set(app.obj,'a',i)...

原因是： 修改了数据以后，页面数据没有更新。需要使用 this.$nextTick()private async getNodes(value: any): Promise<any> { await this.$nextTick(); this.Form.nodes = this.nodes;｝...

npm install qrcodejs2 main.ts 中const QRCode = require('qrcodejs2');Vue.prototype.QRCode = QRCode ;vue页面中private QRCode: any; mounted() { //生成二维码 this.qrCode("http://www.baidu.com");}priv...

最近在做项目，用到了 vue + element。 点击左侧相同菜单的时候不能刷新页面，数据不会变化。需要改成页面刷新。首先： 加入 :key 值、<router-view :key="$route.path + $route.query.plan"/>其次，与 对应的页面路由 做如下处理： this.$router.push({ path: '/xxxxxx', que...

直接上代码：<body> <div id="app"> <input type="text" id="txt"> <p id="show-txt"></p> </div> <script> var obj = {} Object.defin...

Vue 引入 TypeScriptVue 在 官方文档中有一节简单的介绍了如何引入 TypeScript，可惜文档太过简单，真正投入生产还有许多的细节没有介绍。我们对此进行了一系列探索，最后我们的风格是这样的：import { Component, Prop, Vue, Watch } from 'vue-property-decorator'import { State, Action,...

最近遇到了一个问题就是 多条曲线，数据精度为小数时，画线部分与小数刻度显示不怎么准确，但是单条曲线的时候就没问题// stack: ‘总量’, //此处注释掉 这个问题 就解决了 所有的都要注释掉series: [ { name: 'line1', type: 'line', // stack: '总量', //此处注释掉 data: this.lineData.s...

1. npm install echarts --save2. npm install --save @types/echartsmain.ts 中 ：import echarts from 'echarts';Vue.prototype.$echarts = echarts;

官网明确指出：不使用key的时候反而更高效