用 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:;
top:;
left:;
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:;
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:;
} .modal-leave-active {
opacity:;
}
.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 之前，不然会报错
