graceNvuePopupMenu.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template name="gracePopupMenu">
  2. <view>
  3. <view
  4. class="grace-popup-mask" v-if="show" @tap.stop="hideMenu" @touchmove.stop=""
  5. :style="{backgroundColor:background}">
  6. <view class="grace-popup-menu" v-if="show"
  7. :style="{top:top+'px', right:right, backgroundColor:bgColor, width:menuWidth, borderRadius:borderRadius}">
  8. <slot></slot>
  9. </view>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. name: "gracePopupMenu",
  16. props: {
  17. show:{
  18. type : Boolean,
  19. default : false
  20. },
  21. top:{
  22. type : Number,
  23. default : 0
  24. },
  25. bgColor:{
  26. type : String,
  27. default :'#FFFFFF'
  28. },
  29. menuWidth :{
  30. type : String,
  31. default : '258rpx'
  32. },
  33. background : {
  34. type : String,
  35. default : 'rgba(0,0,0, 0.3)'
  36. },
  37. right:{
  38. type : String,
  39. default:'0rpx'
  40. },
  41. borderRadius:{
  42. type : String,
  43. default:'0rpx'
  44. }
  45. },
  46. methods: {
  47. hideMenu : function() {
  48. this.$emit('hideMenu');
  49. }
  50. },
  51. }
  52. </script>
  53. <style scoped>
  54. .grace-popup-menu{background-color:#FFFFFF; width:258rpx; padding:10rpx; right:0px; top:0px; position:absolute;}
  55. .grace-popup-mask{background-color:rgba(0,0,0, 0.3); width:750rpx; position:fixed; left:0; top:0; bottom:0;}
  56. </style>