Minimalist UI

Input 输入框

引入组件

<template>
  <div>
    <m-input placeholder="请输入内容"></m-input>
  </div>
</template>

<script>
  import { MInput } from "@csr/m_ui";
  export default { 
    components: {
      MInput
    }
  }
</script>

基础用法

代码
<m-input v-model="value" placeholder="请输入内容"></m-input>

<script>
  export default {
    data() {
      return { value: '' }
    }
  }
</script>

禁用状态

代码
<m-input v-model="value" placeholder="请输入内容" disabled></m-input>

<script>
  export default {
    data() {
      return { value: '' }
    }
  }
</script>

可清空

代码
<m-input v-model="value" placeholder="请输入内容" clearable></m-input>

<script>
  export default {
    data() {
      return { value: '' }
    }
  }
</script>

带有图标

属性方式：
slot方式：
代码
<m-input v-model="value" placeholder="请输入内容" prefix-icon="search"></m-input>
<m-input v-model="value" placeholder="请输入内容" clearable suffix-icon="delete"></m-input>

<m-input v-model="value" placeholder="请输入内容">
  <template v-slot:prefixIcon>
    <m-icon icon="search"></m-icon>
  </template>
</m-input>
<m-input v-model="value" placeholder="请输入内容" clearable>
  <template v-slot:suffixIcon>
    <m-icon icon="delete"></m-icon>
  </template>
</m-input>

<script>
  export default {
    data() {
      return { value: '' }
    }
  }
</script>

带有按钮

代码
<m-input v-model="value" placeholder="请输入内容" prefix-button-text="搜索" prefix-button-icon="search"></m-input>
<m-input v-model="value" placeholder="请输入内容" suffix-button-text="删除" suffix-button-icon="delete"></m-input>

<script>
  export default {
    data() {
      return { value: '' }
    }
  }
</script>

带有文字

代码
<m-input v-model="value" placeholder="请输入内容">
  <template v-slot:prefixContent>
    HTTP://
  </template>
</m-input>

<m-input v-model="value" placeholder="请输入内容">
  <template v-slot:suffixContent>
    .COM
  </template>
</m-input>
  
<m-input v-model="value" placeholder="请输入内容">
  <template v-slot:prefixContent>
    HTTP://
  </template>
  <template v-slot:suffixContent>
    .COM
  </template>
</m-input>

<script>
  export default {
    data() {
      return { value: '' }
    }
  }
</script>

带有提示信息

代码
<m-input v-model="value" placeholder="请输入内容" prompt-msg="用户名长度在2~8个字符"></m-input>
<m-input v-model="value" placeholder="请输入内容" prompt-msg="密码长度在10~12个字符" prompt-msg-position="down"></m-input>
<m-input v-model="value" placeholder="请输入内容" prompt-msg="邮箱地址错误" :is-error-msg="true"></m-input>

<script>
  export default {
    data() {
      return { value: '' }
    }
  }
</script>

API

属性说明类型默认值
type input类型，可选值：参考input 类型 string text
placeholder 用于提示的占位符文本 string ''
maxlength 可输入字符的最大长度 string
disabled 是否禁用，可选值：true， false boolean false
clearable 是否展示清除按钮，可选值：true, false boolean false
prompt-msg 输入框外的提示信息 string ''
prompt-msg-position 输入框外的提示信息的位置，可选值：'down'，默认展示在右边 string ''
is-error-msg 是否使用错误提示样式展示输入框外的提示信息，可选值：true， false boolean false
suffix-icon 包含在输入框内部的后缀图标，可选值：参考MIcon组件 string ''
prefix-icon 包含在输入框内部的前缀图标，可选值：参考MIcon组件 string ''
suffix-button-text 输入框后缀按钮文案 string ''
suffix-button-icon 输入框后缀按钮图标，可选值：参考MIcon组件 string ''
prefix-button-text 输入框前缀按钮文案 string ''
prefix-button-icon 输入框前缀按钮图标，可选值：参考MIcon组件 string ''
v-model input的value，可同步更新v-model中的值 string ''

事件

事件名 说明 回调参数
input 在input输入时触发 (value: string | number)
change 在input值改变时触发 (event: Event)
blur 在Input失去焦点时触发 (event: Event)
focus 在Input获得焦点时触发 (event: Event)
click-icon 在点击前后缀 图标 时触发 (event: Event, value: string | number)
click-button 在点击前后缀 按钮 时触发 (event: Event, value: string | number)
on-enter 在按下回车键后触发 (value: string | number)
clear 在点击清除按钮时触发

← Grid 网格 →