qq_43039004的博客

vue 小知识点

npm login 若此命令报错，可能是因为引用了cnpm 我们用 nrm来解决。package.json文件里 private 为false。npm pack 本地会生成tgz的文件。然后再登录发布 邮件会通知你是否发布成功。成功之后可在npm上查询你的插件。npm publish 发布。npm run lib 打包。vue.config内容。index.js如图。

计算属性 computed计算属性，顾名思义，有计算的操作，可能是一个属性的操作（字符串切割，数组排序等）也可能是多个属性操作（拼接字符串，合并数组等），既然是计算的操作，肯定是希望拿到计算之后的数据，所以一定要有返回值（要有return ），只有计算所依赖的属性发生变化才会重新计算，所以会有缓存。我们在methods里面也同样能达到计算属性的效果，但是因为methods里面不会缓存，不会缓存就会重复执行。data(){ return { val: 1 }},computed: { com

.el-drawer{ :focus{ outline:0; }}

Vue.directive('dragModal', (el, bindings, vnode) => { Vue.nextTick(() => { let { visible, destroyOnClose } = vnode.componentInstance console.log(vnode); // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用 if (!visible) return let modal

问题：拦截器里面判断有没有权限，如果没有跳转登录页，并给出提示，但是会出现多个，原因是当前页面有多个接口请求，多次触发拦截器里面的判断解决：我们在拦截器里面判断有没有message提示，如果有就不给提示，如果没有就给出提示具体类名根据框架修改，本文已antd为例，本文仅提供思路，具体操作根据实际情况修改...

项目需求：前端做排序，后台返回的数据有合计一项，排序时，合计始终在最后一行使用@sort-change='sortChange' <el-table-column prop="revPar" align='center' sortable="custom" label="RevPAR" width="110"> </el-table-column>sortChange(column){

npm install el-tree-transfer --save<template><div> <tree-transfer :title="title" class="str" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @add-btn='add' @remove-btn.

List item

已经上传成功的未上传的 <el-upload ref="upload" action accept="image/*" :file-list='filelist' list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request='upload..

<el-date-picker v-model="sta" type="date" value-format='yyyy-MM-dd' :picker-options="options" placeholder="开始日期"> </el-date-picker> <el-date-picker v-model="end" type="date" value-for..

<el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.date" v-if=

1. 首先我们先生成我们的图表 具体配置不详细写了2.我们在点击的时候去获取我们的图表并转成base64格式 itemClick(){ console.log(document.getElementById('mydome').getElementsByTagName('canvas')[0]) let baseCanvas = document.getElementById('mydome').getElementsByTagName('canvas')[0]

//地址转文件changeBlob(){returnnewPromise(resolve=>{constxhr=newXMLHttpRequest();xhr.open('GET','文件地址',true);xhr.responseType='blob';xhr.onload=()=>{if(xhr.status===200){resolve(xhr.response);...

非父子通信不同于父子通信，首先我们要需要创建一个做中央事件总线在main.js里Vue.prototype.$bus = new Vue();然后我们就可以通过this.$bus.$emit 和this.$bus.$on 来完成非父子之间的通讯jump(){ this.$bus.$emit('updata','参数') this.$router.push({ path:'/aaa' })}, mounted(){ this...

首先安装插件qrcodenpm install --save qrcode //安装import QRCode from 'qrcode'//需要的页面引入使用<template> <div> <img :src="url" alt=""> </div></template>js QRCode.toDataURL('生成二维码') .then(url => { this...

vue中axios的简单使用以及封装安装npm install axios --save首先介绍简单的使用在我们需要使用的地方引入axios , 然后便可以使用了import axios from 'axios' //引入使用axios({ headers:{ Authorization:''//token }, url: "",//接口地址 method: "",//请求方式 params: {},//参数 }..

开发中如需使用自己开发的弹框并要求带有拖动的功能，可参考本文 可根据需求自行修改Vue.directive('dialogDrag', { inserted:function(el) { const dragDom = el.querySelector('.move'); dragDom.style.cursor = 'move'; dragDom.onmousedown = (e) => { event.stopPropagation(); ..

//自定义指令import Vue from 'vue'Vue.directive('Alphabet', { inserted: function (el) { const input = el.querySelector('.el-input__inner'); input.onkeyup = function (e) { input.value = input.value.replace(/[^A-Za-z0-9]/g,'') } .

安装插件 npm install --save signature_padyarn add signature_pad 引入 import SignaturePad from 'signature_pad'; 创建canvas <div> <canvas class="canvasId"/> <button @click="save">保存</button> <button @cl..

安装vuex npm i vuex -s 在src文件夹下创建store文件夹，在store文件夹下创建index.js index.js文件为 import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}}); ...

自定义指令如何使用请点击这里，本文不做详细讲解，主要展示正则规则input.onkeyup = function (e) { input.value = input.value.replace(/[^\d\.]/g,'') input.value = input.value.replace(/^\./g,'') input.value = input.value.replace(/\.{2,}/g,'.') input.value = input.value

自定义指令如何使用请点击这里，本文不做详细讲解，主要展示正则规则1、安装$ npm install vue-baidu-map --save 2、main.js引入import Vue from 'vue'import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: '百度地图开发者平台申请的密钥'})3、使用<template> <baidu-map class="bm-view

本文以element为例1.创建directive.js文件，并在main.js中引入这个文件2.在directive.js文件中写上自己的指令，比如写一个只能输入数字的输入框指令import Vue from 'vue'Vue.directive('Int', { inserted: function (el) { const input = el.querySelector('.el-input__inner'); //注意这里element与ant不同 ant