<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">InputItem</div>
    </div>
    <h3>基本示例</h3>
    <List>
      <span slot="header">align & labelNumber</span>
      <ok-input :labelNumber="4" placeholder="从左侧开始输入（默认）">光标在左</ok-input>
      <ok-input :labelNumber="4" placeholder="从右侧开始输入" align="right">光标在右</ok-input>
    </List>
    <List>
      <span slot="header">type & clear & maxLength</span>
      <ok-input placeholder="请输入文本" type="text" clear>文本</ok-input>
      <ok-input placeholder="请输入数字" type="number" :maxLength="6" clear>数字</ok-input>
      <ok-input placeholder="请输入密码" type="password" clear>密码</ok-input>
    </List>
    <List>
      <span slot="header">Can't editable / Disabled</span>
      <ok-input :labelNumber="6" placeholder="不可编辑" value="不可编辑" :editable="false">不可编辑</ok-input>
      <ok-input :labelNumber="6" placeholder="已禁用" disabled>已禁用</ok-input>
    </List>
    <List>
      <span slot="header">错误验证</span>
      <ok-input placeholder="error" error @onErrorClick="errorClick">错误</ok-input>
      <ok-input placeholder="required" required>必需</ok-input>
    </List>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    errorClick () {
      this.$Toast.info({content: '点击展示提示信息'})
    }
  }
}
</script>