hjl19911127 / vue-drawer-layout

A simple DrawerLayout component for Vue.js.
http://share.codehuang.com/vue-drawer-layout
MIT License
409 stars 86 forks source link

能否将demo的代码提交到github上 #1

Closed zuoliang0 closed 6 years ago

zuoliang0 commented 6 years ago

http://chat.codehuang.com/message 这个例子的代码能否给出谢谢,或者再给出一个具体的使用例子

hjl19911127 commented 6 years ago
<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>

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

hjl19911127 commented 6 years ago

Close issue for lack of activity.