92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<text class="w-form-input-rv" v-if="readonly">{{_value}}</text>
|
|
<uni-data-checkbox v-else-if="formProps.expanding" v-model="_value" :disabled="readonly" :localdata="options" />
|
|
<picker v-else @change="ok" mode="selector" @cancel="onCancel" :value="pickerIndex" :range="pickerOptions" :disabled="readonly">
|
|
<!-- <uni-search-bar v-if="isSearch" bgColor="#fff" v-model="searchValue" class="search" radius="5"
|
|
placeholder="请输入" clearButton="auto" cancelButton="none" /> -->
|
|
<!-- @input="searchChange" -->
|
|
<click-input @click="isSearchFn()" :value="modelValue ? pickerOptions[pickerIndex] : null" :disabled="readonly"
|
|
:placeholder="formProps.placeholder || '请选择'" />
|
|
</picker>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import ClickInput from '@/components/ClickInput.vue'
|
|
|
|
const props = defineProps({
|
|
formProps: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
modelValue: String,
|
|
readonly: Boolean
|
|
})
|
|
const options = computed(() => {
|
|
return props.formProps.options.map(v => {
|
|
return { text: v, value: v }
|
|
})
|
|
})
|
|
const pickerOptions = computed(() => {
|
|
console.log(JSON.stringify(props.formProps.options),searchValue.value,777888)
|
|
return props.formProps.options.filter(item => item.includes(searchValue.value))
|
|
})
|
|
const pickerIndex = computed(() => {
|
|
let findIndex = props.formProps.options.findIndex(item => {
|
|
return item == props.modelValue
|
|
})
|
|
return findIndex != -1?findIndex:0
|
|
})
|
|
const index = ref(0)
|
|
|
|
const _value = computed({
|
|
get() {
|
|
// console.log(props.modelValue,'单选框111')
|
|
return props.modelValue
|
|
},
|
|
set(val) {
|
|
emits('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['update:modelValue'])
|
|
|
|
// 搜索查询
|
|
const isSearch = ref(false);
|
|
const searchValue = ref("");
|
|
|
|
const isSearchFn = () => {
|
|
setTimeout(() => {
|
|
isSearch.value = true;
|
|
}, 400)
|
|
}
|
|
const onCancel = () => {
|
|
isSearch.value = false;
|
|
}
|
|
|
|
function ok(e) {
|
|
index.value = e.detail.value
|
|
_value.value = props.formProps.options[index.value]
|
|
isSearch.value = false;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search {
|
|
position: fixed;
|
|
/* bottom: 465rpx; */
|
|
/* bottom: 244rpx; */
|
|
bottom: 400rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
padding: 0;
|
|
}
|
|
|
|
.search /deep/ .uni-searchbar__box {
|
|
width: 400rpx;
|
|
border: 2rpx solid #f5f5f5;
|
|
}
|
|
</style> |