vue 九宫格 组件不销毁 拖拽

如果你在Vue中使用九宫格组件，并且想要在拖拽完成后销毁它，你可以通过以下步骤实现：

1.创建一个data属性`showGrid`，并将其设置为true，以便在组件中显示九宫格。

2.使用`v-if`指令来控制组件的显示和隐藏，这样当你需要隐藏组件时，只需将`showGrid`属性设置为false即可。

3.为该组件添加拖拽事件，并在拖拽完成后将`showGrid`属性设置为false，以便销毁组件。

以下是一个示例代码：

<template>
  <div class="grid-container">
    <div v-if="showGrid" class="grid" draggable="true" @dragend="destroyGrid">
      <!-- 九宫格内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showGrid: true
    }
  },
  methods: {
    destroyGrid() {
      this.showGrid = false
    }
  }
}
</script>

<style>
.grid-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.grid {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

在以上示例中，当你拖拽九宫格组件并松开鼠标时，`dragend`事件会触发`destroyGrid`方法，该方法会将`showGrid`属性设置为false，以便隐藏组件并销毁它。