vue-draggable-resizable选中状态保持

Question

vue-draggable-resizable 搭配vue2 如何选中状态保持 我选中组件后 点击右侧编辑栏区域 依旧保持它选中状态 点击其他非组件区域取消选中

Answer 1

引自免费微信小程序：皆我百晓生

在Vue.js项目中使用vue-draggable-resizable组件并希望实现选中状态保持的功能，即选中一个组件后，点击右侧编辑栏区域时仍保持其选中状态，而点击其他非组件区域时取消选中，可以按照以下步骤进行配置和编码：

1. 设置全局/局部状态管理： 创建一个Vue实例的数据属性（如selectedComponentId）来存储当前选中的组件ID。这样可以方便地在组件间共享和更新选中状态。

   // 在您的Vue实例（例如App.vue）中添加如下数据属性
   data() {
     return {
       selectedComponentId: null,
     };
   }
   

2. 给组件添加唯一标识： 给每个vue-draggable-resizable组件添加一个唯一的标识（如componentId），以便与selectedComponentId进行匹配。

   <vue-draggable-resizable
     :componentId="uniqueComponentId"
     ...
   ></vue-draggable-resizable>
   

   其中，uniqueComponentId是您为每个组件生成的唯一ID。

3. 处理点击事件： 为vue-draggable-resizable组件添加@click事件监听器，当点击组件时，将其ID赋值给selectedComponentId。

   <vue-draggable-resizable
     :componentId="uniqueComponentId"
     @click="onComponentClick(uniqueComponentId)"
     ...
   ></vue-draggable-resizable>
   
   <div class="edit-panel" @click="onEditPanelClick"></div>
   
   <!-- 在methods中定义事件处理函数 -->
   methods: {
     onComponentClick(componentId) {
       this.selectedComponentId = componentId;
     },
     onEditPanelClick() {
       // 当点击编辑面板时，不做任何操作，维持选中状态
     },
   },
   

4. 处理非组件区域点击事件： 在包含所有组件的最外层容器（或页面根元素）上添加一个点击事件监听器，用于清除selectedComponentId，从而取消选中状态。同时，需确保这个监听器不会覆盖到组件自身的点击事件。

   <div class="workspace" @click="onWorkspaceClick">
     <!-- vue-draggable-resizable 组件和其他组件放在这里 -->
   </div>
   
   <!-- 在methods中定义事件处理函数 -->
   methods: {
     ...,
     onWorkspaceClick(event) {
       // 阻止事件冒泡，防止触发子组件的click事件
       event.stopPropagation();
   
       // 获取点击目标是否为组件
       const isComponentClicked = event.target.closest('.draggable-resizable-component');
   
       if (!isComponentClicked) {
         this.selectedComponentId = null; // 清除选中状态
       }
     },
   },
   

5. 根据选中状态应用样式： 根据selectedComponentId与componentId的匹配情况，为选中的vue-draggable-resizable组件添加相应的选中样式。

   <vue-draggable-resizable
     :componentId="uniqueComponentId"
     :class="{ 'selected': uniqueComponentId === selectedComponentId }"
     ...
   ></vue-draggable-resizable>
   
   <!-- 在CSS中定义选中样式 -->
   .selected {
     border-color: #007BFF;
     box-shadow: 0 0 0 2px rgba(0, 123, 255, 0..png);
     /* 其他选中样式 */
   }
   

按照以上步骤，您的vue-draggable-resizable组件搭配Vue2项目将实现选中状态保持功能：选中一个组件后，点击右侧编辑栏区域时仍保持其选中状态；点击其他非组件区域时取消选中。