graceNvueShade.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <view class="grace-shade" ref="graceShade"
  3. :style="{backgroundColor:background, left:left}"
  4. @tap.stop="closeShade" @touchmove.stop.prevent="">
  5. <slot></slot>
  6. </view>
  7. </template>
  8. <script>
  9. var animation = weex.requireModule('animation');
  10. const dom = weex.requireModule('dom');
  11. export default{
  12. props:{
  13. background : {type:String, default:"rgba(0, 0, 0, 0.1)"},
  14. zIndex : {type:Number, default:1},
  15. show : {type:Boolean, default:true}
  16. },
  17. data() {
  18. return {
  19. left : '-2000px'
  20. }
  21. },
  22. created:function(){
  23. if(this.show){ this.showIt(); }else{ this.hideIt();}
  24. },
  25. watch:{
  26. show:function(val){
  27. if(val){ this.showIt(); }else{ this.hideIt(); }
  28. }
  29. },
  30. methods:{
  31. closeShade : function(){this.$emit('closeShade');},
  32. showIt : function(){
  33. this.left = '0px';
  34. var graceShade = this.$refs.graceShade;
  35. animation.transition(graceShade, {
  36. styles: {opacity:1},
  37. duration:280,
  38. timingFunction: 'ease',
  39. needLayout:false,
  40. delay: 0
  41. });
  42. },
  43. hideIt : function(){
  44. var graceShade = this.$refs.graceShade;
  45. animation.transition(graceShade, {
  46. styles: {opacity:0},
  47. duration:280,
  48. timingFunction: 'ease',
  49. needLayout:false,
  50. delay: 0
  51. });
  52. setTimeout(()=>{
  53. this.left = '0px';
  54. }, 280);
  55. }
  56. }
  57. }
  58. </script>
  59. <style scoped>
  60. .grace-shade{position:fixed; width:750rpx; left:-2000px; opacity:0; top:0; bottom:0; z-index:1; justify-content:center; align-items:center;}
  61. </style>