# magiccube-vue3

```魔方 VUE version 3 控件项目```

## package引用方法
1.安装
```
npm install magiccube-vue3
```

2.在main.js中引入
```
import mv3 from 'magiccube-vue3'
import 'magiccube-vue3/package/style/index.less'
```

3.修改vue.config.js
```
chainWebpack: config => {
    config.module
        .rule('package')
        .test(/\.(js|jsx)$/)
        .include.add(path.join(__dirname, 'node_modules/magiccube-vue3'))
        .end()
        .use('babel-loader')
        .loader('babel-loader')
        .options({
            presets: [
                '@vue/cli-plugin-babel/preset',
            ],
            plugins: [
                '@babel/plugin-proposal-optional-chaining'
            ]
        })
}
```


## package menu
- McLink
- McBreadcrumb
- McButton
- McCheckbox
- McCheckboxGroup
- McRadio
- McRadioGroup
- McProgress
- McInput
- McSlide
- McSwitch
- McTab
- McTextarea
- McTree
- McCity
- McCityPicker
- McAddress
- McFuzzySearch
- McTip
- McPopup
- McTable
- McTableColumn
- McPagination
- McForm
- McFormItem
- McSelect
- McSelectOption
- McDatePicker
- McMonthPicker
- McDropdown
- McImport
- McCollapse
- McCollapseItem
- McCollapseTransition
- McUpload
- McDepartmentTree
- McDepartmentPicker
- McPermissionTree
- McLabel
- McJobFuncPicker
- McTableV2
- McTableV2Column


## 控件使用
```
<!-- new version table -->
    <- Mc-table-v2 :data="listData" checkbox type="fixed" height="auto">
        <- Mc-table-v2-column label="姓名" key-name="name">
            <template #default="scope">
                <- McLink>{{scope.data['name']}}</- McLink>
            </template>
        </- Mc-table-v2-column>
        <- Mc-table-v2-column label="客户名称" header-tip="asdasdads">
            <- Mc-table-v2-column label="客户名称123" key-name="companyName" header-tip="1231313132"></- Mc-table-v2-column>
            <- Mc-table-v2-column label="客户名称345" key-name="mobile"></- Mc-table-v2-column>
        </- Mc-table-v2-column>
        <- Mc-table-v2-column label="外包岗位名称" key-name="jobName"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="证照号码" key-name="identity"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="手机号码" key-name="mobile"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="个人信息ID" key-name="resumeId"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="企业微信" key-name="companyWechatDesc"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="员工状态" key-name="globalStateDesc"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="订单名称" key-name="orderName"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="岗位城市" key-name="jobCityDesc"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="合同编号" key-name="contractCode"></- Mc-table-v2-column>
        <- Mc-table-v2-column label="离职时间" key-name="dimissionTime"></- Mc-table-v2-column>
    </- Mc-table-v2>
```