drag-button.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <view>
  3. <view
  4. id="_drag_button"
  5. class="drag"
  6. :style="'left: ' + left + 'px; top:' + top + 'px;'"
  7. @touchstart="touchstart"
  8. @touchmove.stop.prevent="touchmove"
  9. @touchend="touchend"
  10. @click.stop.prevent="click"
  11. :class="{transition: isDock && !isMove }"
  12. >
  13. <!-- <text>{{ text }}</text> -->
  14. <view>
  15. <u-badge absolute :offset="[15,10]" type="error" :count="badge"></u-badge>
  16. <u-image width="70rpx" height="70rpx" :src="dragPic"></u-image>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'drag-button',
  24. props: {
  25. isDock:{ // 是否启用自动停靠
  26. type: Boolean,
  27. default: false
  28. },
  29. existTabBar:{ // 当前页面是否包含tabbar
  30. type: Boolean,
  31. default: false
  32. },
  33. dragPic: { // 图标显示时,图标链接
  34. type: String,
  35. default: ''
  36. },
  37. badge: { // 图标显示时,角标数字
  38. type: [Number, String],
  39. default: ''
  40. }
  41. },
  42. data() {
  43. return {
  44. top:0,
  45. left:0,
  46. width: 0,
  47. height: 0,
  48. offsetWidth: 0,
  49. offsetHeight: 0,
  50. windowWidth: 0,
  51. windowHeight: 0,
  52. isMove: true,
  53. edge: 10,
  54. text: '按钮'
  55. }
  56. },
  57. mounted() {
  58. const sys = uni.getSystemInfoSync();
  59. this.windowWidth = sys.windowWidth;
  60. this.windowHeight = sys.windowHeight;
  61. // #ifdef APP-PLUS
  62. this.existTabBar && (this.windowHeight -= 50);
  63. // #endif
  64. if (sys.windowTop) {
  65. this.windowHeight += sys.windowTop;
  66. }
  67. console.log(sys)
  68. const query = uni.createSelectorQuery().in(this);
  69. query.select('#_drag_button').boundingClientRect(data => {
  70. // console.log(data,'--------data')
  71. this.width = data.width;
  72. this.height = data.height;
  73. this.offsetWidth = data.width / 2;
  74. this.offsetHeight = data.height / 2;
  75. this.left = this.windowWidth - this.width - this.edge;
  76. // this.top = this.windowHeight - this.height - this.edge;
  77. this.top = this.windowHeight * 0.65;
  78. }).exec();
  79. },
  80. methods: {
  81. click() {
  82. this.$emit('btnClick');
  83. },
  84. touchstart(e) {
  85. this.$emit('btnTouchstart');
  86. },
  87. touchmove(e) {
  88. // 单指触摸
  89. if (e.touches.length !== 1) {
  90. return false;
  91. }
  92. this.isMove = true;
  93. this.left = e.touches[0].clientX - this.offsetWidth;
  94. let clientY = e.touches[0].clientY - this.offsetHeight;
  95. // #ifdef H5
  96. clientY += this.height;
  97. // #endif
  98. let edgeBottom = this.windowHeight - this.height - this.edge;
  99. // 上下触及边界
  100. if (clientY < this.edge) {
  101. this.top = this.edge;
  102. } else if (clientY > edgeBottom) {
  103. this.top = edgeBottom;
  104. } else {
  105. this.top = clientY
  106. }
  107. },
  108. touchend(e) {
  109. if (this.isDock) {
  110. let edgeRigth = this.windowWidth - this.width - this.edge;
  111. if (this.left < this.windowWidth / 2 - this.offsetWidth) {
  112. this.left = this.edge;
  113. } else {
  114. this.left = edgeRigth;
  115. }
  116. }
  117. this.isMove = false;
  118. this.$emit('btnTouchend');
  119. },
  120. }}
  121. </script>
  122. <style lang="scss">
  123. .drag {
  124. display: flex;
  125. justify-content: center;
  126. align-items: center;
  127. // background-color: rgba(0, 0, 0, 0.5);
  128. background-color: #fff;
  129. box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
  130. color: $uni-text-color-inverse;
  131. width: 80upx;
  132. height: 80upx;
  133. border-radius: 50%;
  134. font-size: $uni-font-size-sm;
  135. position: fixed;
  136. z-index: 999999;
  137. &.transition {
  138. transition: left .3s ease,top .3s ease;
  139. }
  140. }
  141. </style>