组件写法
<!-- 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 15:09
wppeng (作者)
回复 左右摇摆: V3只要页面上绑定的数据出现undefined,不进行判断就会出错
2020-03-26 15:41