59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="custom-search-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"
|
||
|
|
></tm-input>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { defineProps, defineEmits, reactive, watch } from 'vue'
|
||
|
|
const props = defineProps({
|
||
|
|
searchText: String,
|
||
|
|
first_talk_record_infos: Object,
|
||
|
|
})
|
||
|
|
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-search-input {
|
||
|
|
width: 100%;
|
||
|
|
.search-input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input::v-deep .tmicon-times-circle-fill::before {
|
||
|
|
content: '\e82a';
|
||
|
|
color: #d2d2d5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|