9 changed files with 84 additions and 7 deletions
@ -0,0 +1,3 @@
|
||||
export interface Props { |
||||
height?: string |
||||
} |
@ -0,0 +1,3 @@
|
||||
import AppTextarea from './index.vue' |
||||
|
||||
export { AppTextarea } |
@ -0,0 +1,48 @@
|
||||
<!-- 公共输入框组件 --> |
||||
<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> |
Loading…
Reference in new issue