me-design-vue 基于vue3组件库

基于vue3的一个用户体验良好的组件库，支持按需引入和全部导入的方式。 提高开发效率。

目前设计思路：

ui样式采用全局 --> 模块 --> 功能的方式搭建

安装：

  // 使用yarn or npm 
  yarn add me-design-vue
  npm i me-design-vue

快速开始

  import { createApp } from 'vue'
  import App from 'App.vue'
  import MeDesign from 'me-design'
  import 'me-design/dist/index.css'

  const app = createApp(App)
  
  app.use(MeDesign)

基础组件

button按钮组件

  //  按钮类型
  <MButton type="primary" size="small">primary</MButton>

属性说明：

| 属性 | 说明 | 类型 | 默认值 | 可选值 | | ---| --- | --- | --- | --- | |type | 类型按钮 | string | - | primary dashed text link| |size | 尺寸大小 | string | small | mini large| |loading | 加载 | boolean | false | true | |disabled | 禁用 | boolean | false | true | |shape | 形状 | string | round circle | - | |danger | 告警按钮 | boolean | false | true |

input 组件

   //  按钮类型
   <m-input v-model:value="value" size="small" @input="onInput" />

属性说明：

| 属性 | 说明 | 类型 | 默认值 | 可选值 | | ---| --- | --- | --- | --- | |type | 类型 | string | - | text password number| |size | 尺寸 | string | small | mini large| |allowClear | 清空 | boolean | false | true | |disabled | 禁用 | boolean | false | true | |readonly | 只读 | boolean | false | - | |autocomplete | 原生支持 | string | - | - |

事件

| 属性 | 说明 | 类型 | 默认值 | 可选值 | | ---| --- | --- | --- | --- | |input | 输入 | ()=>void | - | -| |change | 改变值 | ()=>void | - | -| |blur | 失焦 | ()=>{} | - | - |

inputNumber 组件

   //  按钮类型
   <m-input-number v-model:value="value" size="small" @input="onInput" />

属性说明：

| 属性 | 说明 | 类型 | 默认值 | 可选值 | | ---| --- | --- | --- | --- | |type | 类型 | string | - | number| |size | 尺寸 | string | small | mini large| |allowClear | 清空 | boolean | false | true | |disabled | 禁用 | boolean | false | true | |readonly | 只读 | boolean | false | - | |autocomplete | 原生支持 | string | - | - |

事件

| 属性 | 说明 | 类型 | 默认值 | 可选值 | | ---| --- | --- | --- | --- | |input | 输入 | ()=>void | - | -| |change | 改变值 | ()=>void | - | -| |blur | 失焦 | ()=>{} | - | - |