You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.0 KiB
49 lines
1.0 KiB
1 year ago
|
<!-- 公共输入框组件 -->
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { Button, Textarea } from 'ant-design-vue'
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: '在此输入你想了解的内容（Shift + Enter = 换行）',
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
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" @click="handeleSend">
|
||
|
|
发送
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|