n20-project-component 1.0.3 → 1.0.6

package/src/components/N20FloatingToolbar/index.vue

@@ -1,318 +1,318 @@
-<template>
-  <div
-    class="n20-floating-toolbar-wrapper"
-    ref="wrapper"
-    @mouseup="handleMouseUp"
-  >
-    <!-- 包裹的内容区域 -->
-    <slot></slot>
-
-    <!-- 浮现工具条 -->
-    <transition name="n20-toolbar-fade">
-      <div
-        v-if="visible"
-        ref="toolbar"
-        class="n20-floating-toolbar"
-        :style="toolbarStyle"
-        @mousedown.prevent
-      >
-        <div class="n20-floating-toolbar__arrow"></div>
-        <div class="n20-floating-toolbar__body">
-          <button
-            v-for="(btn, idx) in actions"
-            :key="idx"
-            class="n20-floating-toolbar__btn"
-            :title="btn.label"
-            @click.stop="handleAction(btn, idx)"
-          >
-            <i v-if="btn.icon" :class="btn.icon"></i>
-            <span v-if="btn.label && showLabel">{{ btn.label }}</span>
-          </button>
-          <!-- 允许通过 slot 自定义工具栏内容 -->
-          <slot name="toolbar" :selectedText="selectedText"></slot>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-/**
- * N20FloatingToolbar — 选中浮现工具栏
- *
- * 包裹内容区域，用户选中文字后在选区上方浮现操作按钮条。
- * 鼠标拖选文字松开后，选区上方浮现深色工具条，
- * 点击按钮触发事件，点其他地方消失。
- *
- * @example
- * <N20FloatingToolbar
- *   :actions="[
- *     { label: '复制', icon: 'el-icon-document-copy' },
- *     { label: '搜索', icon: 'el-icon-search' },
- *     { label: '高亮', icon: 'el-icon-edit' },
- *   ]"
- *   @action="handleToolbarAction"
- * >
- *   <p>这里是一段可以被选中的文本内容...</p>
- * </N20FloatingToolbar>
- */
-export default {
-  name: 'N20FloatingToolbar',
-  props: {
-    /**
-     * 工具栏按钮列表
-     * 每项 { label: string, icon?: string, command?: string }
-     */
-    actions: {
-      type: Array,
-      default: () => [
-        { label: '复制', icon: 'el-icon-document-copy', command: 'copy' },
-        { label: '搜索', icon: 'el-icon-search', command: 'search' },
-        { label: '高亮', icon: 'el-icon-edit', command: 'highlight' },
-      ]
-    },
-    /** 是否在按钮中显示文字标签 */
-    showLabel: {
-      type: Boolean,
-      default: true
-    },
-    /** 工具栏与选区的垂直间距（px） */
-    offset: {
-      type: Number,
-      default: 8
-    },
-    /** 是否禁用 */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /** 选中最少字符数才触发 */
-    minLength: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      selectedText: '',
-      toolbarStyle: {
-        top: '0px',
-        left: '0px'
-      }
-    }
-  },
-  mounted() {
-    // 监听全局点击 → 隐藏工具栏
-    this._onDocClick = (e) => {
-      if (this.visible && this.$refs.toolbar && !this.$refs.toolbar.contains(e.target)) {
-        this.hide()
-      }
-    }
-    // 监听滚动 → 隐藏工具栏
-    this._onScroll = () => {
-      if (this.visible) {
-        this.hide()
-      }
-    }
-    document.addEventListener('mousedown', this._onDocClick, true)
-    window.addEventListener('scroll', this._onScroll, true)
-  },
-  beforeDestroy() {
-    document.removeEventListener('mousedown', this._onDocClick, true)
-    window.removeEventListener('scroll', this._onScroll, true)
-  },
-  methods: {
-    /** 鼠标松开时判断是否有选区 */
-    handleMouseUp() {
-      if (this.disabled) return
-
-      // 延迟一帧让浏览器完成选区更新
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.checkSelection()
-        }, 0)
-      })
-    },
-
-    /** 检测当前选区 */
-    checkSelection() {
-      const selection = window.getSelection()
-      if (!selection || selection.isCollapsed || !selection.toString().trim()) {
-        this.hide()
-        return
-      }
-
-      const text = selection.toString().trim()
-      if (text.length < this.minLength) {
-        this.hide()
-        return
-      }
-
-      // 确保选区在 wrapper 内
-      const wrapper = this.$refs.wrapper
-      if (!wrapper) return
-
-      const range = selection.getRangeAt(0)
-      if (!wrapper.contains(range.commonAncestorContainer)) {
-        this.hide()
-        return
-      }
-
-      this.selectedText = text
-      this.positionToolbar(range)
-      this.visible = true
-    },
-
-    /** 根据选区 Range 定位工具栏 */
-    positionToolbar(range) {
-      const rect = range.getBoundingClientRect()
-      const wrapperRect = this.$refs.wrapper.getBoundingClientRect()
-
-      // 工具栏居中于选区上方
-      const left = rect.left + rect.width / 2 - wrapperRect.left
-      const top = rect.top - wrapperRect.top - this.offset
-
-      this.toolbarStyle = {
-        left: `${left}px`,
-        top: `${top}px`
-      }
-    },
-
-    /** 点击按钮 */
-    handleAction(btn, idx) {
-      this.$emit('action', {
-        command: btn.command || btn.label,
-        label: btn.label,
-        index: idx,
-        text: this.selectedText,
-      })
-
-      // 内置 copy 行为
-      if (btn.command === 'copy') {
-        this.doCopy(this.selectedText)
-      }
-
-      this.hide()
-    },
-
-    /** 复制文本到剪贴板 */
-    async doCopy(text) {
-      try {
-        if (navigator.clipboard && window.isSecureContext) {
-          await navigator.clipboard.writeText(text)
-        } else {
-          const textarea = document.createElement('textarea')
-          textarea.value = text
-          textarea.style.position = 'fixed'
-          textarea.style.left = '-9999px'
-          document.body.appendChild(textarea)
-          textarea.select()
-          document.execCommand('copy')
-          document.body.removeChild(textarea)
-        }
-        this.$message && this.$message.success('已复制')
-      } catch (err) {
-        this.$message && this.$message.error('复制失败')
-      }
-    },
-
-    /** 隐藏工具栏 */
-    hide() {
-      this.visible = false
-      this.selectedText = ''
-    },
-
-    /** 外部可调用：手动显示 */
-    show() {
-      this.checkSelection()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.n20-floating-toolbar-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.n20-floating-toolbar {
-  position: absolute;
-  z-index: 9999;
-  transform: translateX(-50%) translateY(-100%);
-  pointer-events: auto;
-
-  // 箭头
-  &__arrow {
-    position: absolute;
-    left: 50%;
-    bottom: -5px;
-    transform: translateX(-50%) rotate(45deg);
-    width: 10px;
-    height: 10px;
-    background: #1f2937;
-    border-radius: 0 0 2px 0;
-  }
-
-  // 主体
-  &__body {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    padding: 4px 6px;
-    background: #1f2937;
-    border-radius: 6px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
-    white-space: nowrap;
-  }
-
-  // 按钮
-  &__btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 5px 10px;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: #e5e7eb;
-    font-size: 13px;
-    line-height: 1;
-    cursor: pointer;
-    transition: background 0.15s ease, color 0.15s ease;
-    outline: none;
-
-    i {
-      font-size: 14px;
-    }
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.12);
-      color: #fff;
-    }
-
-    &:active {
-      background: rgba(255, 255, 255, 0.18);
-    }
-
-    & + & {
-      margin-left: 1px;
-    }
-  }
-}
-
-// 出现动画
-.n20-toolbar-fade-enter-active {
-  transition: opacity 0.18s ease, transform 0.18s ease;
-}
-.n20-toolbar-fade-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-.n20-toolbar-fade-enter,
-.n20-toolbar-fade-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) translateY(-100%) scale(0.92);
-}
-</style>
+<template>
+  <div
+    class="n20-floating-toolbar-wrapper"
+    ref="wrapper"
+    @mouseup="handleMouseUp"
+  >
+    <!-- 包裹的内容区域 -->
+    <slot></slot>
+
+    <!-- 浮现工具条 -->
+    <transition name="n20-toolbar-fade">
+      <div
+        v-if="visible"
+        ref="toolbar"
+        class="n20-floating-toolbar"
+        :style="toolbarStyle"
+        @mousedown.prevent
+      >
+        <div class="n20-floating-toolbar__arrow"></div>
+        <div class="n20-floating-toolbar__body">
+          <button
+            v-for="(btn, idx) in actions"
+            :key="idx"
+            class="n20-floating-toolbar__btn"
+            :title="btn.label"
+            @click.stop="handleAction(btn, idx)"
+          >
+            <i v-if="btn.icon" :class="btn.icon"></i>
+            <span v-if="btn.label && showLabel">{{ btn.label }}</span>
+          </button>
+          <!-- 允许通过 slot 自定义工具栏内容 -->
+          <slot name="toolbar" :selectedText="selectedText"></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+/**
+ * N20FloatingToolbar — 选中浮现工具栏
+ *
+ * 包裹内容区域，用户选中文字后在选区上方浮现操作按钮条。
+ * 鼠标拖选文字松开后，选区上方浮现深色工具条，
+ * 点击按钮触发事件，点其他地方消失。
+ *
+ * @example
+ * <N20FloatingToolbar
+ *   :actions="[
+ *     { label: '复制', icon: 'el-icon-document-copy' },
+ *     { label: '搜索', icon: 'el-icon-search' },
+ *     { label: '高亮', icon: 'el-icon-edit' },
+ *   ]"
+ *   @action="handleToolbarAction"
+ * >
+ *   <p>这里是一段可以被选中的文本内容...</p>
+ * </N20FloatingToolbar>
+ */
+export default {
+  name: 'N20FloatingToolbar',
+  props: {
+    /**
+     * 工具栏按钮列表
+     * 每项 { label: string, icon?: string, command?: string }
+     */
+    actions: {
+      type: Array,
+      default: () => [
+        { label: '复制', icon: 'el-icon-document-copy', command: 'copy' },
+        { label: '搜索', icon: 'el-icon-search', command: 'search' },
+        { label: '高亮', icon: 'el-icon-edit', command: 'highlight' },
+      ]
+    },
+    /** 是否在按钮中显示文字标签 */
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    /** 工具栏与选区的垂直间距（px） */
+    offset: {
+      type: Number,
+      default: 8
+    },
+    /** 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 选中最少字符数才触发 */
+    minLength: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      selectedText: '',
+      toolbarStyle: {
+        top: '0px',
+        left: '0px'
+      }
+    }
+  },
+  mounted() {
+    // 监听全局点击 → 隐藏工具栏
+    this._onDocClick = (e) => {
+      if (this.visible && this.$refs.toolbar && !this.$refs.toolbar.contains(e.target)) {
+        this.hide()
+      }
+    }
+    // 监听滚动 → 隐藏工具栏
+    this._onScroll = () => {
+      if (this.visible) {
+        this.hide()
+      }
+    }
+    document.addEventListener('mousedown', this._onDocClick, true)
+    window.addEventListener('scroll', this._onScroll, true)
+  },
+  beforeDestroy() {
+    document.removeEventListener('mousedown', this._onDocClick, true)
+    window.removeEventListener('scroll', this._onScroll, true)
+  },
+  methods: {
+    /** 鼠标松开时判断是否有选区 */
+    handleMouseUp() {
+      if (this.disabled) return
+
+      // 延迟一帧让浏览器完成选区更新
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.checkSelection()
+        }, 0)
+      })
+    },
+
+    /** 检测当前选区 */
+    checkSelection() {
+      const selection = window.getSelection()
+      if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+        this.hide()
+        return
+      }
+
+      const text = selection.toString().trim()
+      if (text.length < this.minLength) {
+        this.hide()
+        return
+      }
+
+      // 确保选区在 wrapper 内
+      const wrapper = this.$refs.wrapper
+      if (!wrapper) return
+
+      const range = selection.getRangeAt(0)
+      if (!wrapper.contains(range.commonAncestorContainer)) {
+        this.hide()
+        return
+      }
+
+      this.selectedText = text
+      this.positionToolbar(range)
+      this.visible = true
+    },
+
+    /** 根据选区 Range 定位工具栏 */
+    positionToolbar(range) {
+      const rect = range.getBoundingClientRect()
+      const wrapperRect = this.$refs.wrapper.getBoundingClientRect()
+
+      // 工具栏居中于选区上方
+      const left = rect.left + rect.width / 2 - wrapperRect.left
+      const top = rect.top - wrapperRect.top - this.offset
+
+      this.toolbarStyle = {
+        left: `${left}px`,
+        top: `${top}px`
+      }
+    },
+
+    /** 点击按钮 */
+    handleAction(btn, idx) {
+      this.$emit('action', {
+        command: btn.command || btn.label,
+        label: btn.label,
+        index: idx,
+        text: this.selectedText,
+      })
+
+      // 内置 copy 行为
+      if (btn.command === 'copy') {
+        this.doCopy(this.selectedText)
+      }
+
+      this.hide()
+    },
+
+    /** 复制文本到剪贴板 */
+    async doCopy(text) {
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(text)
+        } else {
+          const textarea = document.createElement('textarea')
+          textarea.value = text
+          textarea.style.position = 'fixed'
+          textarea.style.left = '-9999px'
+          document.body.appendChild(textarea)
+          textarea.select()
+          document.execCommand('copy')
+          document.body.removeChild(textarea)
+        }
+        this.$message && this.$message.success('已复制')
+      } catch (err) {
+        this.$message && this.$message.error('复制失败')
+      }
+    },
+
+    /** 隐藏工具栏 */
+    hide() {
+      this.visible = false
+      this.selectedText = ''
+    },
+
+    /** 外部可调用：手动显示 */
+    show() {
+      this.checkSelection()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n20-floating-toolbar-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.n20-floating-toolbar {
+  position: absolute;
+  z-index: 9999;
+  transform: translateX(-50%) translateY(-100%);
+  pointer-events: auto;
+
+  // 箭头
+  &__arrow {
+    position: absolute;
+    left: 50%;
+    bottom: -5px;
+    transform: translateX(-50%) rotate(45deg);
+    width: 10px;
+    height: 10px;
+    background: #1f2937;
+    border-radius: 0 0 2px 0;
+  }
+
+  // 主体
+  &__body {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px 6px;
+    background: #1f2937;
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
+    white-space: nowrap;
+  }
+
+  // 按钮
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: #e5e7eb;
+    font-size: 13px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+    outline: none;
+
+    i {
+      font-size: 14px;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.12);
+      color: #fff;
+    }
+
+    &:active {
+      background: rgba(255, 255, 255, 0.18);
+    }
+
+    & + & {
+      margin-left: 1px;
+    }
+  }
+}
+
+// 出现动画
+.n20-toolbar-fade-enter-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.n20-toolbar-fade-leave-active {
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.n20-toolbar-fade-enter,
+.n20-toolbar-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-100%) scale(0.92);
+}
+</style>