chat-app/src/components/custom-input/custom-input.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>