graceShade.vue 656 B

12345678910111213141516171819202122
  1. <template>
  2. <view class="grace-shade" :style="{zIndex:zIndex, background:background}" v-if="show" @tap.stop="closeShade" @touchmove.stop="">
  3. <slot></slot>
  4. </view>
  5. </template>
  6. <script>
  7. export default{
  8. props:{
  9. background : {type:String, default:"rgba(0, 0, 0, 0.1)"},
  10. zIndex : {type:Number, default:1},
  11. show : {type:Boolean, default:true}
  12. },
  13. methods:{
  14. closeShade : function(){
  15. this.$emit('closeShade');
  16. }
  17. }
  18. }
  19. </script>
  20. <style scoped>
  21. .grace-shade{position:fixed; width:100%; height:100%; left:0; top:0; bottom:0; z-index:1; background:rgba(255, 255, 255, 1); display:flex; justify-content:center; align-items:center;}
  22. </style>