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>