wppeng
wppeng
  • 发布:2020-03-26 10:36
  • 更新:2020-03-26 13:31
  • 阅读:579

【报Bug】升级V3后,好多封装的组件报错了

分类:uni-app

组件写法

<!-- input -->  
<template>  
    <view class='input'>  
        <view class="title" :style="{width:labelWidth+'px'}">  
            <text>{{label}}</text>  
            <text v-if="required" class="required">*</text>  
        </view>  
        <view class="data" :style="{width:valueWidth}">  
            <input type="number" :value="dataValue" @input="inputValue" :placeholder="placeholder" v-if="!readonly"/>  
            <text v-else>{{dataValue}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            label: {  
                type: String,  
                default: '标题'  
            },  
            labelWidth:{  
                type:Number,  
                default: 84  
            },  
            placeholder:{  
                type: String,  
                default: '请输入数据'  
            },  
            keyname:{  
                type: String,  
                default: ''  
            },  
            dataVal: {  
                type: String,  
                default: ''  
            },  
            required:{  
                type:Boolean,  
                default: false  
            },  
            readonly:{  
                type:Boolean,  
                default: false  
            }  

        },  
        data() {  
            return {  
                dataValue:''  
            }  
        },  
        onLoad() {  

        },  
        /**  
        * 计算属性  
        */  
        computed: {  
            valueWidth(){  
                let screenWidth=this.$store.state.systemInfo.screenWidth;  
                return (screenWidth-this.labelWidth-16)+'px';  
            }  
        },  
        watch:{  
            dataVal(newVal,oldVal){  
                this.dataValue=newVal;  
            }  
        },  
        methods: {  
            inputValue(e){  
                let val=e.target.value;  
                this.dataValue=val;  
                let key=this.keyname;  
                let obj={  
                    [key]:val  
                }  
                this.$store.commit('updateSelectPageData',obj);  

                this.$emit('change');  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .input{  
        display: flex;  
        justify-content: space-between;  
        align-items: center;  
        border-bottom: 2upx solid #eee;  
        padding: $my-component-edit-padding;  
        background: #fff;  
    }  
    .title{  
        display: flex;  
        justify-content: $my-component-edit-required;  
        align-items: center;  
    }  
    .required{  
        color: #FF5722;  
        display: flex;  
        align-items: center;  
        padding-right: 8upx;  
    }  
    .data{  
        display: flex;  
        justify-content: flex-end;  
        color: #ababab;  
    }  
    input,.data text{  
        width: 100%;  
    }  
</style>

报错见附件

2020-03-26 10:36 负责人:无 分享
已邀请:
wppeng

wppeng (作者)

找到原因了,是我写的有问题

  • 左右摇摆

    哈哈

    2020-03-26 15:09

  • wppeng (作者)

    回复 左右摇摆: V3只要页面上绑定的数据出现undefined,不进行判断就会出错

    2020-03-26 15:41

该问题目前已经被锁定, 无法添加新回复