• vue

npm i swiper@5 //页面内引入 import "swiper/css/swiper.css"; import Swiper from ‘swiper’ 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(img,index) in bannerList" :key="index"> <img :src="img.imgUrl" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> mounted中实例化 new S…

npm install vue2-editor import Vue2Editor from "vue2-editor" Vue.use(Vue2Editor) <template> <vue-editor v-model="content" /> </template> <script> import { VueEditor } from "vue2-editor" export default { components: { VueEditor }, data: () => ({ content: "<h1>Hello</h1>" }) } </script>

1.type="index"自定义显示内容 <el-table-column type="index" :index="indexMethod" label="序号"> </el-table-column> 最后一列的index位置显示汇总 indexMethod(index){ if (index === this.tableData.length – 1) { return ‘汇总’ } else { return index + 1 } } 2.合并列 <el-table id="table" :data="tableData" :span-method="objectSpanMethod"></el-table> 合并最后一行的前面7列 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex === this.tableData.length – 1) { if (columnIndex === 0) { return { rowspan: 1, colspan:…

1.报错信息did you register the component correctly? For recursive components, make sure to provide the "name" option. 2.解决方案，多次调用的组件使用import引入，可以让name不和父组件冲突 components:{ checkInDetail:()=>import(‘@/views/room/status/component/checkInDetail.vue’) }

需求描述：手机号非必填，但是有输入的时候验证格式。 <el-form ref="form" :rules="rules" :model="form"> <el-form-item label="手机号" prop="mobile"> <el-input v-model="form.mobile" @input="inputMobile" clearable></el-input> </el-form-item> </el-form> let regMobile = /^1\d{10}$/ let validatorMobile = (rule, value, callback) => { if (!value) { callback() // 空值通过 } else if (regMobile.test(value)) { callback() } else { callback(new Error(‘手机号格式错误’)) } } form:{ mobile:” }, rules:{ mobile: [{ validator:…

1.fetch formData let data = new FormData() data.append(‘client_key’,’111111′) data.append(‘client_secret’,’222222′) data.append(‘grant_type’,’client_credential’) fetch(‘/douyinOpen/oauth/client_token/’,{ method: ‘post’, body:data }) 备注:省略了content-type因为浏览器自动填入了正确的值 2.fetch json fetch("/douyinOpen/oauth/client_token/", { headers: { "content-type": "application/json" }, body: ‘{"client_key":"111111","client_secret":"222222","grant_type":"client_credential"}’, method: "POST" });…

配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子： // 使用由库提供的配置的默认值来创建实例 // 此时超时配置的默认值是 `0` var instance = axios.create(); // 覆写库的超时默认值 // 现在，在超时前，所有请求都会等待 2.5 秒 instance.defaults.timeout = 2500; // 为已知需要花费很长时间的请求覆写超时设置 instance.get(‘/longRequest’, { timeout: 5000 }); 备注：不同版本可能配置不同，0.27.2版本中contentType为application/json，但是在0.18.1版本中contentType为application/json;charset=utf-8，多出了charset=utf-8，在抖音POI获取token的接口中，多出来的这部分就会导致请求报错。

<el-upload :headers="uploadHeaders" :data ="{hotelId:hotelID}"</el-upload> data(){ return { uploadHeaders:{Authorization: ‘bearer ‘ + getToken()} } }

1.get let obj = { supplier_ext_id:” } this.$ajax.get(‘/douyinOpen/poi/supplier/query/’,{ params:obj, headers:{ "access-token":this.token } }) 2.post let obj = { supplier_ext_id:”, name:”, attributes:{}, poi_id:”, type:1, status:1 } this.$ajax.post(‘/douyinOpen/poi/supplier/sync/’,obj,{ headers:{ "access-token":this.token } }) 差异 get中headers位于第二个参数中和参数并列，post中位于第三个参数中

1.依据现有table导出 import XLSX,{WorkSheet} from ‘xlsx’ let worksheet = XLSX.utils.table_to_sheet(document.getElementById(‘table’)) let workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook,worksheet,’数据报表1′) XLSX.writeFile(workbook,’数据报表2.xlsx’) 2.依据data数据导出 https://zhuanlan.zhihu.com/p/268835049 3.封装一下 import XLSX from ‘xlsx’ export function tableExport(tableId=’table’,sheetName=’导出数据’){ let worksheet = XLSX.utils.table_to_sheet(document.getElementById(tableId)) let workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook,worksheet,sheetName) XLSX…

babel降级为8.x npm install babel-eslint@8.2.2 –save

<template> <div> <el-table ref="multipleTable" :data="links" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="roomNo" label="房间" width="180"> </el-table-column> <el-table-column prop="isCheckOut" label="是否已离店"> <template slot-scope="scope"> <span>{{scope.row.isCheckOut?’是’:’否’}}</span> </template> </el-table-col…

表头中添加按钮 <el-table :data="tableData" style="width: 100%" border> <el-table-column prop="amount" label="金额" align="center"> <template slot="header"> <span class="link" @click="handleDetail">查看详情</span> </template> </el-table-column> </el-table> 备注:slot=”header”

vue提供了watch方法，用于监听实例内data数据的变化。通常写法是： new Vue({ data: { count: 10， blog:{ title:’my-blog’, categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听，但是如果需要监听的数据是对象内的某一属性值的变化，直接watch对象blog是检测不到变化的，这是因为blog这个对象的指向并没有发生改变。有几个解决方法 1.深度监测 new Vue({ data: { count: 10， blog:{ title:’my-blog’, categories:[] } }, watch: { blog:{ handler(newVal,oldVal){ console.log(`new: ${newVal}, old: ${oldVal}`); }, deep:true } } }) 里面的deep设为了true，这样的话，如果修改了这个blog中的任何一个属性，都会执行handler这个方法。不过这样会造成更多的性能开销，尤其是对象里面属性过…

<el-table-column type="selection" :selectable=’checkboxSelect’ width="120"></el-table-column> checkboxSelect (row, rowIndex) { if (rowIndex == 0) { return false // 禁用 }else{ return true // 不禁用 } }

1. <template> <el-select v-model="hotel" filterable :filter-method="filterHotel" placeholder="请选择" clearable @clear="hotelClear"> <el-option v-for="item in options" :key="item.hotelcode" :label="item.hotelname" :value="item.hotelcode"> <span>{{ item.hotelname }}</span> <span>/{{ item.hotelcode }}</span> </el-option> </el-select> </template> 2. hotel:”, options: [ { hotelname: ‘选项1’, hotelcode: ‘aaa’ }, { hotelname: ‘选项2’, hotelcode: ‘b…

window.tinymce.init({ toolbar: [‘fontsizeselect’], fontsize_formats: ‘8px 10px 12px 14px 18px 24px 36px 72px 96px 140px 280px’ })

1. <template> <div res="box" @click="action($event,123)"></div> </template> 2. action(e,index){ let boxWidth = this.$refs.box.clientWidth // box的宽度 let screenLeft = e.pageX // 鼠标距离屏幕左侧的距离 let boxLeft = this.$refs.box.getBoundingClientRect().left // box距离屏幕左侧的距离 let overHalf = (screenLeft – boxLeft) > boxWidth / 2 // 鼠标位置是否超过了容器的一半 }

1.相关库 axios, vue-awesome-swiper 2.处理 npm install babel-polyfill –save npm install es6-promise –save 3.文件 main.js import Es6Promise from ‘es6-promise’ require(‘es6-promise’).polyfill() Es6Promise.polyfill() build/webpack.base.conf.js，enter下添加babel-polyfill entry: { "babel-polyfill":"babel-polyfill", app: ‘./src/main.js’ } 4.vue-awesome-swiper的处理 npm install –save vue-awesome-swiper@3.1.3 //指定版本，最新版不兼容旧浏览器 https://www.npmjs.com/package/vue-awesome-swiper

1.场景描述 通过select选择的目标中有多个属性要拿出，此时需要给v-model指定某一个属性用于回显，list结构如下 list:[{id:1,name’a’,age:12},{id:2,name:’b’,age:15}], form:{ name:” } 2.模板部分 给value绑定item，然后v-mode部分指定value-key <el-select placeholder="请选择" v-model="form.name" value-key="name" @change="change"> <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item"></el-option> </el-select> 3.绑定change事件 change(e){ console.log(‘e=’,e) }

前言 本文讲述的最佳实践是从日常业务中总结而出的，不一定适合所有项目。毕竟每个公司或个人的项目不同，最佳实践也会有所不同。但是可以从这篇文章借鉴吸收一点有用的东西，有问题的地方也欢迎大家积极吐槽指正。 为了避免出现 我这明明可以，你那怎么不行 的尴尬情况，这里列一下文章涉及到依赖的版本号。 ├── webpack 5.39.1 ├── webpack-cli 4.7.2 ├── node 12.8.0 ├── npm 6.10.2 正文 初始化项目 1. mkdir test-app && cd test-app 2. npm init 首先添加一个入口文件 /src/index.js 和 webpack 配置文件 webpack.config.js，现在我们的目录结构如下 test-app ├── src | └── index.js ├── package.json ├── webpack.config.js 安装 webpack npm install webpack webpack-cli -D 开始搞事情 在 src/index.js 中随便写点东西 class Test { constructor() { document.writeTest(‘hello world’) } } new Test() 先来打个包看…

1.代码 axios.get(`/ExcelExamLogByExamPlan?id=123`,{responseType: ‘blob’}).then(res => { const data = res.data const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})) const link = document.createElement(‘a’) link.style.display = ‘none’ link.href = url link.setAttribute(‘download’, ‘excel.xls’) document.body.appendChild(link) link.click() document.body.removeChild(link) }) 2.后记 文件下载后windows自带的excel打开始终提示格式类型错误，但是用wps可以打开，后来发现setAttribute部分设置把xlsx改为xls即可

1.文件路径 ./config/index.js 2.内容 这里我们对应了两个后端服务器，特殊的/api写在前面，通用的卸载后面 proxyTable: { ‘/api’:{ target:’http://abc.com:3101/’, changeOrigin: true, pathRewrite:{ ‘^/api’:” } }, ‘/’:{ target:’http://100.100.100.100:8001′, changeOrigin: true } } 页面内请求写法： axios.get(‘/api/list’) axios.get(‘/list’) 3.其他 配置保存后，记得重启npm开发环境，否子配置不会生效

watch:{ shroleid:{ immediate:true, handler(id){ this.getData(id) }} }