精华内容
下载资源
问答
  • vue侧边栏组件_画布侧边栏Vue组件

    千次阅读 2020-07-25 09:44:47
    vue侧边栏组件 汉堡菜单 (vue-burger-menu) An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations. 画布侧边栏Vue组件,具有使用CSS过渡...

    vue侧边栏组件

    汉堡菜单 (vue-burger-menu)

    An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations.

    画布侧边栏Vue组件,具有使用CSS过渡和SVG路径动画的效果和样式的集合。

    To build the examples locally, run:

    要在本地构建示例,请运行:

    yarn 
    yarn serve

    Then open localhost:8080 in a browser

    然后在浏览器中打开localhost:8080

    安装 (Installation)

    npm install vue-burger-menu --save
    yarn add vue-burger-menu

    用法 (Usage)

    Items should be passed as child elements of the components

    项目应作为组件的子元素传递

    import { Slide } from 'vue-burger-menu'  // import the CSS transitions you wish to use, in this case we are using `Slide`
    
    export default {
        components: {
            Slide // Register your component
        }
    }

    In your template

    在您的模板中

    <template>
        <Slide>
          <a id="home" href="#"> 
            <span>Home</span>  
          </a>
        </Slide>
    </template>

    动画制作 (Animations)

    The example above imported slide which renders a menu that slides in on the page when the burger icon is clicked. To use a different animation you can subsitute slide with any of the following

    上面的示例导入了slide ,该幻灯片呈现了一个菜单,当单击汉堡图标时,该菜单会在页面上滑动。 要使用其他动画,您可以使用以下任意一种替换幻灯片

    • slide

      滑动

    ATTENTION - the below animations are in WIP

    注意-以下动画在制品中

    • stack

    • elastic

      有弹性

    • bubble

      泡沫

    • push

    • pushRotate

      pushRotate

    • scaleDown

      缩小

    • scaleRotate

      scaleRotate

    • fallDown

      摔倒

    • reveal

      揭示

    位置 (Position)

    The menu opens from left by default. To have it open from the right, use the right prop. It's just a boolean so you don't need to specify a value.

    默认情况下,菜单从左打开。 要从右侧打开它,请使用right道具。 它只是一个布尔值,因此您无需指定值。

    <Slide right/>

    宽度 (Width)

    You can specify the width of the menu with the width prop. The default is 300px

    您可以使用width属性指定菜单的width 。 默认值为300px

    <Slide width="400">

    开启状态 (Open state)

    You can control whether the sidebar is open or closed with the isOpen prop. This is useful if you need to close the menu after a user clicks on an item in it, for example, or if you want to open the menu from some other button in addition to the standard burger icon. The default value is false

    您可以使用isOpen道具控制边栏是打开还是关闭。 例如,如果您需要在用户单击菜单项后关闭菜单,或者要通过标准汉堡图标之外的其他按钮打开菜单,此功能将非常有用。 默认值为false

    // To render the menu open
    
    <Slide isOpen>

    在逃生时关闭 (Close on Escape)

    By default, the menu will close when the Escape key is pressed. To disable this behavior, you can pass the disableCloseOnEsc prop. This is useful in cases where you want the menu to be open all the time, for example if you're implementing a responsive menu that behaves differently depending on the browser width.

    默认情况下,按退出键将关闭菜单。 若要禁用此行为,可以传递disableCloseOnEsc属性。 这在您希望菜单始终打开的情况下很有用,例如,如果您要实现响应式菜单,其行为根据浏览器的宽度而有所不同。

    <Slide disableEsc />

    覆盖 (Overlay)

    You can turn off the default overlay with noOverlay.

    您可以使用noOverlay关闭默认的叠加层。

    <Slide noOverlay />

    造型 (Styling)

    Visual styles (color, font etc) need to be supplied with the help of CSS

    视觉样式(颜色,字体等)需要在CSS的帮助下提供

    CSS (CSS)

    The component has following helper class

    该组件具有以下帮助程序类

    .bm-burger-button {
          position: fixed;
          width: 36px;
          height: 30px;
          left: 36px;
          top: 36px;
          cursor: pointer;
        }
        .bm-burger-bars {
          background-color: #373a47;
        }
        .line-style {
          position: absolute;
          height: 20%;
          left: 0;
          right: 0;
        }
        .cross-style {
          position: absolute;
          top: 12px;
          right: 2px;
          cursor: pointer;
        }
        .bm-cross {
          background: #bdc3c7;
        }
        .bm-cross-button {
          height: 24px;
          width: 24px;
        }
        .bm-menu {
          height: 100%; /* 100% Full-height */
          width: 0; /* 0 width - change this with JavaScript */
          position: fixed; /* Stay in place */
          z-index: 1000; /* Stay on top */
          top: 0;
          left: 0;
          background-color: rgb(63, 63, 65); /* Black*/
          overflow-x: hidden; /* Disable horizontal scroll */
          padding-top: 60px; /* Place content 60px from the top */
          transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
        }
    
        .bm-overlay {
          background: rgba(0, 0, 0, 0.3);
        }
        .bm-item-list {
          color: #b8b7ad;
          margin-left: 10%;
          font-size: 20px;
        }
        .bm-item-list > * {
          display: flex;
          text-decoration: none;
          padding: 0.7em;
        }
        .bm-item-list > * > span {
          margin-left: 10px;
          font-weight: 700;
          color: white;
        }

    浏览器支持 (Browser Support)

    Chrome and Firefox have full support, but Safari and IE have strange behavior for some of the menus.

    Chrome和Firefox具有完全支持,但是Safari和IE在某些菜单上有奇怪的行为。

    翻译自: https://vuejsexamples.com/an-off-canvas-sidebar-vue-component/

    vue侧边栏组件

    展开全文
  • vue侧边栏组件_Vue.js侧边栏菜单组件

    千次阅读 2020-07-27 17:59:57
    vue侧边栏组件 边栏菜单 (vue-sidebar-menu) A Vue.js Sidebar Menu Component. Vue.js侧栏菜单组件。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm i vue-sidebar-menu --save 用法 ...

    vue侧边栏组件

    边栏菜单 (vue-sidebar-menu)

    A Vue.js Sidebar Menu Component.

    Vue.js侧栏菜单组件。

    安装 (Installation)

    npm i vue-sidebar-menu --save

    用法 (Usage)

    import Vue from 'vue'
    import VueSidebarMenu from 'vue-sidebar-menu'
    
    Vue.use(VueSidebarMenu)
    <template>
      <sidebar-menu :menu="menu" />
    </template>
    
    <script>
        export default {
            data() {
                menu: [
                    {
                        href: '/',
                        title: 'Dashboard',
                        icon: 'fa fa-user'
                    },
                    {
                        href: '#',
                        title: 'Charts',
                        icon: 'fa fa-chart-area'
                    },
                ]
            }
        }
    </script>

    发展历程 (Development)

    npm install
    npm run dev

    翻译自: https://vuejsexamples.com/a-vue-js-sidebar-menu-component/

    vue侧边栏组件

    展开全文
  • vue侧边栏动画 vue动画

    千次阅读 2019-09-26 17:31:45
    vue侧边栏动画 vue动画

    vue侧边栏动画 vue动画

    展开全文
  • 今天小编就为大家分享一篇vue侧边栏动态生成下级菜单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue侧边栏实现

    千次阅读 2020-01-09 14:23:27
    vue 侧边栏跳转路由配置 Vue / keep-alive(看keep-alive标签的作用就行) 下拉菜单el-menu
    展开全文
  • vue侧边栏导航,右侧显示对应内容

    万次阅读 多人点赞 2018-10-30 15:01:28
    最终效果 ... 实现代码 1.下载vue-router npm install vue-router --save-dev ...import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 age...
  • Vue侧边栏案例

    千次阅读 2020-09-24 00:30:11
    Vue侧边栏案例 使用 :class 的方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜单栏</title> <style type="text/css"> *{ ...
  • vue侧边栏个头部固定(elementUi) 效果图 <template> <div class="home-page"> <el-container ref="homePage"> <el-aside width="200px" style="background-color: rgb(84, 92, 100);"&...
  • 1. 侧边栏权限问题 先将全部侧边栏结构数据在 data 中声明 将从vux中获取回来的侧边数据和data中定义好的侧边栏数据进行比对 就完成了侧边栏的权限 2. 按钮的权限 在 main.js 中声明方法 在页面按钮上 v-if ...
  • vue侧边栏导航和右边内容一样高吗? 失败了,最后用做导航和上导航 定位, 右内容类似滚动条 效果; 直接把top导航和左侧导航栏display:flxed定位左边,右边内容left: top 转载于:...
  • <template> <el-select size="medium" v-model="getPageParam.pay_method" placeholder="请选择渠道名称" no-data-text="请先选择渠道类型" ...
  • 0x00初始化VUE项目 vue ui 按照上一篇博客内容点这里,初始化VUE项目 0x01修改文件 第一步,修改入口文件 修改app.vue为如下,主要是增加<router-view/>,用于路由匹配 <template> <div id=...
  • vue 侧边栏跳转路由配置

    千次阅读 2019-07-17 19:34:11
    路由配置: ...import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Main from '@/components/Main' import GaodeMap from '@/map/GaodeMap' impor...
  • vue点击侧边菜单栏然后出现相应的右面的内容 详情连接推荐:vue搭建后台管理页面效果
  • <div> <el-menu :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened router > <el-submenu index="1">
  • css -- vue侧边栏

    2020-01-02 11:00:44
    <template> <div class="navbar_left"> <li> <div class="navbar_left_o">...i class="el-icon-user" v-on:mouseover="change1Active($event)" v-on:mouseout="remov...
  • vue侧边栏动态生成下级菜单

    千次阅读 2018-08-02 18:12:53
    --侧边栏的方向 水平 --> mode="horizontal" @select="handleSelect" background-color="#000000" text-color="#fff" active-text-color="#ffd04b" :unique-opened="true" :default-active="onRoutes" router...
  • 修改store/config.js中的menu组件不生效,试过重新运行npm run serve/dev无效,在浏览器中重新打开一个新的标签页输入url生效! (具体原因还没有了解)
  • vue react 侧边栏动画,侧边栏组件,多种侧边栏动画
  • 本文实例为大家分享了vue侧边栏导航的具体代码,供大家参考,具体内容如下 最终效果 点击下一个导航,上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,780
精华内容 2,312
关键字:

vue侧边栏

vue 订阅