m-baseui

Input 输入框


基本使用

input 的基础用法


<template>
  <m-input v-model="value" placeholder="基本使用"></m-input>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value = ref('')
    return {
      value
    }
  }
}
</script>
查看代码

禁用状态

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


<template>
  <m-input v-model="value" placeholder="禁用状态" disabled></m-input>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value = ref('')
    return {
      value
    }
  }
}
</script>
查看代码

可清空数据

使用 clearable 属性即可得到一个可清空的输入框


<template>
  <m-input v-model="value" placeholder="可清空" clearable></m-input>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value = ref('')
    return {
      value
    }
  }
}
</script>
查看代码

带图标

可使用 leftIcon 或者 rightIcon 来定义显示图标并确定显示的位置。


<template>
  <m-row>
    <m-input v-model="value1" placeholder="请输入" leftIcon="icon-search"></m-input>
    <m-input v-model="value2" placeholder="请输入" rightIcon="icon-calendar"></m-input>
  </m-row>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value1 = ref('')
    const value2 = ref('')
    return {
      value1,
      value2
    }
  }
}
</script>
查看代码

不同大小

通过设置 size 属性来适应不同大小


<template>
  <m-row>
    <m-input v-model="value1" placeholder="请输入"></m-input>
    <m-input v-model="value2" placeholder="请输入" size="medium"></m-input>
    <m-input v-model="value3" placeholder="请输入" size="small"></m-input>
    <m-input v-model="value4" placeholder="请输入" size="mini"></m-input>
  </m-row>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    const value4 = ref('')
    return {
      value1,
      value2,
      value3,
      value4
    }
  }
}
</script>
查看代码

密码类型

密码类型的输入框，可通过 showPassword 来启用是否开启显示密码


<template>
  <m-input v-model="value" placeholder="请输入密码" showPassword></m-input>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value = ref('')
    return {
      value
    }
  }
}
</script>
查看代码

复合型输入框

可通过 slot 来指定在 input 中前置或者后置内容。


<template>
  <m-row>
    <m-input v-model="value1" clearable>
      <template #prepend>
        <m-button type="primary" leftIcon="icon-search">搜索</m-button>
      </template>
    </m-input>
    <m-input v-model="value2" clearable>
      <template #append>
        <m-button type="primary" leftIcon="icon-search">搜索</m-button>
      </template>
    </m-input>
  </m-row>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value1 = ref('')
    const value2 = ref('')
    return {
      value1,
      value2
    }
  }
}
</script>
查看代码

Attributes

参数说明类型可选值默认值
type类型stringtexttext
value / v-model绑定值string / number——
placeholder输入框占位文本string——
clearable是否可清空boolean—false
showPassword是否显示切换密码图标boolean—false
disabled禁用boolean—false
size尺寸大小stringmedium / small / mini—
readonly原生属性，是否只读boolean—false
autofocus原生属性，自动获取焦点booleantrue, falsefalse

Events

事件名说明回调参数示例
blur在 Input 失去焦点时触发(event: Event)blur=(e)=>{console.log(e.target.value)}
focus在 Input 获得焦点时触发(event: Event)focus=(e)=>{console.log(e.target.value)}
change在 Input 失去焦点或用户按下回车时触发(event: Event)change=(e)=>{console.log(e.target.value)}
input在 Input 值改变时触发(value: string | number)input=(e)=>{console.log(e)}
clear在点击由 clearable 属性生成的清空按钮时触发——