cv-textarea-btn 多行输入框

简要

type属性为textarea的input
带按钮的多行文本输入框，一般和表单配合使用，默认为实心白色背景。

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>textarea 组件 - 文本域</h1>

      <cvTextarea btnText="确定" v-model="formData.textarea" rows="5" />
      <h1>textarea 组件 - 带按钮</h1>
      <cv-textarea-btn btnText="确定" v-model="formData.textarea" rows="5" @btnClick="handleBtnClick">
        <cv-btn-base type="primary">主要按钮</cv-btn-base>
        <cv-btn-base type="success">成功按钮</cv-btn-base>
        <cv-btn-base type="primary" icon="el-icon-edit">cv-btn-base</cv-btn-base>
        <cv-btn-base type="success">cv-btn-base</cv-btn-base>
      </cv-textarea-btn>
    </div>
    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // input数据
      formData: {}
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('最后的formData', this.formData);
    },
    // 带搜索按钮的事件
    handleBtnClick(value) {
      console.log('收到子组件传递来的事件', value);
    }
  }
};
</script>

:::

属性

属性名	类型	默认值	说明	可选
placeholder	String	-	输入框占位文本	-
disabled	Boolen	false	是否禁止	-
v-model	String	-	数据双向绑定	-
size	String	-	尺寸	medium / small / mini
rows	String / number	3	输入框行数	-
autosize	boolean / object	-		-

• [ autosize ] 内置规则

自适应内容高度，可传入对象限制高度，如，{ minRows: 2, maxRows: 6 }

• [ rules ] 内置规则

规则	说明
max	最大长度限制
min	最小长度限制
zh	必须中文
en	必须英文
ennum	必须字母和数字
username	可以是中英文数字下划线，但不能以数字开头

插槽

name	说明
-	预留了匿名插槽可以自定义按钮

事件

事件名	参数	说明
btnClick	value	单击按钮时触发的事件，会返回输入框的值