qn-ai-pc/src/components/AppTextarea/index.vue

<!-- 公共输入框组件 -->
<script setup lang="ts">
import { ref } from 'vue'
import { Button, Textarea } from 'ant-design-vue'

defineProps({
  placeholder: {
    type: String,
    default: '在此输入你想了解的内容（Shift + Enter = 换行）',
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['pressEnter', 'send'])

const value = ref('')

function pressEnter(event: KeyboardEvent) {
  if (event.shiftKey)
    return false
  emit('pressEnter', value.value)
  handeleSend()
}

function handeleSend() {
  emit('send', value.value)
  value.value = ''
}
</script>

<template>
  <div class="absolute right-0 bottom-5 w-full">
    <div class="relative">
      <Textarea
        v-model:value="value"
        class="pt-4 pr-34 pb-6 pl-4"
        :placeholder="placeholder"
        :auto-size="{ minRows: 3, maxRows: 8 }"
        @press-enter="pressEnter"
      >
      </Textarea>
      <Button
        class="w-28 absolute right-5 bottom-3"
        type="primary"
        :loading="btnLoading"
        @click="handeleSend"
      >
        发送
      </Button>
    </div>
  </div>
</template>

<style scoped></style>