en-drawer.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view @touchmove.stop.prevent="moveHandle">
  3. <uni-drawer ref="drawer" :type="type" :width="drawerWidth" mask-background-color="rgba(0,0,0,0.4)">
  4. <slot name="drawerInfo">
  5. </slot>
  6. </uni-drawer>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. name: "en-drawer",
  12. components: {},
  13. props: {
  14. showTop:{
  15. type:Boolean,
  16. default:true
  17. },
  18. type:{
  19. type:String,
  20. default: 'left'
  21. },
  22. width:{
  23. type:Number,
  24. default: 0
  25. }
  26. },
  27. data() {
  28. return {
  29. drawerWidth:375
  30. }
  31. },
  32. watch: {},
  33. mounted() {
  34. console.log(uni.getSystemInfoSync().windowWidth)
  35. if(this.width>0){
  36. this.drawerWidth=this.width
  37. }else {
  38. // this.drawerWidth=this.width
  39. }
  40. },
  41. methods: {
  42. moveHandle() {
  43. return false
  44. },
  45. open(){
  46. this.$refs.drawer.open()
  47. },
  48. setTabBar(e){
  49. // console.log(e)
  50. // if(e.show){
  51. // uni.hideTabBar()
  52. // }else {
  53. // uni.showTabBar()
  54. // }
  55. },
  56. close(){
  57. this.$refs.drawer.close()
  58. }
  59. }
  60. }
  61. </script>
  62. <style scoped lang="scss">
  63. .popup-box{
  64. background: #FFFFFF;
  65. border-radius: 20rpx 20rpx 0 0;
  66. box-shadow: 0px -8px 20px 0px rgba(0,0,0,0.04);
  67. padding: 28rpx 32rpx 50rpx 32rpx;
  68. z-index: 100;
  69. .popup-title{
  70. .popup-close{
  71. margin: 0 auto;
  72. width: 82rpx;
  73. height: 10rpx;
  74. }
  75. }
  76. }
  77. </style>