mcl-ui v0.1.14
快速开始
本组件库支持按需引入,也支持使用分包安装的形式引入
用法
安装
yarn add mcl-ui
全局引入
- 在入口文件引入组件库
// main.ts
import MclUI from '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>
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)
如果使用组件较多,建议您单独管理,使用方法二
方法二
- 创建文件
mcl-ui.ts
在src/plugins
下,内容如下:
import type { App } from 'vue'
import {baseTable,baseTitle} from 'mcl-ui'
export default {
install(app: App) {
app
.use(baseTable)
.use(baseTitle)
}
}
- 在入口文件
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>
5 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago