❤
npm
Sign UpSign In

wf-ui-vue2

0.0.54 • Public • Published

npm 安装

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

npm i wf-ui-vue2 element-ui -S
npm i echarts@4.9.0 -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 中没有的参数
  1. selectionChange 事件，由于亲代和后代会有多次更改，一次点击会有多次返回。取最后一次的返回值即可
  2. getRowClassName 将无法使用
  3. 如果需要使用 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

Readme

Keywords

Package Sidebar

Install

npm i wf-ui-vue2

Weekly Downloads

3

Version

0.0.54

License

ISC

Unpacked Size

1.46 MB

Total Files

7

Last publish

Collaborators

  • wfyl
Try on RunKit
Report malware