bubbleWrap.vue 864 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <div>
  3. <template v-if="isMobile">
  4. <div class="bubble disabled" :class="{focus:showToolbar}" @contextmenu.prevent @touchstart="onTouchStartToolBtn" @touchend="onTouchEndToolBtn">
  5. <slot></slot>
  6. </div>
  7. </template>
  8. <template v-else>
  9. <div class="bubble" :class="{focus:showToolbar}" @contextmenu.prevent="onToolBtn">
  10. <slot></slot>
  11. </div>
  12. </template>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: 'bubbleWrap',
  18. props: {
  19. isMobile: Boolean,
  20. showToolbar: Boolean
  21. },
  22. methods: {
  23. onToolBtn (event) {
  24. this.$emit('onToolBtn', event)
  25. },
  26. onTouchStartToolBtn (event) {
  27. this.$emit('onTouchStartToolBtn', event)
  28. },
  29. onTouchEndToolBtn (event) {
  30. this.$emit('onTouchEndToolBtn', event)
  31. }
  32. }
  33. }
  34. </script>
  35. <style lang="scss" scoped>
  36. </style>