docs(dropdown): use useMessage

src/dropdown/demos/enUS/basic.demo.md

@@ -11,9 +11,12 @@ Basic usage of dropdown
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
       options: [
         {
@@ -32,13 +35,11 @@ export default {
           label: 'The Beverly Hills Hotel, Los Angeles',
           key: 'the beverly hills hotel, los angeles'
         }
-      ]
-    }
-  },
-  methods: {
-    handleSelect (key) {
-      this.message.info(key)
+      ],
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/enUS/cascade.demo.md

@@ -14,7 +14,8 @@ Dropdown can be cascade.
 ```
 
 ```js
-import { h, resolveComponent } from 'vue'
+import { h, defineComponent } from 'vue'
+import { NIcon, useMessage } from 'naive-ui'
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
 
 const options = [
@@ -25,7 +26,7 @@ const options = [
   {
     label: 'Daisy Buchanan',
     icon () {
-      return h(resolveComponent('n-icon'), null, {
+      return h(NIcon, null, {
         default: () => h(CashIcon)
       })
     },
@@ -69,17 +70,15 @@ const options = [
   }
 ]
 
-export default {
-  inject: ['message'],
+export default defineComponent({
   data () {
+    const message = useMessage()
     return {
-      options
-    }
-  },
-  methods: {
-    handleSelect (name) {
-      this.message.info(name)
+      options,
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/enUS/manual-position.demo.md

@@ -20,6 +20,9 @@ For some special case, you may want to manually position the dropdown. For examp
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
 const options = [
   {
     label: 'Jay Gatsby',
@@ -67,33 +70,36 @@ const options = [
   }
 ]
 
-export default {
-  inject: ['message'],
-  methods: {
-    handleSelect (name) {
-      this.showDropdown = false
-      this.message.info(name)
-    },
-    handleBlur () {
-      this.showDropdown = false
-    },
-    handleContextMenu (e) {
-      e.preventDefault()
-      this.showDropdown = false
-      this.$nextTick().then(() => {
-        this.showDropdown = true
-        this.x = e.clientX
-        this.y = e.clientY
-      })
-    }
-  },
-  data () {
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+
+    const showDropdownRef = ref(false)
+    const xRef = ref(0)
+    const yRef = ref(0)
+
     return {
       options,
-      showDropdown: false,
-      x: 0,
-      y: 0
+      showDropdown: showDropdownRef,
+      x: xRef,
+      y: yRef,
+      handleSelect (key) {
+        showDropdownRef.value = false
+        message.info(key)
+      },
+      handleBlur () {
+        showDropdownRef.value = false
+      },
+      handleContextMenu (e) {
+        e.preventDefault()
+        showDropdownRef.value = false
+        nextTick().then(() => {
+          showDropdownRef.value = true
+          xRef.value = e.clientX
+          yRef.value = e.clientY
+        })
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/enUS/placement.demo.md

@@ -16,9 +16,12 @@ Use different placement.
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
       options: [
         {
@@ -37,13 +40,11 @@ export default {
           label: 'The Beverly Hills Hotel, Los Angeles',
           key: 'The Beverly Hills Hotel, Los Angeles'
         }
-      ]
-    }
-  },
-  methods: {
-    handleSelect (name) {
-      this.message.info(name)
+      ],
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/enUS/size.demo.md

@@ -44,6 +44,9 @@ Dropdown has different size.
 ```
 
 ```js
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
 const options = [
   {
     label: 'Jay Gatsby',
@@ -91,17 +94,15 @@ const options = [
   }
 ]
 
-export default {
-  inject: ['message'],
-  data () {
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      options
-    }
-  },
-  methods: {
-    handleSelect (name) {
-      this.message.info(name)
+      options,
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/enUS/trigger.demo.md

@@ -19,9 +19,13 @@ Different trigger of dropdown.
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    const showDropdownRef = ref(false)
     return {
       options: [
         {
@@ -41,16 +45,14 @@ export default {
           key: 'The Beverly Hills Hotel, Los Angeles'
         }
       ],
-      showDropdown: false
-    }
-  },
-  methods: {
-    handleSelect (name) {
-      this.message.info(name)
-    },
-    handleClick () {
-      this.showDropdown = !this.showDropdown
+      showDropdown: showDropdownRef,
+      handleSelect (key) {
+        message.info(key)
+      },
+      handleClick () {
+        showDropdownRef.value = !showDropdownRef.value
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/zhCN/basic.demo.md

@@ -9,9 +9,12 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
       options: [
         {
@@ -30,13 +33,11 @@ export default {
           label: '比佛利山庄酒店，洛杉矶',
           key: 'the beverly hills hotel, los angeles'
         }
-      ]
-    }
-  },
-  methods: {
-    handleSelect (key) {
-      this.message.info(key)
+      ],
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/zhCN/cascade.demo.md

@@ -14,7 +14,8 @@
 ```
 
 ```js
-import { h, resolveComponent } from 'vue'
+import { h, defineComponent } from 'vue'
+import { NIcon, useMessage } from 'naive-ui'
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
 
 const options = [
@@ -25,7 +26,7 @@ const options = [
   {
     label: '黛西·布坎南',
     icon () {
-      return h(resolveComponent('n-icon'), null, {
+      return h(NIcon, null, {
         default: () => h(CashIcon)
       })
     },
@@ -69,17 +70,15 @@ const options = [
   }
 ]
 
-export default {
-  inject: ['message'],
-  data () {
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      options
-    }
-  },
-  methods: {
-    handleSelect (key) {
-      this.message.info(key)
+      options,
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/zhCN/group-debug.demo.md

@@ -14,7 +14,8 @@
 ```
 
 ```js
-import { h, resolveComponent } from 'vue'
+import { h, defineComponent } from 'vue'
+import { NIcon, useMessage } from 'naive-ui'
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
 
 const options = [
@@ -30,7 +31,7 @@ const options = [
       {
         label: '黛西·布坎南',
         icon () {
-          return h(resolveComponent('n-icon'), null, {
+          return h(NIcon, null, {
             default: () => h(CashIcon)
           })
         },
@@ -76,17 +77,15 @@ const options = [
   }
 ]
 
-export default {
-  inject: ['message'],
-  data () {
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      options
-    }
-  },
-  methods: {
-    handleSelect (key) {
-      this.message.info(key)
+      options,
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/zhCN/manual-position.demo.md

@@ -20,6 +20,9 @@
 ```
 
 ```js
+import { defineComponent, ref, nextTick } from 'vue'
+import { useMessage } from 'naive-ui'
+
 const options = [
   {
     label: '杰·盖茨比',
@@ -67,33 +70,36 @@ const options = [
   }
 ]
 
-export default {
-  inject: ['message'],
-  methods: {
-    handleSelect (name) {
-      this.showDropdown = false
-      this.message.info(name)
-    },
-    handleBlur () {
-      this.showDropdown = false
-    },
-    handleContextMenu (e) {
-      e.preventDefault()
-      this.showDropdown = false
-      this.$nextTick().then(() => {
-        this.showDropdown = true
-        this.x = e.clientX
-        this.y = e.clientY
-      })
-    }
-  },
-  data () {
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+
+    const showDropdownRef = ref(false)
+    const xRef = ref(0)
+    const yRef = ref(0)
+
     return {
       options,
-      showDropdown: false,
-      x: 0,
-      y: 0
+      showDropdown: showDropdownRef,
+      x: xRef,
+      y: yRef,
+      handleSelect (key) {
+        showDropdownRef.value = false
+        message.info(key)
+      },
+      handleBlur () {
+        showDropdownRef.value = false
+      },
+      handleContextMenu (e) {
+        e.preventDefault()
+        showDropdownRef.value = false
+        nextTick().then(() => {
+          showDropdownRef.value = true
+          xRef.value = e.clientX
+          yRef.value = e.clientY
+        })
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/zhCN/placement.demo.md

@@ -14,9 +14,12 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
       options: [
         {
@@ -35,13 +38,11 @@ export default {
           label: '比佛利山庄酒店，洛杉矶',
           key: 'the beverly hills hotel, los angeles'
         }
-      ]
-    }
-  },
-  methods: {
-    handleSelect (key) {
-      this.message.info(key)
+      ],
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/zhCN/size.demo.md

@@ -42,6 +42,9 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
 const options = [
   {
     label: '杰·盖茨比',
@@ -89,17 +92,15 @@ const options = [
   }
 ]
 
-export default {
-  inject: ['message'],
-  data () {
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      options
-    }
-  },
-  methods: {
-    handleSelect (name) {
-      this.message.info(name)
+      options,
+      handleSelect (key) {
+        message.info(key)
+      }
     }
   }
-}
+})
 ```

src/dropdown/demos/zhCN/trigger.demo.md

@@ -19,9 +19,13 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    const showDropdownRef = ref(false)
     return {
       options: [
         {
@@ -41,16 +45,14 @@ export default {
           key: 'the beverly hills hotel, los angeles'
         }
       ],
-      showDropdown: false
-    }
-  },
-  methods: {
-    handleSelect (name) {
-      this.message.info(name)
-    },
-    handleClick () {
-      this.showDropdown = !this.showDropdown
+      showDropdown: showDropdownRef,
+      handleSelect (key) {
+        message.info(key)
+      },
+      handleClick () {
+        showDropdownRef.value = !showDropdownRef.value
+      }
     }
   }
-}
+})
 ```

vue3.md

@@ -452,6 +452,7 @@
   - [x] popover width
   - [ ] selection popover 滚动
   - [x] card 设定高度
+  - [ ] dropdown 手动定位有 bug，mousemoveoutside
 
 ## Build