refactor: use setup refactor

src/views/components/draggable/index.vue

@@ -1,3 +1,51 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import draggable from "vuedraggable/src/vuedraggable";
+
+let gridLists = ref<Array<Object>>([
+  { grid: "cn", num: 1 },
+  { grid: "cn", num: 2 },
+  { grid: "cn", num: 3 },
+  { grid: "cn", num: 4 },
+  { grid: "cn", num: 5 },
+  { grid: "cn", num: 6 },
+  { grid: "cn", num: 7 },
+  { grid: "cn", num: 8 },
+  { grid: "cn", num: 9 }
+]);
+
+let lists = ref<Array<Object>>([
+  { people: "cn", id: 1, name: "www.itxst.com" },
+  { people: "cn", id: 2, name: "www.baidu.com" },
+  { people: "cn", id: 3, name: "www.taobao.com" },
+  { people: "cn", id: 4, name: "www.google.com" }
+]);
+
+let cutLists = ref<Array<Object>>([
+  { people: "cn", id: 1, name: "cut1" },
+  { people: "cn", id: 2, name: "cut2" },
+  { people: "cn", id: 3, name: "cut3" },
+  { people: "cn", id: 4, name: "cut4" }
+]);
+
+const change = (evt): void => {
+  console.log("evt: ", evt);
+};
+
+onMounted(() => {
+  // 使用原生sortable实现元素位置切换
+  // @ts-ignore
+  // eslint-disable-next-line no-undef
+  new Sortable(document.querySelector(".cut-container"), {
+    swap: true,
+    forceFallback: true,
+    chosenClass: "chosen",
+    swapClass: "highlight",
+    animation: 300
+  });
+});
+</script>
+
 <template>
   <div class="drag-container">
     <!-- grid列表拖拽 -->
@@ -72,64 +120,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import draggable from "vuedraggable/src/vuedraggable";
-import { reactive, toRefs, onMounted } from "vue";
-export default {
-  name: "reDraggable",
-  components: { draggable },
-  setup() {
-    const myArray = reactive({
-      gridLists: [
-        { grid: "cn", num: 1 },
-        { grid: "cn", num: 2 },
-        { grid: "cn", num: 3 },
-        { grid: "cn", num: 4 },
-        { grid: "cn", num: 5 },
-        { grid: "cn", num: 6 },
-        { grid: "cn", num: 7 },
-        { grid: "cn", num: 8 },
-        { grid: "cn", num: 9 }
-      ],
-      lists: [
-        { people: "cn", id: 1, name: "www.itxst.com" },
-        { people: "cn", id: 2, name: "www.baidu.com" },
-        { people: "cn", id: 3, name: "www.taobao.com" },
-        { people: "cn", id: 4, name: "www.google.com" }
-      ],
-      cutLists: [
-        { people: "cn", id: 1, name: "cut1" },
-        { people: "cn", id: 2, name: "cut2" },
-        { people: "cn", id: 3, name: "cut3" },
-        { people: "cn", id: 4, name: "cut4" }
-      ]
-    });
-
-    const change = (evt): void => {
-      console.log("evt: ", evt);
-    };
-
-    onMounted(() => {
-      // 使用原生sortable实现元素位置切换
-      // @ts-ignore
-      // eslint-disable-next-line no-undef
-      new Sortable(document.querySelector(".cut-container"), {
-        swap: true,
-        forceFallback: true,
-        chosenClass: "chosen",
-        swapClass: "highlight",
-        animation: 300
-      });
-    });
-
-    return {
-      ...toRefs(myArray),
-      change
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 /* grid列表拖拽 */
 .grid-container {