89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view class="w-click-input" hover-class="w-click-hover" hover-stay-time="200" @tap="$emit('click')">
|
||
|
|
<uni-icons2 :type="$props.preIcon" :size="22" color="#C3C6CD" v-if="$props.preIcon && !$props.disabled"
|
||
|
|
style="margin-right: 10rpx;"></uni-icons2>
|
||
|
|
<slot v-if="showVal">
|
||
|
|
<text class="w-click-input-value">{{_value}}</text>
|
||
|
|
</slot>
|
||
|
|
<text v-else style="color: #999;" class="w-click-input-value">{{$props.placeholder}}</text>
|
||
|
|
<uni-icons2 v-show="!$props.disabled" v-if="!$props.readonly" type="right" :size="20" color="#999"></uni-icons2>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
//前缀图标
|
||
|
|
preIcon: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
split: {
|
||
|
|
type: String,
|
||
|
|
default: '、'
|
||
|
|
},
|
||
|
|
//取对象key值
|
||
|
|
index: String,
|
||
|
|
//值
|
||
|
|
value: Number | String | Object | Array | Function,
|
||
|
|
//自定义取名函数
|
||
|
|
valueFunc: Function,
|
||
|
|
placeholder: String,
|
||
|
|
disabled: Boolean
|
||
|
|
},
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
showVal() {
|
||
|
|
if (typeof(this.$props.value) === 'string') {
|
||
|
|
return this.$props.value !== ''
|
||
|
|
} else if (Array.isArray(this.$props.value)) {
|
||
|
|
return this.$props.value.length > 0
|
||
|
|
}
|
||
|
|
return this.$props.value || false
|
||
|
|
},
|
||
|
|
_value() {
|
||
|
|
console.log(22222, this.$props.value)
|
||
|
|
if (Array.isArray(this.$props.value)) {
|
||
|
|
return this.$props.index ? this.$props.value.map(v => v[this.$props.index]).join(this.$props.split) :
|
||
|
|
this.$props.value.join(this.$props.split)
|
||
|
|
} else if ('object' === typeof(this.$props.value)) {
|
||
|
|
return this.$props.index ? this.$props.value[this.$props.index] : JSON.stringify(this.$props.value)
|
||
|
|
} else if ('function' === typeof(this.$props.value)) {
|
||
|
|
return this.$props.value()
|
||
|
|
} else {
|
||
|
|
return (this.$props.value || '') == '' ? this.$props.placeholder : this.$props.value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.w-click-input {
|
||
|
|
font-size: 32rpx;
|
||
|
|
padding: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
|
||
|
|
.w-click-input-value {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|