81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<view class="w-click-input" hover-class="w-click-hover" hover-stay-time="200" @tap="$emit('click')">
|
|
<uni-icons :type="props.preIcon" :size="22" color="#C3C6CD" v-if="props.preIcon && !disabled" style="margin-right: 5px;"></uni-icons>
|
|
<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>
|
|
<label v-if="isColse && !props.readonly" @click.stop="onClose">
|
|
<uni-icons v-show="!disabled" type="close" :size="20" color="#999"></uni-icons>
|
|
</label>
|
|
<uni-icons v-show="!disabled" v-if="!props.readonly && !isColse" type="right" :size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, computed} from 'vue'
|
|
|
|
const props = defineProps({
|
|
//前缀图标
|
|
preIcon: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
split: {
|
|
type: String,
|
|
default: '、'
|
|
},
|
|
//取对象key值
|
|
index: String,
|
|
//值
|
|
value: Number | String | Object | Array | Function,
|
|
//自定义取名函数
|
|
valueFunc: Function,
|
|
placeholder: String,
|
|
disabled: Boolean,
|
|
isColse: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
})
|
|
|
|
const showVal = computed(() => {
|
|
if(typeof(props.value) === 'string'){
|
|
return props.value !== ''
|
|
}else if(Array.isArray(props.value)){
|
|
return props.value.length > 0
|
|
}
|
|
return props.value || false
|
|
})
|
|
|
|
const _value = computed(() => {
|
|
if (Array.isArray(props.value)){
|
|
return props.index ? props.value.map(v => v[props.index]).join(props.split) : props.value.join(props.split)
|
|
}else if('object' === typeof(props.value)){
|
|
return props.index ? props.value[props.index] : JSON.stringify(props.value)
|
|
}else if('function' === typeof(props.value)){
|
|
return props.value()
|
|
}else {
|
|
return (props.value || '') == '' ? props.placeholder : props.value
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['update:modelValue'])
|
|
const onClose = () => {
|
|
emits('customEvent')
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.w-click-input {
|
|
font-size: 32rpx;
|
|
padding: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 2px;
|
|
.w-click-input-value {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style> |