mcl-ui

快速开始

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

用法

安装

yarn add mcl-ui

全局引入

1. 在入口文件引入组件库

// main.ts
import MclUI from 'mcl-ui'
import 'mcl-ui/lib/index.css'

app.use(MclUI)

2. 在组件中使用

无需注册直接使用，如下：

<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.ts在src/plugins下，内容如下：

import type { App } from 'vue'
import {baseTable,baseTitle} from 'mcl-ui'
export default {
  install(app: App) {
    app
    .use(baseTable)
    .use(baseTitle)
  }
}

2. 在入口文件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>