TPrSender

基础用法

<template>
  <t-pr-sender v-model="textarea"> </t-pr-sender>
</template>
<script setup lang="ts">
import { ref } from "vue"
let textarea = ref("欢迎使用Prd-ai-coms")
</script>
<style lang="scss" scoped></style>

禁用输入框

禁用输入框

使用disabled属性，达到禁用输入框的目的。

<template>
  <t-pr-sender v-model="textarea" disabled> </t-pr-sender>
</template>
<script setup lang="ts">
import { ref } from "vue"
let textarea = ref("欢迎使用Prd-ai-coms")
</script>
<style lang="scss" scoped></style>

可清空输入框

清空按钮

使用isClear属性，控制输入框清空按钮是否显示，只有在输入框有值时才会显示清空按钮。

<template>
  <t-pr-sender v-model="textarea" isClear> </t-pr-sender>
</template>
<script setup lang="ts">
import { ref } from "vue"
let textarea = ref("欢迎使用Prd-ai-coms")
</script>
<style lang="scss" scoped></style>

提交加载输入框

加载状态

通过控制loading属性，达到切换输入框的加载状态。

<template>
  <t-pr-sender v-model="textarea" :loading="loading" isClear @submit="submit"> </t-pr-sender>
</template>
<script setup lang="ts">
import { ref } from "vue"
let textarea = ref("欢迎使用Prd-ai-coms")
let loading = ref(false)

const submit = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 3000)
}
</script>
<style lang="scss" scoped></style>

配置参数

参数	说明	类型	默认值
loading	加载状态	boolean
isClear	是否可清空	boolean	无
disabled	禁用状态	boolean	true
placeholder	文字描述	string	无
rows	输入框行数	number	1
autosize	头像大小	boolean/object	false
autofocus	自动获取焦点	boolean	false
modelValue	绑定值	string/number	false
readonly	只读	boolean	false

插槽

插槽名	说明
dealBtn	处理按钮插槽