wx-vue

# Input 输入框

表单类型组件，结合form组件使用

# 基本类型

输入框类型包括text、number 和 password。

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="基本类型">
      <wx-input label="帐号" placeholder="请输入帐号"></wx-input>
      <wx-input type="password" label="密码" placeholder="请输入密码" v-model="pwd"></wx-input>
      <wx-input type="number" label="手机号" placeholder="11位手机号(数字)"></wx-input>
    </wx-form-group>
  </wx-form-body>
</wx-form>

<script>
export default {
  data() {
    return {
      pwd: "*1234567*"
    };
  }
};
</script>

# 只读/不可用

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="只读/不可用">
      <wx-input label="所在地区" placeholder="请输入您的所在地区" readonly></wx-input>
      <wx-input label="详细地址" placeholder="请输入您的详细地址" disabled></wx-input>
    </wx-form-group>
  </wx-form-body>
</wx-form>

# 显示清除

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="只读/不可用">
      <wx-input  type="number" label="邮政编码" placeholder="请输入您的邮政编码" clearable></wx-input>
    </wx-form-group>
  </wx-form-body>
</wx-form>

# 自定义样式

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="自定义样式">
      <wx-input placeholder="不带标签"></wx-input>
      <wx-input placeholder="请输入帐号或手机号">
        <template #prefix>
          <img
            src="../assets/user.png"
            style="width:20px;height:20px;vertical-align:middle;margin-bottom:3px;"
          />
        </template>
        <template #suffix>
          <i class="weui-icon-info-circle"></i>
        </template>
      </wx-input>
      <wx-input label="验证码" placeholder="请输入验证码" class="weui-cell_vcode">
        <template #suffix>
          <wx-button type="light" class="weui-vcode-btn">获取验证码</wx-button>
        </template>
      </wx-input>
    </wx-form-group>
  </wx-form-body>
</wx-form>

# 数据校验

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="数据验证">
      <wx-input
        type="number"
        label="手机号"
        required
        pattern="^\d{11}$"
        placeholder="请输入您的手机号"
        not-match-tips="请输入正确的手机号"
        :max-length="11"
      ></wx-input>
      <wx-input
        label="身份证号"
        pattern="/(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/"
        placeholder="请输入您的身份证号"
        not-match-tips="请输入正确的身份证号"
      ></wx-input>
    </wx-form-group>
  </wx-form-body>
  <wx-form-action>
    <wx-button @click="handleClick">确定</wx-button>
  </wx-form-action>
</wx-form>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.form.validate(error => {
        if (error) {
          this.$tooltip(error)
        } else {
          this.$toast("验证成功", { type: "success" })
        }
      });
    }
  }
};
</script>

提示

表单布局和表单校验可参考Form

# Input Attributes

参数 说明 类型 可选值 默认值
v-model/value 绑定值 String/Number - -
type 输入框类型 String text/number/password text
label 输入框标题 String - -
placeholder 输入框占位文本 String - -
required 是否必填 Boolean - false
pattern 正则校验表达式 String - -
emptyTips 空值校验提示信息 String - -
notMatchTips 正则校验错误提示信息 String - -
maxLength 字符数限制 Number - -
readonly 只读状态 Boolean - false
disabled 禁用状态 Boolean - false
clearable 是否显示清除 Boolean - false

# Input Events

事件名称 说明 回调参数
blur 在 Input 失去焦点时触发 event: Event
focus 在 Input 获得焦点时触发 event: Event
input 在 Input 值改变时触发 value: string
back
输入框

← Picker 选择框 →