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>

View Code

 

 然后用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);
}

View Code

最后在组件里使用

 <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>

View Code

项目里有个需求是提示收藏成功，出现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>

View Code

然后给他加一个定时器

changeTip () {
                this.tip = !this.tip;
                let self = this;
                 if (self.tip) {
                        setTimeout(() => {
                            self.tip = false;
                        }, 1000);
                    }
            },

View Code

 

：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 之前，不然会报错

 

 

转载于:https://www.cnblogs.com/raocheng/p/6439653.html