@my-ui-liu/my-ui-components

一个支持 PC 和移动端的 Vue2 UI 组件库

安装

npm install @my-ui-liu/my-ui-components

快速开始

全局引入

import Vue from 'vue'
import MyUIComponents from '@my-ui-liu/my-ui-components'
import '@my-ui-liu/my-ui-components/lib/my-ui-components.css'

Vue.use(MyUIComponents)

按需引入

import Vue from 'vue'
import { MyButton, MyInput } from '@my-ui-liu/my-ui-components'
import '@my-ui-liu/my-ui-components/lib/my-ui-components.css'

Vue.component('MyButton', MyButton)
Vue.component('MyInput', MyInput)

使用示例

Button 按钮

<template>
  <div>
    <my-button type="primary" @click="handleClick">
      点击我
    </my-button>
    <my-button type="success">成功按钮</my-button>
    <my-button :loading="loading">加载中</my-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
}
</script>

Input 输入框

<template>
  <div>
    <my-input 
      v-model="value" 
      placeholder="请输入内容"
      @focus="handleFocus"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleFocus() {
      console.log('输入框获得焦点')
    }
  }
}
</script>

组件文档

MyButton

Props:

• type: 按钮类型，可选值：default、primary、success、warning、danger
• size: 按钮尺寸，可选值：large、medium、small、mini
• disabled: 是否禁用
• loading: 是否加载中
• plain: 是否朴素按钮
• round: 是否圆角按钮

Events:

• click: 点击事件

MyInput

Props:

• value: 绑定值
• type: 输入框类型（text、password、number 等）
• placeholder: 占位符
• disabled: 是否禁用
• readonly: 是否只读
• error: 是否错误状态

Events:

• input: 输入事件
• focus: 获得焦点事件
• blur: 失去焦点事件

开发

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建组件库
npm run build:lib

版本

当前版本：0.1.0

许可证

MIT

链接

• npm 包地址