cv-input-btn 自带按钮的输入框

简要

自带按钮的文本输入框，一般和表单配合使用，默认为实心白色背景。

示例

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-input-btn</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="真实姓名">
        <cv-input-text v-model="formData.name" placeholder="请输入您的真实姓名" />
        <cv-btn-base @click="onClick" size="mini">按钮1</cv-btn-base>
      </cv-form-item>
      <cv-form-item label="真实姓名" labelPosition="top">
        <cv-input-text v-model="formData.name" placeholder="请输入您的真实姓名" />
        <cv-btn-base @click="onClick" size="mini">按钮2</cv-btn-base>
      </cv-form-item>
      <cv-form-item label="姓名" labelPosition="top">
        <cv-input-text v-model="formData.name" placeholder="请输入您的真实姓名" />
        <cv-btn-base @click="onClick" size="mini">按钮3</cv-btn-base>
        <template v-slot:tip>长度必须大于等于两个中文字符</template>
      </cv-form-item>
      <cv-form-item label="输入框" labelPosition="top">
        <cv-input-text v-model="name" placeholder="右侧带有单位的输入框" />
        <cv-btn-base @click="onClick" size="mini" disabled>按钮3</cv-btn-base>
        <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: ''
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.name = '192';
        this.formData.name = '小红';
      });
      console.log('模拟请求数据', this.formData, this.name);
    }, 1000);
  },
  methods: {
    onClick(e) {
      uni.showToast({
        title: '此处可自定义方法',
        duration: 2000,
        icon: 'none'
      });
    },
    clickTest(e) {
      console.log(this.formData.name);
    }
  }
};
</script>

属性

属性名	类型	默认值	说明
v-model	String	-	数据双向绑定
placeholder	String	-	占位符
disabled	Boolen	false	是否禁止
maxlength	Number	-1	输入长度限制

事件

事件名	说明	返回值
@click	点击	点击按钮 触发事件