vue导航菜单组件_一个Vue.js组件来切换导航抽屉菜单容器

最新推荐文章于 2024-08-09 07:52:52 发布

cuk5239

最新推荐文章于 2024-08-09 07:52:52 发布

阅读量1.1k

点赞数

文章标签： vue npm vnc lnmp safari ViewUI

原文链接：https://vuejsexamples.com/a-vue-js-component-to-toggle-navigation-drawer-menu-container/

版权

本文介绍了一个基于Vue.js的组件，该组件用于在浏览器环境中切换导航抽屉菜单。通过npm安装，并提供了详细的使用指南和属性说明。

摘要由CSDN通过智能技术生成

vue导航菜单组件

Vue组件样板 (vue-component-boilerplate)

A Vue.js component to toggle navigation drawer menu container.

一个Vue.js组件，用于切换导航抽屉菜单容器。

View demo View demo2 Download Source

查看演示查看演示2 下载源

安装 (Install)

浏览器 (Browser)

<script src="vue.js"></script>
<script src="vue-nav-drawer.min.js"></script>

npm (npm)

npm install --save vue-nav-drawer

用法 (Usage)

浏览器 (Browser)

<div id="app">
  <nav-drawer-handle></nav-drawer-handle>
  <nav-drawer>
    MENU LIST
  </nav-drawer>
</div>

<script src="vue.js"></script>
<script src="vue-nav-drawer.min.js"></script>
<script>
Vue.use(NavDrawer);
new Vue({
  el: '#app'
});
</script>

证监会 (SFC)

<template>
  <nav-drawer-handle></nav-drawer-handle>
  <nav-drawer>
    MENU LIST
  </nav-drawer>
</template>

<script>
import { NavDrawer, NavDrawerHandle } from '@inotom/vue-nav-drawer';

export default {
  components: {
    NavDrawer,
    NavDrawerHandle
  }
}
</script>

道具 (Props)

NavDrawerHandle (NavDrawerHandle)

Props	Type	Default	Description
`size`	`Number`	`50`	Hamburger menu size(px)
`weight`	`String`	`"normal"`	Hamburger menu line width (normal, thin, bold)
`color`	`String`	`"#fff"`	Hamburger menu line color
`bg-color`	`String`	`"#f6ac1d"`	Hamburger menu background color
`fsize`	`String`	`"10px"`	Menu label text size
`is-button`	`Boolean`	`false`	Add WAI-ARIA role button attribute

道具	类型	默认	描述
`size`	`Number`	`50`	汉堡菜单尺寸(px)
`weight`	`String`	`"normal"`	汉堡菜单线宽(常规，细，粗体)
`color`	`String`	`"#fff"`	汉堡菜单线颜色
`bg-color`	`String`	`"#f6ac1d"`	汉堡菜单背景色
`fsize`	`String`	`"10px"`	菜单标签文字大小
`is-button`	`Boolean`	`false`	添加WAI-ARIA角色按钮属性

导航抽屉 (NavDrawer)

Props	Type	Default	Description
`is-left`	`Boolean`	`false`	Drawer container align left
`bg-color`	`String`	`"#fff"`	Drawer container background color
`cover-opacity`	`Number`	`0.5`	Drawer background layer opacity
`disable-close-button`	`Boolean`	`false`	Hide close button
`media-query`	`String`	`"(max-width: 640px)"`	Enable drawer conditional
`z-index`	`Number`	`1000`	Drawer z-index
`is-button`	`Boolean`	`false`	Add WAI-ARIA role button attribute to close icon

道具	类型	默认	描述
`is-left`	`Boolean`	`false`	抽屉容器向左对齐
`bg-color`	`String`	`"#fff"`	抽屉容器背景色
`cover-opacity`	`Number`	`0.5`	抽屉背景层不透明度
`disable-close-button`	`Boolean`	`false`	隐藏关闭按钮
`media-query`	`String`	`"(max-width: 640px)"`	启用条件抽屉
`z-index`	`Number`	`1000`	抽屉Z索引
`is-button`	`Boolean`	`false`	将WAI-ARIA角色按钮属性添加到关闭图标