en-drawer.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <view >
  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. open(){
  43. this.$refs.drawer.open()
  44. },
  45. setTabBar(e){
  46. // console.log(e)
  47. // if(e.show){
  48. // uni.hideTabBar()
  49. // }else {
  50. // uni.showTabBar()
  51. // }
  52. },
  53. close(){
  54. this.$refs.drawer.close()
  55. }
  56. }
  57. }
  58. </script>
  59. <style scoped lang="scss">
  60. .popup-box{
  61. background: #FFFFFF;
  62. border-radius: 20rpx 20rpx 0 0;
  63. box-shadow: 0px -8px 20px 0px rgba(0,0,0,0.04);
  64. padding: 28rpx 32rpx 50rpx 32rpx;
  65. z-index: 100;
  66. .popup-title{
  67. .popup-close{
  68. margin: 0 auto;
  69. width: 82rpx;
  70. height: 10rpx;
  71. }
  72. }
  73. }
  74. </style>