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="//static.codehuang.com/upload/avatars/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 :name="transitionName" slot="content">
<router-view class="main-content"/>
</transition>
</vue-drawer-layout>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
const defaultWidth = Math.floor(document.body.clientWidth * 0.8);
let historyState = history.state, lastDirection = 'forward';
export default {
data() {
return {
width: defaultWidth,
transitionName: 'slide-forward'
}
},
methods: {
handleMaskClick() {
this.$refs.drawerLayout.toggle(false);
},
handleSlideStart() {
},
handleSlideMove(pos) {
},
handleSlideEnd(visible) {
this.$store.dispatch('UPDATE_SIDE_MENU_VISIBLE_STATUS', visible);
}
},
components: {
// ChatSideMenu
},
computed: {
...mapGetters(['sideMenuEnable', 'sideMenuAction']),
}
}
</script>
<style lang="stylus" src="@/sites/chat/assets/stylus/style/common"></style>
<style lang="stylus" scoped>
@import '../assets/stylus/shared/_mixin'
.menu-content
position: relative
height: 100%
background-color: #fff
.menu-user-wrap
position: relative
width: 100%
height: 30%
background: url(//static.codehuang.com/upload/images/bg.jpg) center / cover no-repeat
.user-info
padding px2rem(196px) px2rem(40px) 0
.avatar-wrap
position: relative
padding-left px2rem(110px)
img
position: absolute
left: 0
width: px2rem(80px)
height: px2rem(80px)
border 3px solid #fff
border-radius 50%
.user-name
color: #fff
font-size: px2rem(56px)
width: 100%
white-space nowrap
text-overflow ellipsis
overflow: hidden
line-height: 2
.qrcode
position: absolute
top: px2rem(40px)
right: px2rem(40px)
color: #ffffff
font-size: px2rem(56px)
.menu-item
display: block
line-height: px2rem(98px)
color: #232323
font-size: px2rem(34px)
padding-left px2rem(50px)
i
vertical-align px2rem(-4px)
font-size: px2rem(48px)
margin-right: px2rem(36px)
color: #5f6379
.menu-foot
position: absolute
bottom: px2rem(36px)
left: 0
right: 35%
font-size: 0
.menu-foot-button
display: inline-block
color: #232323
width: 50%
font-size: px2rem(28px)
text-align: center
.menu-weather
position: absolute
left: 74%
bottom: px2rem(36px)
text-align: center
.weather-temperature
font-size: px2rem(56px)
margin-bottom: px2rem(36px)
color: #12b7f5
span
vertical-align px2rem(10px)
font-weight: 100;
.weather-district
font-size: px2rem(28px)
</style>
from vue-drawer-layout.
谢谢 大神
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.