graceBottomDialog.nvue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <view class="grace-btdialog-shade" v-if="show" @tap.stop="closeDialog" @touchmove.stop="stopFun" :style="{backgroundColor:background}">
  3. <view class="grace-btdialog-shade-dialog" @tap.stop="stopFun" :style="{borderTopLeftRadius:borderRadius,borderTopRightRadius:borderRadius}">
  4. <view class="title"><slot name="btns"></slot></view>
  5. <view class="content" @tap.stop="stopFun"><slot name="content"></slot></view>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. props: {
  12. show : {
  13. type : Boolean,
  14. default : false
  15. },
  16. background:{
  17. type : String,
  18. default : 'rgba(0, 0, 0, 0.5)'
  19. },
  20. borderRadius : {
  21. type : String,
  22. default : '0rpx'
  23. }
  24. },
  25. data() {
  26. return {}
  27. },
  28. methods:{
  29. closeDialog : function(){
  30. this.$emit('closeDialog');
  31. },
  32. stopFun : function(){}
  33. }
  34. }
  35. </script>
  36. <style scoped>
  37. .grace-btdialog-shade{position:fixed; width:750rpx; left:0; top:0; bottom:0; background-color:rgba(0, 0, 0, 0.5);}
  38. .grace-btdialog-shade-dialog{width:750rpx; background-color:#FFFFFF; position:absolute; bottom:0; left:0;}
  39. .grace-btdialog-shade-title{flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
  40. .grace-btdialog-shade-content{}
  41. </style>