文本框 Input

普通

<za-cell title="单行文本">
  <za-input ref="inputFirst" v-model="v1" type="text" placeholder="type is text" @change="handleChange" :clearable="true"></za-input>
</za-cell>
<za-cell title="多行文本">
  <za-input v-model="v2" type="textarea" placeholder="type is textarea" @change="handleChange2" :clearable="true"></za-input>
</za-cell>
<za-cell>
  <za-button size="xs" theme="primary" @click="focus">click to focus the first input</za-button>
</za-cell>

输入类型

<za-cell title="数字">
  <za-input-number v-model="v5" type="number" placeholder="type is number" @change="handleChange"></za-input-number>
</za-cell>
<za-cell title="金额">
  <za-input-number v-model="v6" type="price" placeholder="type is price" @change="handleChange"></za-input-number>
</za-cell>
<za-cell title="证件号">
  <za-input-number v-model="v7" placeholder="type is idcard" type="idcard" @change="handleChange"></za-input-number>
</za-cell>

只读 / 禁用状态

<za-cell title="单行文本">
  <za-input v-model="v8" type="text" readonly></za-input>
</za-cell>
<za-cell title="单行文本">
  <za-input v-model="v9" disabled></za-input>
</za-cell>
<za-cell title="多行文本">
  <za-input v-model="v8" rows="4" type="textarea" readonly></za-input>
</za-cell>
<za-cell title="多行文本">
  <za-input v-model="v9" rows="4" type="textarea" disabled></za-input>
</za-cell>
<za-cell title="数字类型">
  <za-input-number v-model="v5" disabled type="number" placeholder="type is number" @change="handleChange"></za-input-number>
</za-cell>

高度自适应

<za-cell title="多行文本">
  <za-input auto-height v-model="v3" type="textarea" placeholder="this is a auto-height textarea"></za-input>
</za-cell>

无标签栏

<za-cell>
  <za-input type="text" placeholder="标题" @change="handleChange3">
</za-input></za-cell>
<za-cell>
  <za-input auto-height v-model="v4" type="textarea" rows="4" placeholder="摘要"></za-input>
</za-cell>

显示输入字数

<za-cell>
  <za-input auto-height show-length type="textarea" rows="4" max-length="200" placeholder="摘要" v-model="v5"></za-input>
</za-cell>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      v1:'',
      v2:'这是一个textarea',
      v3:'',
      v4:'',
      v5:'',
      v6:'',
      v7:'',
      v8:'我是只读状态',
      v9:'我是禁用状态'
    }
  },
  methods: {
    handleChange(v) {
      console.log(this.v1, v);
    },
    handleChange2(v) {
      console.log(this.v2, v);
    },
    handleChange3(v) {
      console.log(v);
    },
    focus() {
      this.$refs.inputFirst.focus()
    },
  },
};
</script>

API

Input Attributes

Input Events