wiztekui

    1.7.6 • Public • Published

    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%;

    Install

    npm i wiztekui

    DownloadsWeekly Downloads

    1

    Version

    1.7.6

    License

    MIT

    Unpacked Size

    464 kB

    Total Files

    26

    Last publish

    Collaborators

    • xox.lei