webFrontEndDev的博客

render jsx 条件判断、v-html处理

"scripts": { ... "new": "node .electron-vue/bin/newPage", ...}.electron-vue/bin/newPage.js/** * 创建组件 * 命令： npm run new 【moduleName@moduleName@moduleName】 pageName 【module中文名@module中文名】 * 作用： * 1、创建页面文件，并添加到路由 * 2、moduleName@moduleNa.

一、场景描述Tab切换频率较低、数据返回速度理想的情况下，几乎不用考虑这个问题。切换频率高如果不处理未完成的请求不仅会严重影响页面性能，由于浏览器并发请求限制，也可能会造成后续请求超时。另外一个较为直观的业务影响是，频繁切换也会造成数据渲染错误，如下图：当前已切换到待付款，但是渲染的数据是前面请求的已完成的数据。二、解决方案原理：利用 Javascript XMLHttpRequest 对象上的 abort 方法，终止已发出的请求。MDN上关于此方法的解释：当一个请求被终止，它的 r...

main.js//自定义按钮权限指令 例：v-getauth="'CGRK_SHD_XJ_TJ'" 值需要加单引号，不然会去实例的data中查找该变量。且加单引号之后才能从 binding.value 上拿到传参Vue.directive('getauth', { //此时不能使用bind钩子函数，否则会找不到父元素影响接下来取父元素的操作 inserted: ((el, binding) => { if(store.state.users.user.isAdm.

<el-progress :percentage="computedPercentage(scope.row) >= 100 ? 100 : computedPercentage(scope.row)" :format="computedPercentage(scope.row, 1)"></el-progress>computedPercentage(row, format){ if(!row.yearComplete || !row.yearTarget.

<el-date-picker v-model="followadd.nextFollowTime" type="date" placeholder="选择日期" style="width: 100%;" ...

这里由于服务端入库需要传入string(其实是服务端那大哥懒得改，我也懒得费嘴了，不如自己写来得快)使用cascader级联选择器最终选择的lable，编辑操作回显写了一个map方法获取id 再 Push到array再updata v-model 实现。目前只支持两级，后期可以写一个递归函数以达到多级处理回显。cascader v-model只接收一个Array类型才支持回显<el-...

<template> <div class="newcom-wrap"> <el-table ref="multipleTable" :data="newComList.list" tooltip-effect="dark" @selection-change="handleSelectionChange" :row-key=...

filter.js/** * Created by ZOE on 20/03/18 *//** format template String * ellipsis 字符串切割 * transDateSub 截取时间戳（10位） * * * */import { parseTime} from '@/utils/index'const filters = { ...

<el-dropdown v-show="scope.row.clueRemind == 2" class="tip-sales" @command="handleCommand" @click.native="beforeHandleCommand(scope.row.id)"> <span class="el-dropdown-link"> 提醒...

<el-select v-model="distributionForm.userId" placeholder="请选择子帐户"> <el-option v-for="item in subAccount" :label="item.realName" :key="item.id" :value="item.id"></el-option></...

全局前置导航守卫中需要调用next()方法来resolve这个钩子，可以通过往next()里传入如：replace:true 、name:'home' 执行结果依赖next方法的调用参数。 当配置 next() 时会出现死循环或路由栈溢出，原因是当执行钩子函数时，如果遇到next('/home')，会触发离开的钩子，然后再次触发前置导航钩子，此时 to.path...

安装快速原型开发工具npm install -g @vue/clinpm install -g @vue/cli-service-global在项目根目录添加配置文件，指定本地服务代理ip和端口号、接口路径如下：// vue.config.jsmodule.exports = { devServer: { proxy: { '/user': { ...

多组件数据共享：Vuex我们知道每一个组件都有自己的 data，那么多个组件如何共享数据？这就引出了 state 的概念，可以把多个组件共有的属性统一由state进行管理。但是组件并不能直接访问或操作state里的数据源，而是通过 mutations 来进行如何对数据源进行操作。而改变数据的行为触发由 Actions 来完成，Vue 为 actions的触发提供了一个 commit 的概...

首先在项目里安装vue-routernpm i vue-router创建一个router.js 配置用来routertouch src/router.js// router.jsimport Vue from 'vue' //引入 vueimport VueRouter from 'vue-router' // 引入vue-routerimport pageA fr...

单向传值（props）：父组件向子组件传值，任何类型的值都可以传给一个 prop。实现概述：父组件通过指令向子组件传值，子组件通过props接收。// 父组件-App.vue<template> <div id="app"> <!-- <com age="19"></com> // 静态传递 prop --> ...

Vue 实现流程： 1、把模板解析为 render 函数 · 运用 with · 模板中的所有信息都被 render 函数包含 · 模板中用到的 data 中的属性，都变成了 JS变量 ·...