wm-design v0.1.1

基于 aomao-editor 的富文本编辑器

使用方法

编辑模式 异步更新 使用 this.$refs.mEditor.setValue()

参数列表

options toolbar配置项
    [
        [
            {
                type: 'collapse',
                groups: [
                    {
                        items: [{ name: 'image-uploader' }]
                    },
                    {
                        items: [{ name: 'table' }]
                    },
                    {
                        items: [{ name: 'file-uploader' }]
                    },
                    {
                        items: [{ name: 'video-uploader' }]
                    }
                ]
            }
        ],
        ['undo', 'redo', 'paintformat', 'removeformat'],
        ['heading', 'fontfamily', 'fontsize'],
        ['bold', 'italic', 'strikethrough', 'underline'],
        ['fontcolor', 'backcolor'],
        ['alignment'],
        ['unorderedlist', 'orderedlist', 'indent', 'line-height'],
        ['link', 'hr']
    ]
value 文本
readonly 编辑/只读 默认 编辑
baseUrl 文件库origin  默认 https://nas.mugood.com/
uploadBaseUrl 上传地址
token
fileOption 文件上传配置项
videoOption 视频上传配置项
imageOption 图片上传配置项

基础表格 基于 vxe-table

使用方法

<mTable :columns="tableColumns" :data="tableData">
    <template #name="{ row }"> {{ row }} </template>
</mTable>

参数列表(部分参数参考官方文档)

border 默认full
stripe 默认false
rowId String
align String
pagination 是否分页 默认为true
page 分页配置项 默认 {
                        current: 1,
                        pageSize: 10
                    }
pageSizeOptions 每页显示项 默认 [5, 10, 20, 50]
pagerlayouts 分页布局
        默认 ['Total', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump']
resizable 列可调整
showOverflow 整体一行展示
emptyText 空数据提示 默认 暂无相关内容
highlightHoverRow 默认为true
highlightCurrentRow
currentChangeEvent: Function,
headerCellClassName: Function,
rowClassName: Function,
cellClassName: Function,
rowConfig: Object,
columnConfig: Object,
checkboxConfig: Object,
    默认{
            checkField: 'checked',
        }
radioConfig: Object,
treeConfig: Object,
columns 列数据源(部分属性参考官方文档)
    { key: 1, type: 'seq', width: 60, title: '#', fixed: null },
    { key: 2, type: 'checkbox', width: 50, fixed: null },
    {
        key: 3,
        field: 'name',
        title: 'Name',
        width: 200,
        slots: {
            customRender: 'name'
        },
        showOverflow:'',
        showHeaderOverflow:'',
        showFooterOverflow:'',
        treeNode:false
    },
    { key: 4, field: 'nickname', title: 'Nickname', width: 300 },
    { key: 5, field: 'sex', title: 'Sex', width: 200, filters: [{ value: '1', label: '男' }] },
    { key: 6, field: 'role', title: 'Role', width: 200 },
    { key: 7, field: 'address', title: 'Address', width: 300 }

data 初始数据源
method 请求模式 默认get
url 请求url
requestHeaders 请求头
    注意 token默认从localstorage里面取
        示例if (getStorage('token')) {
                config.headers.common['Authorization'] = `Bearer ${getStorage('token')}`
            }
searchParam 查询参数
formatData 返回数据格式化函数
cellClick 单元格单击事件

主动查询

$refs.xxx.fetchData(flag) flag为true,查询第一页

emit 事件

mulSelRows 选中的数据
complete 接口返回数据

虚拟滚动表格（大数据）

使用方法

##参数列表 参考基础表格

echarts 图表组件

使用方法

参数列表(部分属性参考官方文档)

option: {
    type: Object
},
loading: {
    type: Boolean,
    default: false
},
loadingConfig: {
    type: Object,
    default: function () {
        return {
            text: '',
            color: '#0af',
            textColor: '#fff',
            maskColor: 'rgba(25, 58, 127, 0.7)',
            zlevel: 99,
            fontSize: 30,
            showSpinner: true,
            spinnerRadius: 15,
            lineWidth: 5
        }
    }
},
notMerge: {
    type: Boolean,
    default: false
},
replaceMerge: {
    type: [String, Array],
    default: ''
},
lazyUpdate: {
    type: Boolean,
    default: false
},
silent: {
    type: Boolean,
    default: false
},
transition: Object