Emui

# 使用

# 基本使用

<emui-input v-model="input" placeholder="请输入内容"></emui-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
Expand Copy

# 禁用状态

通过 disabled 属性指定是否禁用 input 组件

<emui-input
  placeholder="请输入内容"
  v-model="input"
  :disabled="true">
</emui-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Expand Copy

# 可清空

使用type='clearable'即可得到一个可清空的输入框

<emui-input
  placeholder="请输入内容"
  v-model="input"
  type="clearable">
</emui-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Expand Copy

# 密码框

使用type='password'即可得到一个可切换显示隐藏的密码框

<emui-input
  placeholder="请输入密码"
  v-model="input"
  type="password">
</emui-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Expand Copy

# 文本域

文本域高度可通过rows属性控制

<emui-input
  rows="2"
  v-model="input"
  type="textarea">
</emui-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Expand Copy

# 尺寸

可通过size属性控制输入框的大小

<emui-input v-model="input1" size="large" placeholder="请输入内容"></emui-input>
<emui-input v-model="input2" size="default" placeholder="请输入内容"></emui-input>
<emui-input v-model="input3" size="small" placeholder="请输入内容"></emui-input>
<script>
  export default {
    data() {
      return {
        input1: '',
        input2: '',
        input3: '',
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Expand Copy

# Attributes

属性 属性值 说明
type text/password/textarea 表单的类型
disabled true/false 是否禁用表单
size small/large/default 表单的大小
placeholder string 输入框占位文本
value string 动态绑定的值
cols number textarea的列数
rows number textarea的行数

← radio →