gracePopupMenu.nvue 1.5 KB

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