feat: 双击数据行空白区域，打开detail

NMTuan · Jul 14, 2023 · d35330a · d35330a
1 parent db9362c
commit d35330a
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/pages/manager/[...key].vue b/pages/manager/[...key].vue
@@ -28,7 +28,7 @@
                         :width="width" :height="height">
                         <template #cell="{ column, columns, columnIndex, depth, style, rowData, rowIndex }">
                             <div class="flex items-center flex-1 h-full text-sm overflow-hidden px-2"
-                                @click="handlerCellClick({ rowIndex })">
+                                @click="handlerCellClick({ rowIndex })" @dblclick="handlerCellDblclick()">
                                 <div class="truncate">{{ rowData[column.title] }}</div>
                             </div>
                         </template>
@@ -113,6 +113,15 @@ const handlerCellClick = ({ rowIndex }) => {
     currentRowIndex.value = rowIndex
 }
 
+// 单元格的双击事件 
+const handlerCellDblclick = () => {
+    // 如果未选择内容，则打开详情
+    const selected = window.getSelection().toString()
+    if (selected.trim() === '') {
+        detailVisible.value = true
+    }
+}
+
 // 处理row的样式
 const handlerRowClass = ({ rowIndex }) => {
     if (currentRowIndex.value === rowIndex) {