refactor: dropdown use script setup

wxsms · wxsms · commit e715aafab75a · 2021-11-23T09:55:22.000+08:00
diff --git a/docs/.vitepress/components/dropdown/advanced.vue b/docs/.vitepress/components/dropdown/advanced.vue
@@ -36,17 +36,26 @@
   </section>
 </template>
 <script>
+import { onMounted, ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+    const dropdown = ref(null);
+    const ele = ref([]);
+    const selected = ref([]);
+
+    onMounted(() => {
+      ele.value.push(dropdown.value.$el);
+    });
+
     return {
-      show: false,
-      ele: [],
-      selected: [],
+      ele,
+      dropdown,
+      show,
+      selected,
     };
   },
-  mounted() {
-    this.ele.push(this.$refs.dropdown.$el);
-  },
 };
 </script>
 <style>
diff --git a/src/__test__/utils.js b/src/__test__/utils.js
@@ -100,3 +100,12 @@ export const triggerKey = (el, key, type = 'down') => {
     el.dispatchEvent(eventObj);
   }
 };
+
+export function windowClick(target) {
+  let e = new Event('click');
+  Object.defineProperty(e, 'target', {
+    writable: false,
+    value: target,
+  });
+  window.dispatchEvent(e);
+}
diff --git a/src/components/dropdown/Dropdown.spec.js b/src/components/dropdown/Dropdown.spec.js
@@ -1,4 +1,9 @@
-import { createWrapper, nextTick, triggerEvent } from '../../__test__/utils';
+import {
+  createWrapper,
+  nextTick,
+  triggerEvent,
+  windowClick,
+} from '../../__test__/utils';
 import Dropdown from './Dropdown';
 
 function appendToBodyVm() {
@@ -176,8 +181,7 @@ describe('Dropdown', () => {
     expect(dropdown.classes()).not.toContain('open');
     await triggerEvent(trigger, 'click');
     expect(dropdown.classes()).toContain('open');
-    // Simulate a window click
-    wrapper.vm.$refs.dropdown.windowClicked({ target: document.body });
+    windowClick(document.body);
     await nextTick();
     expect(dropdown.classes()).not.toContain('open');
   });
@@ -207,18 +211,15 @@ describe('Dropdown', () => {
     const dropdown = wrapper;
     expect(dropdown.element.tagName.toLowerCase()).toEqual('div');
     expect(dropdown.classes()).toContain('open');
-    // Simulate a window click
-    wrapper.vm.$refs.test.windowClicked({ target: wrapper.vm.$refs.li1 });
+    windowClick(wrapper.vm.$refs.li1);
     await nextTick();
     expect(dropdown.classes()).toContain('open');
-    // Simulate a window click
-    wrapper.vm.$refs.test.windowClicked({ target: document.body });
+    windowClick(document.body);
     await nextTick();
     expect(dropdown.classes()).not.toContain('open');
     wrapper.vm.show = true;
     await nextTick();
-    // Simulate a window click
-    wrapper.vm.$refs.test.windowClicked({ target: wrapper.vm.$refs.li2 });
+    windowClick(wrapper.vm.$refs.li2);
     await nextTick();
     expect(dropdown.classes()).not.toContain('open');
   });
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
