wiztekui
wiztek UI project
https://github.com/xoxleidu/wiztekui
Setup
# install wiztekui
npm install wiztekui -s
# main.js
import wiztekui from "wiztekui";
Vue.use(wiztekui);
import "wiztekui/lib/css/wiztekui.min.css";
使用 scss 更换主题颜色
# color theme
create myui.scss In main.js
## package.json
"sass-loader": "^7.3.1",
"node-sass": "^4.14.1",
# myui.scss:
$--color-primary: "#0062cc";
$--color-success: "#28a745";
$--color-warning: "#ffc107";
$--color-danger: "#dc3545";
$--color-info: "#6d757d";
## in end
@import "~wiztekui/lib/scss/wiztekui.scss";
button
<wzButton type="primary" size="medium">按钮</wzButton>
<wzButton type="success" size="small" :loading="loading">加载</wzButton>
<wzButton type="warning" size="mini" :disabled="disabled">禁用</wzButton>
<wzButton type="primary" icon="wz-icon-phone">带图标</wzButton>
<wzButton type="danger" size="big" @change="handleButtonChange">点击</wzButton>
export default {
data() {
return {
loading: true,
disabled: true
};
},
methods: {
handleButtonChange() {
console.log("change...");
}
}
};
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
size |
尺寸 |
string |
big / medium / small / mini |
— |
type |
类型 |
string |
primary / success / warning / danger / info / text |
— |
loading |
是否加载中状态 |
boolean |
— |
false |
disabled |
是否禁用状态 |
boolean |
— |
false |
icon |
图标类名 |
string |
— |
— |
autofocus |
是否默认聚焦 |
boolean |
— |
false |
native-type |
原生 type 属性 |
string |
button / submit / reset |
button |
Events
事件名称 |
说明 |
回调参数 |
change |
点击事件 |
object MouseEvent |
card
<wzCard type="primary" shadow="hover">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<wzButton size="mini" style="float: right; padding: 3px">操作按钮</wzButton>
</div>
<div>列表内容</div>
</wzCard>
<style>
.clearfix {
clear: both;
}
</style>
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
模板 |
string |
primary / info /dark |
- |
header |
设置 header,也可以通过 slot#header 传入 DOM string |
— |
— |
|
body-style |
设置 body 的样式 |
object |
— { padding: '20px' } |
|
shadow |
设置阴影显示时机 |
string |
always / hover / never |
always |
collapse
折叠面板
<wz-collapse v-model="activeNames" @change="collapseHandleChange">
<wz-collapse-item name="1">
<template slot="title">
一致性 Consistency<i class="header-icon wz-icon-info"></i>
</template>
<div>
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
</div>
<div>
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
</div>
</wz-collapse-item>
<wz-collapse-item title="反馈 Feedback" name="2">
<div>
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
</div>
<div>
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
</div>
</wz-collapse-item>
<wz-collapse-item title="效率 Efficiency" name="3">
<div>简化流程:设计简洁直观的操作流程;</div>
<div>
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
</div>
<div>
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
</div>
</wz-collapse-item>
<wz-collapse-item title="可控 Controllability" name="4">
<div>
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
</div>
<div>
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
</div>
</wz-collapse-item>
</wz-collapse>
<script>
export default {
data() {
return {
activeNames: ["1"]
};
},
methods: {
collapseHandleChange(val) {
console.log(val);
}
}
};
</script>
collapse Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
当前激活的面板(如果是手风琴模式,绑定值类型需要为 string,否则为 array) |
string / array |
— |
— |
accordion |
是否手风琴模式 |
boolean |
— |
false |
collapse Events
事件名称 |
说明 |
回调参数 |
change |
当前激活面板改变时触发(如果是手风琴模式,参数 activeNames 类型为 string,否则为 array) |
(activeNames: array / string) |
collapse Item Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
name |
唯一标志符 |
string/number |
— |
— |
title |
面板标题 |
string |
— |
— |
disabled |
是否禁用 |
boolean |
— |
— |
icon
<i class="wz-icon-loading"></i>
loading
<div v-loading="loading">
<wzButton @change="handleDivLoadingChange">dom加载</wzButton>
<wzButton @change="handleFusLoadingChange">全屏加载</wzButton>
</div>
<script>
export default {
data() {
return {
loading: false
};
},
methods: {
handleDivLoadingChange() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 3000);
},
handleFusLoadingChange() {
this.$loading();
setTimeout(() => {
this.$loading().close();
}, 3000);
}
}
};
</script>
如果完整引入了 loading, Vue.prototype 上会有一个全局方法 $loading,它的调用方式为:this.$loading(options),同样会返回一个 Loading 实例。此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。
Options
参数 |
说明 |
类型 |
可选值 |
默认值 |
target |
Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点 |
object/string |
— |
document.body |
body |
同 v-loading 指令中的 body 修饰符 |
boolean |
— |
false |
fullscreen |
同 v-loading 指令中的 fullscreen 修饰符 |
boolean |
— |
true |
lock |
同 v-loading 指令中的 lock 修饰符 |
boolean |
— |
false |
text |
显示在加载图标下方的加载文案 |
string |
— |
— |
spinner |
自定义加载图标类名 |
string |
— |
— |
background |
遮罩背景色 |
string |
— |
— |
customClass |
Loading 的自定义类名 |
string |
— |
— |
message
<wzButton @change="handleMessageChange">message</wzButton>
<script>
import { Message } from "wiztekui";
export default {
data() {
return {
loading: false
};
},
methods: {
handleMessageChange() {
Message.primary("信息");
}
}
};
</script>
Vue.prototype 上会有一个全局方法 $message,它的调用方式为:this.$message(options),同样会返回一个 Message 实例。此时调用它们中任意一个的 close 方法都能关闭这个全屏 Message。
Options
参数 |
说明 |
类型 |
可选值 |
默认值 |
message |
消息文字 |
string / VNode |
— |
— |
type |
主题 |
string |
primary、success/warning/info/error |
primary |
iconClass |
自定义图标的类名,会覆盖 type |
string |
— |
— |
dangerouslyUseHTMLString |
是否将 message 属性作为 HTML 片段处理 |
boolean |
— |
false |
customClass |
自定义类名 |
string |
— |
— |
duration |
显示时间, 毫秒。设为 0 则不会自动关闭 |
number |
— |
3000 |
showClose |
是否显示关闭按钮 |
boolean |
— |
false |
center |
文字是否居中 |
boolean |
— |
false |
onClose |
关闭时的回调函数, 参数为被关闭的 message 实例 |
function |
— |
— |
message Methods
方法名 |
说明 |
close |
关闭当前的 Message |
input
<wzInput v-model="input"></wzInput>
<wzInput v-model="input">
<template slot="prepend">Http://</template>
</wzInput>
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
size |
大小 |
string |
big / medium / small / mini |
- |
placeholder |
输入框占位文本 |
string |
- |
- |
clearable |
是否可清空 |
boolean |
- |
false |
maxlength |
原生属性,最大输入长度 |
number |
- |
- |
show-password |
是否显示切换密码图标 |
boolean |
- |
false |
disabled |
禁用 |
boolean |
- |
false |
prefix-icon |
输入框头部图标 |
string |
— |
— |
suffix-icon |
输入框尾部图标 |
string |
— |
— |
name |
原生属性 |
string |
— |
— |
readonly |
原生属性,是否只读 |
boolean |
— |
false |
max |
原生属性,设置最大值 |
— |
— |
— |
min |
原生属性,设置最小值 |
— |
— |
— |
step |
原生属性,设置输入字段的合法数字间隔 |
— |
— |
— |
autofocus |
原生属性,自动获取焦点 |
boolean |
true, false |
false |
form |
原生属性 |
string |
— |
— |
Input Slots
name |
说明 |
prefix |
输入框头部内容 |
suffix |
输入框尾部内容 |
prepend |
输入框前置内容 |
append |
输入框后置内容 |
Input Events
事件名称 |
说明 |
回调参数 |
blur |
在 Input 失去焦点时触发 |
(event: Event) |
focus |
在 Input 获得焦点时触发 |
(event: Event) |
change |
在 Input 值改变时触发 |
(value: string |
clear |
在点击由 clearable 属性生成的清空按钮时触发 |
— |
Input Methods
方法名 |
说明 |
参数 |
focus |
使 input 获取焦点 |
— |
blur |
使 input 失去焦点 |
— |
select |
选中 input 中的文字 |
— |
radio
<wzRadio v-model="radio" label="1"></wzRadio>
<wz-radio-group v-model="radio">
<wz-radio :label="2">radio2</wz-radio>
<wz-radio :label="3">radio3</wz-radio>
</wz-radio-group>
<wz-radio-group v-model="radio">
<wz-radio-button :label="4">按钮4</wz-radio-button>
<wz-radio-button :label="5">按钮5</wz-radio-button>
</wz-radio-group>
Radio Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
绑定值 |
string / number / boolean |
— |
— |
label |
Radio 的 value |
string / number / boolean |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
border |
是否显示边框 |
boolean |
— |
false |
size |
Radio 的尺寸,仅在 border 为真时有效 |
string |
medium / small / mini |
— |
name |
原生 name 属性 |
string |
— |
— |
Radio-group Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
绑定值 |
string / number / boolean |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
text-color |
按钮形式的 Radio 激活时的文本颜色 |
string |
— |
#ffffff |
fill |
按钮形式的 Radio 激活时的填充色和边框色 |
string |
— |
#0062cc |
size |
单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 |
string |
medium / small / mini |
— |
Radio-button Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
label |
Radio 的 value |
string / number |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
name |
原生 name 属性 |
string |
— |
— |
Events
事件名称 |
说明 |
回调参数 |
change |
绑定值变化时触发的事件 |
选中的 Radio label 值 |
checkbox
<wzCheckbox v-model="checkbox" label="1"></wzCheckbox>
<wz-checkbox-group v-model="checkbox">
<wz-checkbox :label="2">多选项</wz-checkbox>
<wz-checkbox :label="3">多选项</wz-checkbox>
</wz-checkbox-group>
<wz-checkbox-group v-model="checkbox">
<wz-checkbox-button :label="4">多选项</wz-checkbox-button>
<wz-checkbox-button :label="5">多选项</wz-checkbox-button>
</wz-checkbox-group>
<wz-checkbox
:indeterminate="isAllCheck"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</wz-checkbox
>
<wz-checkbox-group v-model="checkbox2" @change="handleChecked2Change">
<wz-checkbox :label="21">多选项</wz-checkbox>
<wz-checkbox :label="22">多选项</wz-checkbox>
<wz-checkbox :label="23">多选项</wz-checkbox>
<wz-checkbox :label="24">多选项</wz-checkbox>
</wz-checkbox-group>
<script>
export default {
data() {
return {
checkAll: false,
checkbox2: [],
isAllCheck: false
};
},
methods: {
handleCheckAllChange(val) {
this.checkbox2 = val ? [21, 22, 23, 24] : [];
this.isAllCheck = false;
},
handleChecked2Change(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === [21, 22, 23, 24].length;
this.isAllCheck =
checkedCount > 0 && checkedCount < [21, 22, 23, 24].length;
}
}
};
</script>
checkbox Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
绑定值 |
string / number / boolean |
— |
— |
label |
选中状态的值(只有在 checkbox-group 或者绑定对象类型为 array 时有效) |
string / number / boolean |
— |
— |
true-label |
选中时的值 |
string / number |
— |
— |
false-label |
没有选中时的值 |
string / number |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
border |
是否显示边框 |
boolean |
— |
false |
size |
Checkbox 的尺寸,仅在 border 为真时有效 |
string |
medium / small / mini |
— |
name |
原生 name 属性 |
string |
— |
— |
checked |
当前是否勾选 |
boolean |
— |
false |
indeterminate |
设置 indeterminate 状态,只负责样式控制 |
boolean |
— |
false |
checkbox-group Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
绑定值 |
string / number / boolean |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
size |
Checkbox 的尺寸,仅在 border 为真时有效 |
string |
medium / small / mini |
— |
min |
可被勾选的 checkbox 的最小数量 |
number |
— |
— |
max |
可被勾选的 checkbox 的最大数量 |
number |
— |
— |
text-color |
按钮形式的 Checkbox 激活时的文本颜色 |
string |
— |
#ffffff |
fill |
按钮形式的 Checkbox 激活时的填充色和边框色 |
string |
— |
#0062cc |
checkbox-button Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
label |
选中状态的值(只有在 checkbox-group 或者绑定对象类型为 array 时有效) |
string / number / boolean |
— |
— |
true-label |
选中时的值 |
string / number |
— |
— |
false-label |
没有选中时的值 |
string / number |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
name |
原生 name 属性 |
string |
— |
— |
checked |
当前是否勾选 |
boolean |
— |
false |
Events
事件名称 |
说明 |
回调参数 |
change |
当绑定值变化时触发的事件 |
更新后的值 |
switch
<wzSwitch v-model="meSwitch"></wzSwitch>
<wz-switch
v-model="meSwitch"
active-color="#0062cc"
inactive-color="#0062cc"
active-text="精确到日"
inactive-text="精确到时"
>
</wz-switch>
switch Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
绑定值 |
boolean / string / number |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
width |
switch 的宽度(像素) |
number |
— |
35 |
active-icon-class |
switch 打开时所显示图标的类名,设置此项会忽略 active-text |
string |
— |
— |
inactive-icon-class |
switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text |
string |
— |
— |
active-text |
switch 打开时的文字描述 |
string |
— |
— |
inactive-text |
switch 关闭时的文字描述 |
string |
— |
— |
active-value |
switch 打开时的值 |
boolean / string / number |
— |
true |
inactive-value |
switch 关闭时的值 |
boolean / string / number |
— |
false |
active-color |
switch 打开时的背景色 |
string |
— |
#0062cc |
inactive-color |
switch 关闭时的背景色 |
string |
— |
#dddfe7 |
name |
switch 对应的 name 属性 |
string |
— |
— |
validate-event |
改变 switch 状态时是否触发表单的校验 |
boolean |
- |
true |
switch Events
事件名称 |
说明 |
回调参数 |
change |
switch 状态发生变化时的回调函数 |
新状态的值 |
switch Methods
方法名 |
说明 |
参数 |
focus |
使 Switch 获取焦点 |
- |
Dialog
在保留当前页面状态的情况下,告知用户并承载相关操作。
<wz-button type="text" @change="dialogVisible = true"
>点击打开 Dialog</wz-button
>
<wz-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<wz-button @change="dialogVisible = false">取 消</wz-button>
<wz-button type="primary" @change="dialogVisible = false">确 定</wz-button>
</span>
</wz-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
done();
}
}
};
</script>
Dialog 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。因此,如果需要执行 DOM 操作,或通过 ref 获取相应组件,请在 open 事件回调中进行。
如果 visible 属性绑定的变量位于 Vuex 的 store 内,那么 .sync 不会正常工作。此时需要去除 .sync 修饰符,同时监听 Dialog 的 open 和 close 事件,在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。
Dialog Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
visible |
是否显示 Dialog,支持 .sync 修饰符 |
boolean |
— |
false |
title |
Dialog 的标题,也可通过具名 slot (见下表)传入 |
string |
— |
— |
width |
Dialog 的宽度 |
string |
— |
50% |
fullscreen |
是否为全屏 Dialog |
boolean |
— |
false |
top |
Dialog CSS 中的 margin-top 值 |
string |
— |
15vh |
modal |
是否需要遮罩层 |
boolean |
— |
true |
modal-append-to-body |
遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 |
boolean |
— |
true |
append-to-body |
Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true |
boolean |
— |
false |
lock-scroll |
是否在 Dialog 出现时将 body 滚动锁定 |
boolean |
— |
true |
custom-class |
Dialog 的自定义类名 |
string |
— |
— |
close-on-click-modal |
是否可以通过点击 modal 关闭 Dialog |
boolean |
— |
true |
close-on-press-escape |
是否可以通过按下 ESC 关闭 Dialog |
boolean |
— |
true |
show-close |
是否显示关闭按钮 |
boolean |
— |
true |
before-close |
关闭前的回调,会暂停 Dialog 的关闭 |
function(done),done 用于关闭 Dialog |
— |
— |
center |
是否对头部和底部采用居中布局 |
boolean |
— |
false |
Slot
name |
说明 |
— |
Dialog 的内容 |
title |
Dialog 标题区的内容 |
footer |
Dialog 按钮操作区的内容 |
Events
事件名称 |
说明 |
回调参数 |
open |
Dialog 打开的回调 |
— |
opened |
Dialog 打开动画结束时的回调 |
— |
close |
Dialog 关闭的回调 |
— |
closed |
Dialog 关闭动画结束时的回调 |
— |
tooltip
文字提示
<wz-tooltip placement="top" content="top 提示文字"
><span>上提示</span></wz-tooltip
>
tooltip 内不支持 router-link 组件,请使用 vm.$router.push 代替。
tooltip 内不支持 disabled form 元素,参考 MDN,请在 disabled form 元素外层添加一层包裹元素。
tooltip Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
effect |
默认提供的主题 |
String |
dark/light/primary/success/warning/danger/info |
dark |
content |
显示的内容,也可以通过 slot#content 传入 DOM |
String |
— |
— |
placement |
Tooltip 的出现位置 |
String |
top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |
bottom |
value / v-model |
状态是否可见 |
Boolean |
— |
false |
disabled |
Tooltip 是否可用 |
Boolean |
— |
false |
offset |
出现位置的偏移量 |
Number |
— |
0 |
transition |
定义渐变动画 |
String |
— |
wz-fade-in-linear |
visible-arrow |
是否显示 Tooltip 箭头,更多参数可见 Vue-popper |
Boolean |
— |
true |
popper-options |
popper.js 的参数 |
Object |
参考 popper.js 文档 |
{ boundariesElement: 'body', gpuAcceleration: false } |
open-delay |
延迟出现,单位毫秒 |
Number |
— |
0 |
manual |
手动控制模式,设置为 true 后,mouseenter 和 mouseleave 事件将不会生效 |
Boolean |
— |
false |
popper-class |
为 Tooltip 的 popper 添加类名 |
String |
— |
— |
enterable |
鼠标是否可进入到 tooltip 中 |
Boolean |
— |
true |
hide-after |
Tooltip 出现后自动隐藏延时,单位毫秒,为 0 则不会自动隐藏 |
number |
— |
0 |
tabindex |
Tooltip 组件的 tabindex |
number |
— |
0 |
Popover
Popover 的属性与 Tooltip 很类似,它们都是基于 Vue-popper 开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。
<template>
<wz-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
>
<wz-button slot="reference">hover 激活</wz-button>
</wz-popover>
<wz-popover
placement="bottom"
title="标题"
width="200"
trigger="click"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
>
<wz-button slot="reference">click 激活</wz-button>
</wz-popover>
<wz-popover
ref="popover"
placement="right"
title="标题"
width="200"
trigger="focus"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
>
</wz-popover>
<wz-button v-popover:popover>focus 激活</wz-button>
<wz-popover
placement="bottom"
title="标题"
width="200"
trigger="manual"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
v-model="visible"
>
<wz-button slot="reference" @change="visible = !visible"
>手动激活</wz-button
>
</wz-popover>
</template>
<script>
export default {
data() {
return {
visible: false
};
}
};
</script>
如需改变背景颜色,添加 popper-class='wz-popover-tooltip',border的颜色位置为placement的选项,默认 bottom,参数为:border- + placement.split("-")[0] + -color
<style>
.wz-popover-tooltip {
background-color: #333;
}
.wz-popover-tooltip .popper__arrow::after {
border-bottom-color: #333 !important;
}
</style>
Popover Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
trigger |
触发方式 |
String |
click/focus/hover/manual |
click |
title |
标题 |
String |
— |
— |
content |
显示的内容,也可以通过 slot 传入 DOM |
String |
— |
— |
width |
宽度,auto为自动 |
String, Number |
auto |
- |
padding |
padding |
String, Number |
— |
6 |
fontSize |
文字大小 |
String, Number |
— |
14px |
fontColor |
文字颜色 |
String |
— |
#333333 |
placement |
出现位置 |
String |
top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |
bottom |
disabled |
Popover 是否可用 |
Boolean |
— |
false |
value / v-model |
状态是否可见 |
Boolean |
— |
false |
offset |
出现位置的偏移量 |
Number |
— |
0 |
transition |
定义渐变动画 |
String |
— |
fade-in-linear |
visible-arrow |
是否显示 Tooltip 箭头,更多参数可见 Vue-popper |
Boolean |
— |
true |
popper-options |
popper.js 的参数 |
Object |
参考 popper.js 文档 |
{ boundariesElement: 'body', gpuAcceleration: false } |
popper-class |
为 popper 添加类名 |
String |
— |
— |
open-delay |
触发方式为 hover 时的显示延迟,单位为毫秒 |
Number |
— |
— |
tabindex |
Popover 组件的 tabindex |
number |
— |
0 |
Slot
name |
说明 |
— Popover |
内嵌 HTML 文本 |
reference |
触发 Popover 显示的 HTML 元素 |
Events
事件名称 |
说明 |
回调参数 |
show |
显示时触发 |
— |
after-enter |
显示动画播放完毕后触发 |
— |
hide |
隐藏时触发 |
— |
after-leave |
隐藏动画播放完毕后触发 |
— |
Menu
<wz-menu>
<wz-menu-item index="1">处理中心</wz-menu-item>
<wz-submenu index="2">
<template slot="title">我的工作台</template>
<wz-menu-item index="2-1">选项1</wz-menu-item>
<wz-menu-item index="2-2"
><template slot="title"
><i class="wz-icon-phone"></i><span>选项2</span></template
></wz-menu-item
>
<wz-menu-item index="2-3">选项3</wz-menu-item>
<wz-submenu index="2-4">
<template slot="title">选项4</template>
<wz-menu-item index="2-4-1">选项1</wz-menu-item>
<wz-menu-item index="2-4-2">选项2</wz-menu-item>
<wz-menu-item index="2-4-3">选项3</wz-menu-item>
</wz-submenu>
</wz-submenu>
<wz-menu-item index="3">
<template slot="title">
<i class="wz-icon-back-left"></i>
<span>消息中心</span>
</template>
</wz-menu-item>
<wz-submenu index="4">
<template slot="title">订单管理</template>
<wz-menu-item index="4-1">选项1</wz-menu-item>
<wz-menu-item index="4-2">选项2</wz-menu-item>
</wz-submenu>
</wz-menu>
Menu Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
mode |
模式 |
string |
horizontal / vertical |
horizontal |
collapse |
是否水平折叠收起菜单(仅在 mode 为 vertical 时可用) |
boolean |
— |
false |
background-color |
菜单的背景色(仅支持 hex 格式) |
string |
— |
#0062cc |
text-color |
菜单的文字颜色(仅支持 hex 格式) |
string |
— |
#ffffff |
active-text-color |
当前激活菜单的文字颜色(仅支持 hex 格式) |
string |
— |
#555555 |
default-active |
当前激活菜单的 index |
string |
— |
— |
default-openeds |
当前打开的 sub-menu 的 index 的数组 |
Array |
— |
— |
unique-opened |
是否只保持一个子菜单的展开 |
boolean |
— |
false |
menu-trigger |
子菜单打开的触发方式(只在 mode 为 horizontal 时有效) |
string |
hover / click |
hover |
router |
是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 |
boolean |
— |
false |
collapse-transition |
是否开启折叠动画 |
boolean |
— |
true |
Menu Methods
方法名称 |
说明 |
参数 |
open |
展开指定的 sub-menu |
index: 需要打开的 sub-menu 的 index |
close |
收起指定的 sub-menu |
index: 需要收起的 sub-menu 的 index |
Menu Events
事件名称 |
说明 |
回调参数 |
select |
菜单激活回调 |
index: 选中菜单项的 index, indexPath: 选中菜单项的 index path |
open |
sub-menu 展开的回调 |
index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index path |
close |
sub-menu 收起的回调 |
index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path |
SubMenu Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
index |
唯一标志 |
string/null |
— |
null |
popper-class |
弹出菜单的自定义类名 |
string |
— |
— |
show-timeout |
展开 sub-menu 的延时 |
number |
— |
300 |
hide-timeout |
收起 sub-menu 的延时 |
number |
— |
300 |
disabled |
是否禁用 |
boolean |
— |
false |
popper-append-to-body |
是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时,可尝试修改该属性 |
boolean |
— |
一级子菜单:true / 非一级子菜单:false |
Menu-Item Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
index |
唯一标志 |
string |
— |
— |
route |
Vue Router 路径对象 |
Object |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
Menu-Group Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
title |
分组标题 |
string |
— |
— |
布局
<div class="wz-header">header</div>
<div class="wz-footer">footer</div>
<div class="wz-container">container</div>
<div class="wz-container wz-container-fixed wz-container-fixed-height">
<div
class="wz-container-child-norow-div wz-aside"
style="background-color: #ccc"
>
aside
</div>
<div class="wz-container-child-norow-div wz-main">main</div>
</div>
Attribute
参数 |
说明 |
类型 |
子 DOM 可选值 |
默认内容 |
wz-header |
页头 |
calss |
— |
高度:60px;背景色:#555555 |
wz-container |
页面 |
calss |
— |
— |
wz-container-fixed |
fixed 布局 |
calss |
wz-container-child-norow-div |
display:flex;flex-flow: row nowrap;justify-content: space-between; |
wz-container-fixed-height |
fixed 布局,屏幕高度 |
calss |
— |
高度:屏幕高度-header 高度-footer 高度 |
wz-aside |
右边栏 |
calss |
— |
— |
wz-main |
页面 |
calss |
— |
— |
wz-footer |
页底 |
calss |
— |
width: 100%;height: 30px;line-height: 30px;background-color: #888888;color: floralwhite; |
wz-container-child-norow-div Attribute
参数 |
说明 |
类型 |
默认内容 |
wz-container-child-norow-div |
wz-container-fixed 子 DIV 样式 |
calss |
flex: 0 0 100%; |