wf-ui-vue3 v0.0.26

npm 安装

该组件库依赖 element-plus
该组件库的默认导出是一个有install方法的对象，会被app.use()调用
该组件库注册了element-plus的所有图标
该组件库的具名导出有：iconfontJson（用于获取iconfont信息）
该组件库引入了normalize.css

npm i wf-ui-vue3 element-plus -S

快速上手

引入组件

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

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import WfUiVue3 from 'wf-ui-vue3'
import 'wf-ui-vue3/style.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(WfUiVue3)

app.mount('#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

Methods

Events

表格

引入方式：样式引入

<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-plus 原生的树状表格，亲代和后代的选中没有交互，全选按钮也不能选择到后代节点
• 仅列举 element-plus 中没有的参数

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

Attributes

Methods

Events

单条表格

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

<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-plus 中没有的参数

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

Attributes

Methods

Events

步骤条

引入方式：样式引入

<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-plus 官方没有枚举

提交下拉选择框

引入方式：组件引入

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

Attributes

Methods

Events

抽屉

引入方式：样式引入

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

有确认、取消按钮的抽屉

引入方式：组件引入

<wf-drawer></wf-drawer>

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

Attributes

Methods

Events

弹窗

引入方式：样式引入

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

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

导入弹窗

引入方式：组件引入

<wf-import></wf-import>

Attributes

Methods

Events

Slots

表单

引入方式：样式引入

<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-plus 中没有的参数

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

Attributes

Methods

Events

富文本

引入方式：组件引入

<wf-editor></wf-editor>

• 根据 ruoyi-ui Editor 组件改编
• 注意：现在quill-image-resize-module还有问题，暂不能用

Attributes

Methods

Events