MG Design

Appearance

Input 输入框 ​

通过鼠标或键盘输入字符，基于 el-input 封装，API 完全兼容。

基础用法 ​

查看代码
vue
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

<template>
  <MgInput v-model="text" placeholder="请输入内容" />
</template>

禁用状态 ​

查看代码
vue
<template>
  <MgInput v-model="text" placeholder="禁用状态" disabled />
</template>

可清空 ​

查看代码
vue
<template>
  <MgInput v-model="text" placeholder="可清空" clearable />
</template>

文本域 ​

查看代码
vue
<script setup>
import { ref } from 'vue'
const textarea = ref('')
</script>

<template>
  <MgInput v-model="textarea" type="textarea" :rows="3" placeholder="多行输入" />
</template>

Attributes ​

继承 Element Plus Input 的全部 Attributes。

参数说明类型默认值
type类型'text' | 'textarea'text
placeholder占位文本string-
disabled是否禁用booleanfalse
clearable可清空booleanfalse
maxlength最大长度number-

差异 ​

MgInput 在 el-input 基础上追加 .mg-input 类名；其余行为一致，迁移仅需将 el-input 替换为 MgInput，并支持 prefix/suffix/prepend/append 等具名插槽透传。