npm 安装

该组件库依赖 element-ui 和 echarts
该组件库的默认导出是注册完成的组件库
该组件库的具名导出有：iconfontJson（用于获取iconfont信息）
该组件库引入了normalize.css

npm i wf-ui-vue2 element-ui -S
npm i [email protected] -S

快速上手

引入组件

在 main.js 中写入以下内容：

import Vue from 'vue';
import App from './App.vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import WfUiVue2 from 'wf-ui-vue2'
import 'wf-ui-vue2/styles/wf-ui-vue2.css'

Vue.use(ElementUI);
Vue.use(WfUiVue2)

new Vue({
  el: '#app',
  render: h => h(App)
});

开始使用

主题色

• 主题红: var(--wf-red)
• 主题蓝: var(--wf-blue)
• 主题渐变蓝: var(--wf-blue-gradients)

iconfont

引入方式：样式引入

<i class="iconfont-menu icon-*"></i>

• 用于权限框架的导航（目录、菜单）图标

常用样式类

引入方式：样式引入

.mt_10 .mt_20 .mt_30 上外边距，单位px
.mr_10 .mr_20 .mr_30 右外边距，单位px
.mb_10 .mb_20 .mb_30 下外边距，单位px
.ml_10 .ml_20 .ml_30 左外边距，单位px

.flex .flex_shrink0 .flex_center(垂直水平居中) .flex_between(垂直居中水平等距)

.bold

.ellipsis .ellipsis2 .ellipsis4 单行/多行超出省略

按钮

引入方式：样式引入

<el-button class="">默认按钮</el-button>
<el-button class="">图标按钮<i class=""></i></el-button>

基础用法

• 搜索：wf-button-search
• 重置：wf-button-reset
• 确认：wf-button-confirm
• 取消：wf-button-cancel

图标按钮

• 蓝色：wf-button-icon-blue
• 红色：wf-button-icon-red
• 深蓝：wf-button-icon-darkBlue
• 黄色：wf-button-icon-yellow
• 绿色：wf-button-icon-green
• 灰色：wf-button-icon-gray

文字按钮

引入方式：组件引入

<wf-icon2text text="删除" icon-class="iconfont el-icon-my-wenhao"></wf-icon2text>
<wf-icon2text text="添加" icon="user-solid"></wf-icon2text>
<wf-icon2text text="添加" :src="src"></wf-icon2text>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :-------: | :------------------------------------------------------------------: | :----: | :----: | :----: | | icon | 来自 element-ui 的 icon，填入 el-icon-之后的内容即可 | string | | | | iconClass | 来自 iconfont 等的 icon，填入的内容类似 'iconfont el-icon-my-wenhao' | string | | | | src | img 图片，需要在父组件用 require()传入 | string | | | | text | hover 状态显示的文字 | string | | |

Methods

| 方法名 | 说明 | 参数 | | :----: | :--: | :--: | | | | |

Events

| 事件名称 | 说明 | 回调参数 | | :------: | :--: | :------: | | click | 点击 | |

表格

引入方式：样式引入

<el-table class="wf-table"></el-table>

• tips：如遇树状结构，在有展开符号的 el-table-column 加上 class-name="wf-table_tree-column"可以使文字对齐

树状表格

引入方式：组件引入

<wf-table :data="tableData" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    row-key="id" @selection-change="handleSelectionChange">
</wf-table>

• tips：element-ui 原生的树状表格，亲代和后代的选中没有交互，全选按钮也不能选择到后代节点
• 仅列举 element-ui 中没有的参数

0. selectionChange 事件，由于亲代和后代会有多次更改，一次点击会有多次返回。取最后一次的返回值即可
1. getRowClassName 将无法使用
2. 如果需要使用 refs 调用 el-table 的 Methods，请使用 $refs.你组件的ref名.$refs.table

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :----------------------------------------------------------------------------------: | :-----: | :----: | :----: | | check-parent | 在显示复选框的情况下，是否选中所有子级时，同时选中父级。（取消子级时仍然会取消父级） | boolean | | true |

Methods

| 方法名 | 说明 | 参数 | | :----: | :--: | :--: | | | | |

Events

| 事件名称 | 说明 | 回调参数 | | :------: | :--: | :------: |

单条表格

引入方式：样式引入（不依赖 element-ui）

<table class="wf-table-single">
    <tr><th>姓名</th><th>姓名</th></tr>
    <tr><td>姓名</td><td>姓名</td></tr>
    <tr><th colspan="2">姓名</th></tr>
    <tr><td colspan="2">姓名</td></tr>
</table>

分页

引入方式：样式引入

<el-pagination class="wf-pagination" layout="prev, pager, next" :total="1000"></el-pagination>

树形控件

引入方式：组件引入

<wf-tree></wf-tree>

• 仅列举 element-ui 中没有的参数

1. 如果需要使用 refs 调用 el-tree 的 Methods，请使用 $refs.你组件的ref名.$refs.tree

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :--------------------------: | :-----: | :----: | :----: | | leaf-level | 规定第几级后没有新增按钮 | number | | 3 | | show-buttons | 是否展示新增、删除、编辑按钮 | boolean | | false | | show-input | 是否展示过滤输入框 | boolean | | true | | height | 树形结构的高度 | string | | 'auto' |

Methods

| 方法名 | 说明 | 参数 | | :----: | :--: | :--: | | | | |

Events

| 事件名称 | 说明 | 回调参数 | | :------: | :----------: | :--------: | | add | 点击添加按钮 | node, data | | remove | 点击移除按钮 | node, data | | edit | 点击修改按钮 | node, data |

步骤条

引入方式：样式引入

<el-steps class="wf-steps"></el-steps>

弹框

引入方式：样式引入

消息提示

this.$alert('提示内容', '提示标题', {
    confirmButtonText: '确定',
    customClass: 'wf-message-alert',
    callback: action => {

    }
});

确认消息

this.$confirm("提示内容", "提示标题", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: 'warning',
    customClass: 'wf-message-confirm',
}).then(() => {

}).catch(() => {

})

• tips：如遇设计图提示内容下面还有一行灰色小字

1. 在 customClass 中加入自定义的类名，如 customClass: "wf-message-confirm my-message-confirm"
2. 在非 scoped 的 style 标签中加入 .my-message-confirm .el-message-box__message::after {content: "文字内容";}

提交内容

this.$prompt("表单名:", "提示标题", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder: "表单提示信息",
    inputErrorMessage: "表单错误验证",
    inputPattern: /^.+$/,
    customClass: "wf-message-prompt",
}).then((val) => {

}).catch(() => {

})

• tips：inputType的可选值有：text（输入框）、textarea（文本域）。element-ui 官方没有枚举

提交下拉选择框

引入方式：组件引入

<wf-prompt-select></wf-prompt-select>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :-------: | :---------------: | :----: | :----: | :-------: | | title | 弹窗的标题 | string | | | | list | 选择框列表 | array | | | | label | 标签文本的内容 | string | | | | codeName | 字典 code 字段名 | string | | dictCode | | labelName | 字典 label 字段名 | string | | dictLabel | | valueName | 字典 value 字段名 | string | | dictValue |

Methods

| 方法名 | 说明 | 参数 | | :----: | :------: | :--: | | open | 打开弹窗 | | | close | 关闭弹窗 | |

Events

| 事件名称 | 说明 | 回调参数 | | :------: | :------: | :----------: | | confirm | 点击确定 | 目前的选中值 | | cancel | 点击取消 | |

抽屉

引入方式：样式引入

<el-drawer custom-class="wf-drawer"></el-drawer>

有确认、取消按钮的抽屉

引入方式：组件引入

<wf-drawer></wf-drawer>

• 仅列举 element-ui 中没有的参数

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :--------------------: | :-----: | :----: | :----: | | show-confirm | 是否展示确认按钮 | boolean | | false | | confirm-text | 确认按钮的文字 | string | | 确定 | | show-cancel | 是否展示取消按钮 | boolean | | false | | cancel-text | 取消按钮的文字 | string | | 取消 | | loading | 确认按钮是否加载中状态 | boolean | | false |

Methods

| 方法名 | 说明 | 参数 | | :----: | :----------------------: | :--: | | hide | 隐藏抽屉，会改变 visible | |

Events

| 事件名称 | 说明 | 回调参数 | | :------: | :------: | :------: | | confirm | 点击确定 | |

弹窗

引入方式：样式引入

<el-dialog custom-class="wf-dialog"></el-dialog>

<el-dialog custom-class="wf-dialog">
    <div slot="footer">
        <el-button class="wf-button-confirm">取消</el-button>
        <el-button class="wf-button-cancel">确定</el-button>
    </div>
</el-dialog>

导入弹窗

引入方式：组件引入

<wf-import></wf-import>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :-----: | :------------------: | :----: | :----: | :----: | | action | 必选参数，上传的地址 | string | | | | headers | 设置上传的请求头部 | object | | |

Methods

| 方法名 | 说明 | 参数 | | :-----: | :------------: | :--: | | open | 打开弹窗 | | | close | 关闭弹窗 | | | toError | 切换为失败状态 | | | toSomeError | 切换为部分失败状态 | | | toSuccess | 切换为成功状态 | |

Events

| 事件名称 | 说明 | 回调参数 | | :------: | :------: | :------: | | download | 下载模板 | | | success | 请求回调 | response | | close | 关闭回调 | |

Slots

| Name | 说明 | | :------: | :------: | | error | 导入失败！下的提示文字，缺省则显示默认内容 | | someError | 部分导入失败！下的提示内容 | | success | 导入成功！下的提示内容 |

表单

引入方式：样式引入

<el-form class="wf-form"></el-form>
<el-form class="wf-form" :inline="true"></el-form>

• 表单里面的表单项自带样式

输入框

引入方式：样式引入

<el-input class="wf-input"></el-input>
<el-input class="wf-input" type="textarea"></el-input>
<el-autocomplete class="wf-input"></el-autocomplete>

选择器

引入方式：样式引入

<el-select class="wf-select">
    <el-option label="label" value="value"></el-option>
</el-select>

级联选择器

引入方式：样式引入

<el-cascader class="wf-cascader" :options="options" :props="{ checkStrictly: true }"></el-cascader>
<el-cascader class="wf-cascader" :options="options" :props="{ multiple: true, checkStrictly: true }">

计数器

引入方式：样式引入

<el-input-number class="wf-input-number"></el-input-number>
<el-input-number class="wf-input-number" controls-position="right"></el-input-number>

日期、时间、时间日期选择器

引入方式：样式引入

<el-time-select class="wf-input"></el-time-select>
<el-date-picker class="wf-input"></el-date-picker>

文字开关

引入方式：样式引入

<el-switch class="wf-switch" v-model="value" active-text="启用" inactive-text="停用"></el-switch>

单选框

引入方式：样式引入

<el-radio class="wf-radio">备选项</el-radio>

多选框

引入方式：样式引入

<el-checkbox class="wf-checkbox"></el-checkbox>

上传

引入方式：组件引入

<wf-upload listType="text" :fileList="fileList"></wf-upload>
<wf-upload :fileList="fileList" :file-size="999"></wf-upload>

• 仅列举 element-ui 中没有的参数

1. 如果需要使用 refs 调用 el-upload 的 Methods，请使用 $refs.你组件的ref名.$refs.upload

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :-------: | :----------------------------------------------------------------: | :-----: | :----: | :----: | | show-tip | 是否展示提示 | boolean | | true | | accept | 同 element-ui，格式如'.jpg,.jpeg,.png,.gif,.mp4,.Ogg,.MPEG4,.WebM' | string | | | | file-list | 文件列表回显，格式如：['xx.jpg', 'xx.png']，支持 .sync 修饰符 | array | | | | file-size | 文件上传允许的最大文件内存，单位KB | number | | | | readonly | 是否不展示上传按钮、删除按钮、上传状态 | boolean | | false | | limit-hide-uploader | 达到最大允许上传个数时是否不展示上传按钮 | boolean | | false |

Methods

| 方法名 | 说明 | 参数 | | :----: | :--: | :--: | | | | |

Events

| 事件名称 | 说明 | 回调参数 | | :------: | :------------: | :-------: | | change | file-list 改变 | file-list |

富文本

引入方式：组件引入

<wf-editor></wf-editor>

• 根据 ruoyi-ui Editor 组件改编

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :-------------: | :------------: | :-----: | :----: | :----: | | value / v-model | 绑定值 | string | | | | height | 高度 | number | | | | min-height | 最小高度 | number | | | | readonly | 是否只读 | boolean | | | | upload-url | 文件上传地址 | string | | | | headers | 文件上传请求头 | object | | |

Methods

| 方法名 | 说明 | 参数 | | :----: | :--: | :--: | | | | |

Events

| 事件名称 | 说明 | 回调参数 | | :-----------------: | :------------: | :---------------------: | | on-change | value 改变 | { html, text, quill} | | on-text-change | text 改变 | delta, oldDelta, source | | on-selection-change | selection 改变 | delta, oldDelta, source | | on-editor-change | editor 改变 | eventName, ...args |

图表

请查看wf-charts-vue2