cv-input-text 文本输入框 ¶

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-input-text</view>
      <view class="components-title-d">文本输入框</view>
    </view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData" style="padding: 0 10px">
      <cv-form-item labelWidth="0">
        <cv-input-text v-model="formData.name" placeholder="请输入您的真实姓名" />
      </cv-form-item>
      <cv-form-item label="左标题" labelWidth="80" required>
        <cv-input-text v-model="formData.name" clearable />
      </cv-form-item>
      <cv-form-item label="左标题" labelWidth="80" required>
        <cv-input-text v-model="formData.name" clearable />
        <template v-slot:tip>提示：带有一键清除的输入框</template>
      </cv-form-item>
      <cv-form-item label="上标题" labelPosition="top">
        <cv-input-text v-model="formData.name" placeholder="请输入您的真实姓名" clearable />
      </cv-form-item>
      <cv-form-item label="上标题" labelPosition="top">
        <cv-input-text v-model="formData.name" placeholder="请输入您的真实姓名" clearable />
        <template v-slot:tip>提示：带有tip参数的输入框</template>
      </cv-form-item>
      <cv-form-item label="左标题" required>
        <cv-input-text v-model="formData.name" placeholder="请输入您的真实姓名" clearable>
          <template v-slot:append>KG</template>
        </cv-input-text>
        <template v-slot:tip>提示：右侧带有单位的输入框</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        name: '测试'
      },
      jiage1: '0',
      jiage2: '0',
      name: '',
      tip: '长度必须大于等于两个中文字符'
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.name = '192';
        this.formData.name = '小红';
      });
      console.log('模拟请求数据', this.formData, this.name);
    }, 0);
  },
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {
      console.log(this.formData.name);
    }
  }
};
</script>
<style scoped>
page {
  background-color: #fff;
}
</style>