uniapp 微信小程序 弹窗 选择后同步修改
组件代码
/**
* @Author: 858834013@qq.com
* @Name: load
* @Date: 2022-04-22
* @Desc: 是否标载
*/
<template>
<div>
<div @click="getshow">
<div class="userInfo1">
<div class="userInfoName">
<text>是否标载</text>
</div>
<div class="bodys">
<input :value="name" disabled="" type="text" placeholder="请选择"
placeholder-style="font-size:32rpx;color: #D5D5E0;" />
<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_right.png"
mode="widthFix"></image>
</div>
</div>
</div>
<u-picker :title="title" :show="show" @cancel="show=false" @confirm="getConfirm" :columns="list"></u-picker>
</div>
</template>
<script>
export default {
name: 'VehicleType',
props: {
value: {
type: String,
default () {
return ''
}
},
},
data() {
return {
show: false,
title: '是否标载',
datalist: [{
name: '是',
id: 0
}, {
name: '否',
id: 1
}],
list: [
['是', '否']
]
};
},
computed: {
name: function() {
var name = ''
this.datalist.forEach((type) => {
if (this.value == type.id) {
name = type.name
}
});
return name
}
},
mounted() {},
methods: {
getshow() {
this.show = true
},
getConfirm(e) {
var that = this;
that.$emit("update:value", this.datalist[e.indexs[0]].id);
this.show = false
},
}
}
</script>
<style lang="scss" scoped>
.userInfo1 {
width: 630rpx;
min-height: 157rpx;
background: rgba(216, 216, 216, 0);
box-shadow: 0px 1rpx 0px 0px #F2F2F2;
margin: 0 auto;
.bodys {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
image {
width: 32rpx;
}
}
.userInfoName {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
padding-top: 32rpx;
text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
}
.red {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FF5252;
margin-top: -15rpx;
}
}
.userInfoName2 {
text {
color: #BABBCB;
}
.red {
color: #FFD0CF;
}
}
input {
margin-top: 8rpx;
color: #474A77;
font-size: 32rpx;
z-index: 1;
position: relative;
}
.disabled {
color: #C8C8D6;
}
}
</style>
使用
<load :value.sync="data.WhetherToMark"></load>