<template>
|
<view class="easy-select-form-item-compontent">
|
<view class="p-form-label" v-if="label"><text v-if="required" class="required-tag">*</text>{{label}}：</view>
|
<view class="input-row" @tap.stop="onOpenPicker">
|
<view class="mask" @tap.stop="" v-if="disabled"></view>
|
<view class="input-view">
|
<text v-if="!innerLabel" class="placeholder">{{placeholder}}</text>
|
<text v-else>{{innerLabel}}</text>
|
</view>
|
<view class="close-view" @tap.stop="onClear" v-if="innerLabel && clearable">
|
<view class="close-circle">
|
<u-icon
|
name="close"
|
size="11"
|
color="#ffffff"
|
customStyle="line-height: 12px"
|
></u-icon>
|
</view>
|
</view>
|
<view class="right-icon-view"><u-icon name="arrow-right" color="#909193" :size="24"></u-icon></view>
|
</view>
|
<view class="msg-row" v-if="msg" :class="[msgType==='info'?'info-type':'']">{{msg}}</view>
|
|
<easy-picker :visible.sync="pickerVisible" :list="list" :value-field="valueField" :label-field="labelField" @select="onPickerSelect" />
|
</view>
|
</template>
|
|
<script>
|
import EasyPicker from './EasyPicker.vue'
|
export default {
|
name:'EasySelectFormItemCompontent',
|
components:{EasyPicker},
|
emits:['input','select','clear'],
|
props:{
|
label:{
|
type:String,
|
default:''
|
},
|
placeholder:{
|
type:String,
|
default:'请选择...'
|
},
|
msg:{
|
type:String,
|
default:''
|
},
|
msgType:{
|
type:String,
|
default:'error'
|
},
|
value:{
|
type:[String,Boolean,Number,null],
|
default:null
|
},
|
list:{
|
type:Array,
|
default:function(){
|
return []
|
}
|
},
|
valueField:{
|
type:String,
|
default:'value'
|
},
|
labelField:{
|
type:String,
|
default:'label'
|
},
|
disabled:{
|
type:Boolean,
|
default:false
|
},
|
clearable:{
|
type:Boolean,
|
default:true
|
},
|
required:{
|
type:Boolean,
|
default:false
|
}
|
},
|
data(){
|
return {
|
innerValue:'',
|
innerLabel:'',
|
pickerVisible:false,
|
initFlag:false
|
}
|
},
|
watch:{
|
value(newVal,oldVal){
|
if (newVal!==this.innerValue) {
|
this.innerValue = newVal;
|
}
|
},
|
innerValue(newVal,oldVal){
|
if (newVal!==this.value) {
|
this.$emit('input',newVal)
|
}
|
if (newVal!==oldVal) {
|
this.setLabelValue()
|
}
|
},
|
list(){
|
this.setInitData()
|
}
|
},
|
methods:{
|
onOpenPicker(){
|
if (this.list.length<=0) return false
|
this.pickerVisible = true
|
},
|
onPickerSelect(value,selection,index){
|
if (value===this.innerValue) return false;
|
this.innerValue = value;
|
this.$emit('select',value,selection,index)
|
},
|
setLabelValue(){
|
let noMatch = true;
|
for (let i=0;i<this.list.length;i++) {
|
if (this.isBaseItem(this.list[i])) {
|
if (this.list[i]===this.innerValue) {
|
this.innerLabel = this.list[i];
|
noMatch = false;
|
break;
|
}
|
} else {
|
if (this.list[i][this.valueField]===this.innerValue) {
|
this.innerLabel = this.list[i][this.labelField];
|
noMatch = false;
|
break;
|
}
|
}
|
}
|
if (noMatch) {
|
this.innerLabel = this.innerValue
|
}
|
},
|
isBaseItem(item){
|
if (typeof(item)==='string'||typeof(item)==='number'||typeof(item)==='boolean'||item===undefined||item===null){
|
return true
|
} else {
|
return false
|
}
|
},
|
setInitData(){
|
this.innerValue = this.value;
|
if (this.list.length===1) {
|
if (!this.initFlag) {
|
this.initFlag = true
|
let _tempVal = null;
|
if (!this.isBaseItem(this.list[0])) {
|
_tempVal = this.list[0][this.valueField];
|
} else {
|
_tempVal = this.list[0];
|
}
|
if (!this.innerValue) {
|
this.innerValue = _tempVal;
|
}
|
}
|
} else {
|
this.setLabelValue()
|
}
|
},
|
onClear(){
|
this.innerValue = null;
|
this.$emit('clear')
|
}
|
},
|
created() {
|
this.setInitData()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.easy-select-form-item-compontent{
|
width: 100%;
|
.p-form-label{
|
font-size: 32rpx;
|
color: $u-tips-color;
|
padding-bottom: 12rpx;
|
padding-left: 20rpx;
|
.required-tag{
|
color:$u-error;
|
}
|
}
|
.input-row{
|
width: 100%;
|
height: 90rpx;
|
overflow: hidden;
|
background-color: $uni-bg-color;
|
display: flex;
|
align-items: center;
|
position: relative;
|
.close-view,.right-icon-view{
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.right-icon-view{
|
padding-right: 10rpx;
|
}
|
.close-view{
|
.close-circle{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: #c6c7cb;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
transform: scale(0.82);
|
margin-left: 4px;
|
}
|
}
|
.input-view{
|
flex-grow: 1;
|
padding-left: 20rpx;
|
font-size: 30rpx;
|
white-space:nowrap;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
color: rgb(48, 49, 51);
|
.placeholder{
|
color: rgb(192, 196, 204);
|
}
|
}
|
&>.mask{
|
background-color: #000;
|
opacity: 0.25;
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 100;
|
}
|
}
|
.msg-row{
|
padding: 6rpx 20rpx 0 20rpx;
|
line-height: 1.3;
|
font-size: 24rpx;
|
color: $u-error;
|
word-break:break-all;
|
word-wrap:break-word;
|
&.info-type{
|
color:$color-blue;
|
}
|
}
|
}
|
</style>
|
