Giter Club home page Giter Club logo

Comments (2)

hjl19911127 avatar hjl19911127 commented on August 15, 2024
<template>
  <div class="app">
    <vue-drawer-layout
      ref="drawerLayout"
      :width="width"
      :animatable="true"
      :enable="sideMenuEnable"
      :z-index="0"
      :drawable-distance="Math.floor(width/3)"
      :content-drawable="true"
      :backdrop="true"
      :backdrop-opacity-range="[0,0.3]"
      @slide-start="handleSlideStart"
      @slide-move="handleSlideMove"
      @slide-end="handleSlideEnd"
      @mask-click="handleMaskClick">
      <div class="menu-content" slot="drawer">
        <div class="menu-user-wrap">
          <div class="user-info">
            <div class="avatar-wrap">
              <img src="default.png">
              <div class="user-name">老夫子Alexander</div>
            </div>
          </div>
          <a class="qrcode" href="javascript:;"><i class="c-icon-qrcode"></i></a>
        </div>
        <div class="menu-item-list">
          <router-link class="menu-item" to="/vip"><i class="c-icon-vip"></i>激活会员</router-link>
          <router-link class="menu-item" to="/wallet"><i class="c-icon-wallet"></i>QQ钱包</router-link>
          <router-link class="menu-item" to="/vip"><i class="c-icon-drawing-board"></i>个性装扮</router-link>
          <router-link class="menu-item" to="/collect"><i class="c-icon-collect"></i>我的收藏</router-link>
          <router-link class="menu-item" to="/album"><i class="c-icon-image"></i>我的相册</router-link>
          <router-link class="menu-item" to="/file"><i class="c-icon-file"></i>我的文件</router-link>
          <router-link class="menu-item" to="/vip"><i class="c-icon-signal"></i>免流量特权</router-link>
        </div>
        <div class="menu-foot">
          <router-link class="menu-foot-button" to="/setting"><i class="c-icon-setting"></i>设置</router-link>
          <a class="menu-foot-button" href="javascript:void(0);"><i class="c-icon-moon"></i>夜间</a>
        </div>
        <div class="menu-weather">
          <div class="weather-temperature">18<span>°</span></div>
          <div class="weather-district">福州</div>
        </div>
      </div>
      <transition slot="content">
        <router-view class="main-content"></router-view>
      </transition>
    </vue-drawer-layout>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'

  const defaultWidth = Math.floor(document.body.clientWidth * 0.8);
  export default {
    data() {
      return {
        width: defaultWidth
      }
    },
    watch: {
      'sideMenuAction'(v) {
        this.$refs.drawerLayout.toggle(v.visible)
      }
    },
    methods: {
      handleMaskClick() {
        this.$refs.drawerLayout.toggle(false);
      },
      handleSlideStart() {
      },
      handleSlideMove(pos) {
      },
      handleSlideEnd(visible) {
        this.$store.dispatch('UPDATE_SIDE_MENU_VISIBLE_STATUS', visible);
      }
    },
    components: {
    },
    computed: {
      ...mapGetters(['sideMenuEnable', 'sideMenuAction']),
    }
  }
</script>

主要代码都在这里了哈,其实就是文档中第二个例子,我会在近期再补充一些范例,多谢支持

from vue-drawer-layout.

hjl19911127 avatar hjl19911127 commented on August 15, 2024

Close issue for lack of activity.

from vue-drawer-layout.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.