QinUi

# Textarea 文本域

统一封装

# 基础用法

<template>
  <qinui-textarea placeholder="请输入内容" v-model="value" />
</template>

<script>
  export default {
    data() {
      return {
        value: '',
      };
    },
  }
</script>

# 字数统计

设置 :count="true" 显示计数。设置 :maxlength="200" 控制最大长度。

<template>
  <qinui-textarea
    v-model="value"
    placeholder="请输入内容"
    :maxlength="200"
    :count="true"
  />
</template>

<script>
  export default {
    data() {
      return {
        value: '',
      };
    },
  }
</script>

# 灰色模式

设置 theme="gray" 背景变灰色。

<template>
  <qinui-textarea
    v-model="value"
    theme="gray"
    border="none"
    placeholder="请输入内容"
    :maxlength="200"
    count
  />
</template>

<script>
  export default {
    data() {
      return {
        value: '',
      };
    },
  }
</script>

# 无边框模式

设置 border="none" 。

<template>
  <qinui-textarea
    v-model="value"
    border="none"
    placeholder="请输入内容"
  />
</template>

<script>
  export default {
    data() {
      return {
        value: '',
      };
    },
  }
</script>

# API

# Props

参数 说明 类型 默认值 可选值
modelValue(v-model) 输入内容 String - -
placeholder 输入框为空时的占位符 String - -
maxlength 最大输入长度，设置为 -1 的时候不限制最大长度 String | Number -1 -
border 边框类型，round-四周边框，bottom-底部边框，none-无边框 String round round | bottom | none
count 是否显示计数 Boolean false true | false
placeholderStyle 指定placeholder的样式 String - -
diyStyle 自定义外部样式，如：设置边框等样式 String - -

# Events

事件名 说明 回调参数
@change 改变值触发 -

← List 虚拟列表 →