1、element UI的select multiple是设置默认值
默认值需要是数组格式
2、element UI的table 传参数2种
@click="handleDelete(scope.$index, scope.row)" //写法 handleDelete(scope.$index, scope.row) //调用
@click="handleEdit(scope.row)" //写法 handleDelete({ $index, row }) //调用
3、回调函数传参数的方法(闭包)
使用回调函数的方法
function A(param) { console.log(param) } function B(param, cb) { console.log(param) cb(param) } B(1, A); //调用
现在的需求是,回调函数需要传入参数,且参数的个数不确定,这个时候就需要使用闭包
function A1(param) { console.log(param) } function A2(param1, param2) { console.log(param) } function B(cb) { cb() } B(function() {A1(1)}) B(function() {A2(1, 2)})
4、ES6扩展运算符...
1)函数调用
function add(x, y) { return x + y; } var numbers = [4, 38]; add(...numbers) // 42
将一个数组变成参数序列
2)替代数组的apply方法
// ES5 的写法 Math.max.apply(null, [14, 3, 77]) // ES6 的写法 Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77);
3)合并数组
// ES5 的合并数组 arr1.concat(arr2, arr3); // ES6 的合并数组 [...arr1, ...arr2, ...arr3]
5、vue 音频的播放和暂停
需求是在列表中播放音频
<audio :ref="'wordaudio'+ scope.$index" :src="scope.row.sound_am_uri" @ended="wordAudioEnd(scope.$index)" /> <div class="horn-box"><svg-icon icon-class="horn" /></div>
动态设置 ref属性,下边播放按钮,点击播放按钮,获取dom元素, this.$refs[name].play() 播放音频, this.$refs[item].pause() 暂停音频,ended是监控事件。往往需要点击其中一个的时候,让其他的暂停掉
Object.keys(this.$refs).forEach(item => { if (item.indexOf('wordaudio') !== -1) { wordPlaying[item.slice(9)] = false //标志播放暂停this.$refs[item].pause() } })
6、内容列表的显示和隐藏
判断内容是否发生截断,判断有超出隐藏和无超出隐藏(操作类class)的时候,高度是否一致,一致或小于的话就是没有发生截断,不用出现"全部"按钮。
点击全部的时候取消隐藏的类即可
7、element动态添加表格
动态添加表格只能使用v-for,点击添加的时候数组push空数据
1 <el-col v-for="(item, index) in wordData.translation" :key="index" :span="23" style="margin-bottom: 10px;"> 2 <el-input v-model="item.means" placeholder="请输入释义" class="input-with-select" style="width: 350px;"> 3 <el-select slot="prepend" v-model="item.part" placeholder="词性" style="width: 100px;"> 4 <el-option 5 v-for="item in partList" 6 :key="item.type" 7 :label="item.name" 8 :value="item.type" 9 /> 10 </el-select> 11 </el-input> 12 <el-button v-if="index>0" type="danger" size="small" icon="el-icon-delete" @click.prevent="removeTrans(index)" /> 13 </el-col>
点击添加事件的时候
addTrans() { // 添加常用释义 this.wordData.translation.push({ part: 'n.', means: '' }) },
8、单张图片的上传和预览
用elementui 上传图片,点击图片后并不是立即上传到服务器,要预览图片的话需要先转为base64格式
(限制上传文件的类型 accept="image/gif, image/jpeg, image/png" )
1 <el-upload 2 ref="upload" 3 class="avatar-uploader" 4 action="123" //随便写 5 :http-request="uploadImage" 6 :auto-upload="false" //选择图片后不会立即上传 7 :show-file-list="false" 8 :on-change="handleWordImgChange" 9 > 10 <img v-if="wordData.img_uri" :src="wordData.img_uri" class="avatar"> 11 <i v-else class="el-icon-plus avatar-uploader-icon" /> 12 </el-upload>
1 // 当上传图片后,调用onchange方法,获取图片本地路径 2 handleWordImgChange(file, fileList) { 3 this.imgFile = file.raw 4 var _this = this 5 var myfile = file.raw 6 var reader = new FileReader() //html5读文件 7 reader.onload = function(e) { 8 _this.wordData.img_uri = e.target.result // 将图片路径赋值给src 9 } 10 reader.readAsDataURL(myfile) //转BASE64 11 },
9、上传文件formdata的使用
文件上传到服务器的时候就需要是form格式,
1 const formData = new FormData() 2 formData.append('name', this.wordData.name) 3 formData.append('sound_am', this.wordData.sound_am) 4 5 //提交 6 request({ 7 url: '/ma/company/word_update/', 8 method: 'post', 9 formData 10 }).then(res => {})
FormData 对象的用法:
1 //表单示例 2 <form id="myForm" action="" method="post"> 3 <input type="text" name="name">名字 4 <input type="password" name="psw">密码 5 <input type="submit" value="提交"> 6 </form> 7 8 //方法示例 9 // 获取页面已有的一个form表单 10 var form = document.getElementById("myForm"); 11 // 用表单来初始化 12 var formData = new FormData(form); 13 // 我们可以根据name来访问表单中的字段 14 var name = formData.get("name"); // 获取名字 15 var psw = formData.get("psw"); // 获取密码 16 // 当然也可以在此基础上,添加其他数据 17 formData.append("token","kshdfiwi3rh");
//添加数据 formData.append("k1", "v1"); //获取数据 formData.get("k1"); // "v1" //判断有没有数据 formData.has("k1"); // true //删除数据 formData.delete("k1");
当需要上传多个文件的时候,formData.append("k1", "v1"); formData.append("k1", "v2");往同一个key里添加数据即可
10、移动端 ios页面滑动卡顿
来源:https://blog.csdn.net/qq_39635302/article/details/79477596
<div class="containBox no-scrollbar"> <div> 滚动的内容 </div> </div>
//清除滚动条 .no-scrollbar::-webkit-scrollbar{ width: 0; height: 0; } //滚动容器 .containBox{ width: 100%; position: absolute; top: 50px; left: 0; right: 0; bottom: 50px; overflow-x: hidden; /*overflow-y:auto;//不能写,会和下面的产生冲突*/ -webkit-overflow-scrolling: touch; }
11、在局域网访问vue-cli项目
开发vue-cli项目,因为其他人也要测试使用,或者是手机端也要访问的话,就需要指定端口,在项目根目录的package.json
文件里进行配置,改变绑定的ip,打开package.json
,找到scripts
下的dev
结尾增加一个参数 --host 192.168.191.1(自己电脑的ip地址)
"scripts": { "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.191.1", },
12、合并表格
https://blog.csdn.net/qq_29468573/article/details/80742646
官网示例
1 if (columnIndex === 0) { 2 if (rowIndex % 2 === 0) { 3 return { 4 rowspan: 2, //合并两行 5 colspan: 1 6 }; 7 } else { 8 return { 9 rowspan: 0, 10 colspan: 0 //0就是不用显示 11 }; 12 } 13 }
要合并表格需要判断出哪一行需要合并,要合并几行。
因为已经把相同类的合并在一起,参考上述文章,根据每个类里边的数组条数判断应该合并几行,例如要合并3行,每行对应的合并数组就是[3, 0, 0]
13、keep-alive的使用 https://juejin.im/post/5b407c2a6fb9a04fa91bcf0d
现在每个页面都设置了缓存,但是多级目录的时候是有问题的
14、vue带参数打开新的页面
<router-link tag="a" target="_blank" :to="{ path: '/route', query:{a: 1 }}"> </router-link>
网上搜出来的结果五花八门,其实只用router-link标签就能跳转,target设为_blank就行
15、props default 数组/对象的默认值应当由一个工厂函数返回
https://segmentfault.com/q/1010000009467326
子组件的数据设置默认值得时候需要用工厂函数返回
1 props: { 2 filterObj: { 3 type: Object, 4 default: () => ({ 5 6 }) 7 }, 8 statusList: { 9 type: Array, 10 default: () => [] 11 }, 12 },
而且这个值不能在子组件中修改,就是子组件不能修改父组件的值,要修改的话可以通过事件触发父组件来修改
16、移动端H5页面
点击按钮的时候文字不能选中 user-select:none;
a标签为block时会有点击态 border: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline: none;
17、表单的验证
现在表单上定义 ref="formDom"
1 this.$refs['formDom'].clearValidate(); //清除表单样式 2 3 //提交的时候验证表单 4 this.$refs.formDom.validate((valid) => { 5 if (valid) { 6 //验证通 7 } 8 })
18、两层遮罩的时候遮罩层在弹出层上面
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
添加 :modal-append-to-body="false"
19、表格排序(版本)
20、http缓存
Cache-Control
通用消息头字段,被用于在http请求和响应中,通过指定指令来实现缓存机制。缓存指令是单向的,这意味着在请求中设置的指令,不一定被包含在响应中。