Closed zuoliang0 closed 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>
主要代码都在这里了哈,其实就是文档中第二个例子,我会在近期再补充一些范例,多谢支持
Close issue for lack of activity.
http://chat.codehuang.com/message 这个例子的代码能否给出谢谢,或者再给出一个具体的使用例子