0.2.3 • Published 8 months ago

mcl-ui v0.2.3

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

快速开始

本组件库支持按需引入,也支持使用分包安装的形式引入

用法

安装

yarn add mcl-ui

全局引入

  1. 在入口文件引入组件库
// main.ts
import MclUI from 'mcl-ui'
import 'mcl-ui/lib/index.css'

app.use(MclUI)
  1. 在组件中使用

无需注册直接使用,如下:

<template>
  <base-table :tableData="tableData" :columns="columns"></base-table>
</template>

<script lang="ts" setup>
const columns = [
  {
    label: '编号',
    type: 'index',
    width: '80px'
  },
  {
    label: '姓名',
    value: 'name',
    minWidth: '120px'
  },
  {
    label: '年龄',
    value: 'age',
    minWidth: '120px'
  }
]
const tableData = [
  {
    name: '张三',
    age: '20',
  }
]

手动按需引入

方法一

首先在入口文件main.ts引入您要用的组件,如下:

// main.ts
import {baseTable} from 'mcl-ui'
import 'mcl-ui/lib/index.css'
app.use(baseTable)

如果使用组件较多,建议您单独管理,使用方法二

方法二

  1. 创建文件mcl-ui.tssrc/plugins下,内容如下:
import type { App } from 'vue'
import {baseTable,baseTitle} from 'mcl-ui'
export default {
  install(app: App) {
    app
    .use(baseTable)
    .use(baseTitle)
  }
}
  1. 在入口文件main.ts中引入。如下:
import MclUI from './plugins/mcl-ui'
import 'mcl-ui/lib/index.css'
app.use(MclUI)

在组件中使用

按照上面方法引入之后,可以直接在组件中使用:

<template>
  <base-table :tableData="tableData" :columns="columns"></base-table>
</template>

<script lang="ts" setup>
import {BaseTable} from 'mcl-ui'
const columns = [
  {
    label: '编号',
    type: 'index',
    width: '80px'
  },
  {
    label: '姓名',
    value: 'name',
    minWidth: '120px'
  },
  {
    label: '年龄',
    value: 'age',
    minWidth: '120px'
  }
]
const tableData = [
  {
    name: '张三',
    age: '20',
  }
]
</script>

安装分包(pnpm 版本暂时未支持)

使用哪个组件安装哪个组件,比如安装table组件:

yarn add @mcl-ui/table

在项目中使用:

<template>
  <base-table :tableData="tableData" :columns="columns"></base-table>
</template>

<script lang="ts" setup>
import BaseTable from '@mcl-ui/table'

const columns = [
  {
    label: '编号',
    type: 'index',
    width: '80px'
  },
  {
    label: '姓名',
    value: 'name',
    minWidth: '120px'
  },
  {
    label: '年龄',
    value: 'age',
    minWidth: '120px'
  }
]
const tableData = [
  {
    name: '张三',
    age: '20',
  }
]
</script>
0.2.3

8 months ago

0.2.1

9 months ago

0.2.2

9 months ago

0.2.0

9 months ago

0.1.21

9 months ago

0.1.20

1 year ago

0.1.18

1 year ago

0.1.19

1 year ago

0.1.16

1 year ago

0.1.17

1 year ago

0.1.15

1 year ago

0.1.14

1 year ago

0.1.10

1 year ago

0.1.11

1 year ago

0.1.12

1 year ago

0.1.13

1 year ago

0.1.9

1 year ago

0.1.8

1 year ago

0.0.73

1 year ago

0.0.74

1 year ago

0.0.75

1 year ago

0.0.76

1 year ago

0.0.71

1 year ago

0.0.72

1 year ago

0.1.0

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.7

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.0.76-beta

1 year ago

0.0.70

1 year ago

0.0.62

1 year ago

0.0.63

1 year ago

0.0.64

1 year ago

0.0.65

1 year ago

0.0.66

1 year ago

0.0.67

1 year ago

0.0.68

1 year ago

0.0.69

1 year ago

0.0.60

1 year ago

0.0.61

1 year ago

0.0.59

1 year ago

0.0.51

1 year ago

0.0.52

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.55

1 year ago

0.0.56

1 year ago

0.0.57

1 year ago

0.0.58

1 year ago

0.0.50

1 year ago

0.0.40

2 years ago

0.0.41

2 years ago

0.0.42

2 years ago

0.0.43

2 years ago

0.0.44

2 years ago

0.0.45

2 years ago

0.0.46

2 years ago

0.0.47

2 years ago

0.0.37

2 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.32

2 years ago

0.0.33

2 years ago

0.0.34

2 years ago

0.0.35

2 years ago

0.0.36

2 years ago

0.0.48

2 years ago

0.0.49

2 years ago

0.0.20

3 years ago

0.0.21

3 years ago

0.0.22

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.25

3 years ago

0.0.15

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.19

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.0.26

3 years ago

0.0.9

3 years ago

0.0.27

3 years ago

0.0.8

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.8-alpha

3 years ago

0.0.6-alpha

3 years ago

0.0.5-alpha

3 years ago

0.0.4-alpha

3 years ago

0.0.3-alpha

3 years ago

0.0.2-alpha

3 years ago

0.0.1-alpha

3 years ago

0.0.0-alpha

3 years ago

1.0.0-alpha

3 years ago

1.0.0

3 years ago