vuejs 开发中踩到的坑
用 v-for 循环式 每个item的值相等的情况下,会影响v-model的双向绑定;
Modal 组件开发,主要用slot 标签来实现
<template> <transition name="modal"> <div class="modal-mask" @click="$emit('close')"> <div class="modal-wrapper"> <div class="modal-container" @click.stop=''> <div class="modal-header"> <slot name="header"> </slot> </div> <div class="modal-body"> <slot name="body"> </slot> </div> <div class="modal-footer"> <slot name="footer"> <button class="modal-quit-button" @click="$emit('close')">取消</button> <button class="modal-sure-button" @click="$emit('ok')">确定</button> </slot> </div> </div> </div> </div> </transition> </template> <script> </script> <style lang="scss"> @import "../../css/public/modal.scss"; </style>
然后用sass写主要的样式
@import "../variable"; .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); display: table; transition: opacity .3s ease; .modal-wrapper { display: table-cell; vertical-align: middle; .modal-container { width: 394px; margin: 0 auto; background-color: $white; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; text-align: center; .modal-header { padding: 24px 0 15px 0; h3 { font-size: 18px; line-height: 1; color: $mainFontColor; } input { box-sizing: border-box; width: 354px; height: 30px; padding-left: 14px; border: 1px solid #dfdfdf; border-radius: 3px; } } .modal-body { margin: 0 auto; p { width: 226px; margin: 0 auto; } } .modal-footer { button { width: 75px; height: 30px; margin: 20px 37.5px; border-radius: 3px; color: $white; } .modal-quit-button { background-color: #d8d8d8; } .modal-sure-button { background-color: $eyeballColor; } } } } } .modal-enter { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); }
最后在组件里使用
<modal class="collect-modal" v-if='newPrograme.bool' @close='newPrograme.bool = false' @ok='submitNewPrograme()' > <div slot="header" > <span class="modal-title">收藏</span> </div> <div slot='body'> <div class="content"> <div class="content-left"> <img src="../../static/testPic/fense.png" width="156" height="156"> </div> <div class="content-right"> <span class="choose-file">选择文件夹</span> <div class="collect"> <span class="shoucang">one apple</span> <span @click="changeTip" class="shoucang-btn">收 藏<span/> </div> <span class="fengge">地中海风格</span> <div class="new-file"> <img src="../assets/detail/新建.png" @click="changeModal()" width="20" height="20" /> <span class="xinjian" >新建文件夹</span> </div> <div/> <div/> </div> </modal>
项目里有个需求是提示收藏成功,出现1秒就消失,最后也是用这个modal完成的代码如下
html:
<modal class="collect-tip" v-if='tip' @close='tip = false' @ok='submitNewPrograme()' > <div slot="header"> <h6>收藏成功</h6> </div> <div slot="footer" style="display: none"></div> </modal>
然后给他加一个定时器
changeTip () { this.tip = !this.tip; let self = this; if (self.tip) { setTimeout(() => { self.tip = false; }, 1000); } },
:class 绑定class样式时
获取data 里的数据不用加上this。
eslint中的坑:
禁用不必要的 .call()
和 .apply()
(no-useless-call)
函数的调用可以写成 Function.prototype.call()
和 Function.prototype.apply()
,但是 Function.prototype.call()
和 Function.prototype.apply()
比正常的函数调用效率低。
Rule Details
此规则的目的在于标记出可以被正常函数调用所替代的 Function.prototype.call()
和 Function.prototype.apply()
的使用。
错误 代码示例:
/*eslint no-useless-call: "error"*/
// These are same as `foo(1, 2, 3);`
foo.call(undefined, 1, 2, 3);
foo.apply(undefined, [1, 2, 3]);
foo.call(null, 1, 2, 3);
foo.apply(null, [1, 2, 3]);
// These are same as `obj.foo(1, 2, 3);`
obj.foo.call(obj, 1, 2, 3);
obj.foo.apply(obj, [1, 2, 3]);
正确 代码示例:
/*eslint no-useless-call: "error"*/
// The `this` binding is different.
foo.call(obj, 1, 2, 3);
foo.apply(obj, [1, 2, 3]);
obj.foo.call(null, 1, 2, 3);
obj.foo.apply(null, [1, 2, 3]);
obj.foo.call(otherObj, 1, 2, 3);
obj.foo.apply(otherObj, [1, 2, 3]);
// The argument list is variadic.
foo.apply(undefined, args);
foo.apply(null, args);
obj.foo.apply(obj, args);
Known Limitations
此规则通过静态地对比代码检测 thisArg
是否被改变。所以如果 thisArg
是个动态表达式,此规则不能作出正确的判断。
错误 代码示例:
/*eslint no-useless-call: "error"*/
a[i++].foo.call(a[i++], 1, 2, 3);
正确 代码示例:
/*eslint no-useless-call: "error"*/
a[++i].foo.call(a[i], 1, 2, 3);
使用vuex时,
...mapMutations({ setModalData: 'SET_MODAL_DATA', getFavoriteFolder: 'GET_FAVORITE_FOLDER', colletSingle: 'COLLET_SINGLE' }), ...mapActions({ getFavoriteFolder: 'getFavoriteFolder', colletSingle: 'colletSingle', newFolder: 'newFolder' })
mutation 要在action 之前,不然会报错