Comments (2)
<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.
Close issue for lack of activity.
from vue-drawer-layout.
Related Issues (20)
- Default scroll not working HOT 6
- Can't get it working with nuxt HOT 1
- 不用nodejs,你这个控件怎么用? HOT 4
- Option to enable or disable dragging HOT 2
- Can't scroll elements inside the drawer HOT 4
- support TypeScript
- 关于refresh HOT 2
- 移动端,滑动与浏览器左滑退出当前地址冲突 HOT 2
- 左侧滑动和地图滑动冲突,在地图上无法侧滑 HOT 1
- this.$refs.drawerLayout is undefined HOT 8
- 您好,请问有禁止拖拽滑动的方法吗? HOT 2
- Doesn't work on window resize
- 微信内置浏览器无法使用
- Conflict with vue awesome swiper/swiperjs
- Not working on safari browser both on macbook and iphone HOT 1
- 侧滑栏的内容会显示在主页面的底下了 bug吗? 怎么搞? HOT 1
- Vue 3?
- Slot error for vue3
- 这个支持嵌套使用吗 HOT 2
- Disable drawer open on swipe HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-drawer-layout.