86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<template>
|
|
<div class="custom-input">
|
|
<tm-input
|
|
class="search-input"
|
|
placeholder="请输入…"
|
|
color="#F9F9FD"
|
|
:round="1"
|
|
prefix="tmicon-search"
|
|
prefixColor="#46299D"
|
|
:prefixLabel="props?.first_talk_record_infos?.receiver_name"
|
|
v-model.lazy="state.searchText"
|
|
@input="inputSearchText"
|
|
:showClear="true"
|
|
@clear="clearInput"
|
|
placeholderStyle="color:#BABABA"
|
|
:disabled="props?.disabled"
|
|
></tm-input>
|
|
<div v-if="props?.disabled" class="custom-input-disabled"></div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { defineProps, defineEmits, reactive, watch } from 'vue'
|
|
const props = defineProps({
|
|
searchText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
first_talk_record_infos: {
|
|
type: Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
})
|
|
const state = reactive({
|
|
searchText: '', //搜索内容
|
|
})
|
|
const emits = defineEmits(['inputSearchText'])
|
|
|
|
watch(
|
|
() => props.searchText,
|
|
(newSearchText) => {
|
|
state.searchText = newSearchText
|
|
},
|
|
)
|
|
|
|
//清除输入的搜索内容
|
|
const clearInput = () => {
|
|
inputSearchText('')
|
|
}
|
|
|
|
//输入搜索文本
|
|
const inputSearchText = (e) => {
|
|
emits('inputSearchText', e)
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.custom-input {
|
|
width: 100%;
|
|
position: relative;
|
|
.search-input {
|
|
width: 100%;
|
|
}
|
|
::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder {
|
|
background: #f9f9fd !important;
|
|
border-radius: 8rpx !important;
|
|
}
|
|
.search-input::v-deep .tmicon-times-circle-fill::before {
|
|
content: '\e82a';
|
|
color: #d2d2d5;
|
|
}
|
|
|
|
.custom-input-disabled {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
</style>
|