graceDrawer.nvue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view>
  3. <view class="grace-drawer-shade" v-if="show" @click.stop="closeDrawer" @touchmove.stop.prevent="" :style="{backgroundColor:background}"></view>
  4. <view ref="graceDrawerMenu" v-if="show" class="grace-drawer-nav" @tap.stop="stopFun"
  5. :style="{width:width+'rpx', left : direction == 'left' ? (width*-1)+'rpx' : 'none', top : top+'px',
  6. right : direction == 'right' ? (width*-1)+'rpx' : 'none',
  7. padding:padding, backgroundColor:slotBg}">
  8. <view class="grace-drawer-main"><slot name="links"></slot></view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. name: "graceDrawer",
  15. props: {
  16. width : {
  17. type : Number,
  18. default : 500
  19. },
  20. show : {
  21. type : Boolean,
  22. default : true
  23. },
  24. direction : {
  25. type : String,
  26. default : 'left'
  27. },
  28. background:{
  29. type : String,
  30. default : 'rgba(0, 0, 0, 0.5)'
  31. },
  32. slotBg:{
  33. type : String,
  34. default : 'rgba(255, 255, 255, 1)'
  35. },
  36. padding : {
  37. type : String,
  38. default : '30rpx'
  39. },
  40. top:{type:Number, value:0}
  41. },
  42. updated:function(){
  43. if(this.show){
  44. setTimeout(()=>{
  45. var moveX = this.direction == 'left' ? uni.upx2px(this.width) + 'px' : (uni.upx2px(this.width) * -1) + 'px';
  46. var animation = weex.requireModule('animation');
  47. animation.transition(this.$refs.graceDrawerMenu, {
  48. styles: {transform:'translate('+moveX+', 0)'},
  49. duration:200,
  50. timingFunction: 'linear',
  51. needLayout:false,
  52. delay: 0
  53. }, function (){}
  54. );
  55. }, 100);
  56. }
  57. },
  58. methods:{
  59. closeDrawer : function(){
  60. this.$emit('closeDrawer');
  61. },
  62. stopFun : function(){}
  63. }
  64. }
  65. </script>
  66. <style scoped>
  67. .grace-drawer-shade{position:fixed; width:750rpx; bottom:0; top:0; left:0; background-color:rgba(0, 0, 0, 0.5);}
  68. .grace-drawer-nav{background-color:#FFFFFF; position:fixed; bottom:0; top:0;}
  69. .grace-drawer-main{}
  70. </style>