gpc-ui 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gpc-ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "二小UI",
   "private": false,
   "main": "lib/gpc-ui.umd.min.js",
@@ -29,6 +29,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.108.1",
+    "sass-loader": "^10.5.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

package/src/components/gpc-button/float-button.vue

@@ -0,0 +1,232 @@
+<!--
+ * @Author: 刘小二
+ * @Date: 2026-11-09 10:12:02
+ * @LastEditors: 刘小二
+ * @LastEditTime: 2026-11-09 10:12:06
+ * @Description: 悬浮按钮（拖拽优化·最终版）
+ * @FilePath: /gpc_ui/src/components/gpc-button/float-button.vue
+-->
+<template>
+  <div
+    class="float-button-area"
+    :style="{
+      bottom: bottom + 'px',
+      right: right + 'px'
+    }"
+    @mousedown="down"
+    @click="onClick"
+  >
+    <div
+      v-if="isTransition"
+      class="text-trans"
+      :class="{
+        'show-text': showText,
+        circle: isTransition
+      }"
+      @mouseenter.stop="enter"
+      @mouseleave.stop="leave"
+    >
+      <i class="el-icon-document" />
+      <span v-show="showText" class="m-l-5">{{ text }}</span>
+    </div>
+
+    <div v-else class="text">
+      <i class="el-icon-document" />
+      <span class="m-l-5" style="margin-left: 5px;">{{ text }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FloatButton',
+
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    isTransition: {
+      type: Boolean,
+      default: false
+    },
+    isDrag: {
+      type: Boolean,
+      default: false
+    },
+    offsetX: {
+      type: Number,
+      default: 20
+    },
+    offsetY: {
+      type: Number,
+      default: 20
+    },
+    defaultRight: {
+      type: Number,
+      default: 40
+    },
+    defaultBottom: {
+      type: Number,
+      default: 100
+    }
+  },
+
+  data() {
+    return {
+      showText: false,
+      bottom: 0,
+      right: 0,
+      isDown: false,
+      clickStart: 0,
+      el: null,
+      width: 0,
+      height: 0,
+      maxBottom: 0,
+      maxRight: 0,
+      isDragMoved: false
+    }
+  },
+
+  watch: {
+    defaultBottom: {
+      immediate: true,
+      handler(val) {
+        this.bottom = val
+      }
+    },
+    defaultRight: {
+      immediate: true,
+      handler(val) {
+        this.right = val
+      }
+    }
+  },
+
+  mounted() {},
+
+  beforeDestroy() {
+    this.removeDragEvents()
+  },
+
+  methods: {
+    enter() {
+      this.showText = true
+    },
+    leave() {
+      this.showText = false
+    },
+
+    initEl() {
+      if (!this.el) {
+        this.el = this.$el
+      }
+
+      this.width = this.el.offsetWidth
+      this.height = this.el.offsetHeight
+
+      this.maxBottom = window.innerHeight - this.height - this.offsetY
+      this.maxRight = window.innerWidth - this.width - this.offsetX
+    },
+
+    /** 鼠标按下 */
+    down(e) {
+      if (!this.isDrag) return
+
+      this.clickStart = Date.now()
+      this.isDown = true
+      this.isDragMoved = false
+
+      this.initEl()
+
+      document.addEventListener('mousemove', this.move)
+      document.addEventListener('mouseup', this.up)
+
+      e.preventDefault()
+    },
+
+    /** 拖拽中 */
+    move(e) {
+      if (!this.isDown) return
+
+      this.isDragMoved = true
+
+      const { clientX, clientY } = e
+
+      let bottom = window.innerHeight - clientY - this.height / 2
+      let right = window.innerWidth - clientX - this.width / 2
+
+      this.bottom = Math.min(Math.max(0, bottom), this.maxBottom)
+      this.right = Math.min(Math.max(0, right), this.maxRight)
+    },
+
+    /** 鼠标抬起 */
+    up() {
+      // ✅ 关键：拖拽结束后，如果移动过，直接废掉 clickStart
+      if (this.isDragMoved) {
+        this.clickStart = 0
+      }
+
+      this.removeDragEvents()
+    },
+
+    /** 移除拖拽事件 */
+    removeDragEvents() {
+      this.isDown = false
+      document.removeEventListener('mousemove', this.move)
+      document.removeEventListener('mouseup', this.up)
+    },
+
+    /** 点击事件 */
+    onClick() {
+      // ✅ 如果没有 clickStart，说明被拖拽废掉了
+      if (!this.clickStart) {
+        this.isDragMoved = false
+        return
+      }
+
+      const clickTime = Date.now() - this.clickStart
+
+      // ✅ 只有：短按 + 没移动 = 才触发
+      if (clickTime < 200 && !this.isDragMoved) {
+        this.$emit('goScan')
+      }
+
+      // ✅ 重置所有状态
+      this.clickStart = 0
+      this.isDragMoved = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.float-button-area {
+  position: fixed;
+  z-index: 20;
+  color: #fff;
+  background: linear-gradient(to bottom, #00b85c, #018a46);
+  border-radius: 20px;
+  padding: 6px;
+  cursor: pointer;
+  will-change: bottom, right;
+  transform: translateZ(0);
+
+  &.circle {
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  .text,
+  .text-trans {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+  }
+
+  i {
+    font-size: 16px;
+  }
+}
+</style>

package/src/components/index.js

@@ -1,9 +1,11 @@
-import gpcLogin from "./gpc-login/index.vue"
-import gpcTabs from "./gpc-tabs/Tabs.vue"
+import gpcFloatBtn from "./gpc-button/float-button.vue";
+import gpcLogin from "./gpc-login/index.vue";
+import gpcTabs from "./gpc-tabs/Tabs.vue";
 
 const components = {
     gpcLogin,
-    gpcTabs
+    gpcTabs,
+    gpcFloatBtn
 };
 
 function install(Vue) {