Skip to content
内容大纲
官方QQ交流群
pc端ui:468705115   点此加入
移动端ui:468217742   点此加入
技术交流1:87208295   点此加入
技术交流2:787747122   点此加入
官网
云控制台
开放平台
关注微信公众号
代码仓库: 码云

cv-textarea 多行输入框

简要

多行输入框
多行输入框,一般和表单配合使用,默认为实心白色背景。

示例

vue
<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-textarea</view>
      <view class="components-title-d">多行文本输入框</view>
    </view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData" style="padding: 0 10px">
      <cv-form-item label="建议" required>
        <cv-textarea v-model="formData.textarea1" placeholder="请输入您的宝贵意见" maxlength="10" />
        <template v-slot:tip>请输入您的宝贵意见,我们会认真为您服务</template>
      </cv-form-item>
      <cv-form-item label="建议" required labelPosition="top">
        <cv-textarea v-model="formData.textarea2" placeholder="请输入您的宝贵意见" maxlength="500" />
        <template v-slot:tip>请输入您的宝贵意见,我们会认真为您服务</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>
<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        textarea1: '',
        textarea2: '呵呵呵'
      }
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.formData.textarea1 = '默认值';
      });
      console.log('模拟请求数据', this.formData);
    }, 1000);
  },
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {
      console.log(this.formData.checkboxtag);
    }
  }
};
</script>

属性

属性名类型默认值说明
v-modelString-数据双向绑定
placeholderString-占位符
disabledBoolenfalse是否禁止
maxlengthNumber-1输入长度限制
clearableBooleanfalse是否显示一键清空按钮

Copyright © 2017 10yun.com | 十云提供计算服务-IPV6 | ctocode组开发