Input

Input

输入框。

引入

import { Input } from 'we-vue'
Vue.use(Input)

WARNING

input 只能在 group 中使用。

例子

默认示例

<w-group title="默认">
  <w-input label="label" placeholder="请输入内容" v-model="valueText"></w-input>
  <w-input label="label" placeholder="请输入数字" type="number" v-model="valueNumber"></w-input>
</w-group>

带数据验证

<w-group title="带验证">
  <w-input label="请输入 abc" placeholder="请输入 abc" v-model="valueText" pattern="^abc$" :validate-mode="{onFocus: false}"></w-input>
  <w-input label="必填字段" placeholder="请输入内容" v-model="valueRequired" required></w-input>
  <w-input label="失焦时验证" placeholder="请输入内容" v-model="valueOnBlur" required :validate-mode="{onFocus: false, onBlur: true, onChange: false}"></w-input>
</w-group>

只读

<w-group title="只读">
  <w-input label="label" placeholder="请输入内容" :readonly="true" v-model="valueReadonly"></w-input>
</w-group>

自定义标签宽度

<w-group title="自定义标签宽度">
  <w-input label="这是一个比较长的标签" :labelWidth="190" placeholder="请输入内容" v-model="valueText"></w-input>
</w-group>

无标签

<w-group title="无标签">
  <w-input placeholder="请输入内容" v-model="valueText"></w-input>
</w-group>

综合示例

<w-group title="综合示例">
  <w-input label="短信验证码" placeholder="请输入验证码" v-model="captcha">
    <button class="weui-vcode-btn" slot="ft">获取验证码</button >
  </w-input>
  <w-input label="验证码" class="weui-cell_vcode" placeholder="请输入验证码" v-model="vcode">
    <img :src="vcodeImage" class="vcode" slot="ft"/>
  </w-input>
</w-group>

API

TIP

validate-mode 中 onInput 模式为 v1.4.15 新增

Slots

Methods

• focus() (v1.4.4以上可用)

用于指定 input 组件获取输入焦点

this.$refs.theInput.focus()  // 其中 theInput 为对应 input 组件的 ref 值