docs(message): use composition api (#969)

* docs(message): 将信息组件的示例更改为composition api

* docs(message): 修改return中的函数形式

* Apply suggestions from code review

* Update src/message/demos/enUS/about-theme.demo.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

src/message/demos/enUS/about-theme.demo.md

@@ -9,9 +9,10 @@ If you don't specified the theme, the theme of created message will be the same
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -23,5 +24,5 @@ export default {
       }
     }
   }
-}
+})
 ```

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

@@ -11,9 +11,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -38,5 +39,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/enUS/closable.demo.md

@@ -7,9 +7,10 @@ Set `closable` to make message closable by a click.
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -24,5 +25,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/enUS/icon.demo.md

@@ -5,11 +5,11 @@
 ```
 
 ```js
-import { h } from 'vue'
+import { defineComponent, h } from 'vue'
 import { NIcon, useMessage } from 'naive-ui'
 import { MdHourglass } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -20,5 +20,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/enUS/manually-close.demo.md

@@ -8,15 +8,15 @@
 ```
 
 ```js
-import { onBeforeUnmount } from 'vue'
+import { defineComponent, onBeforeUnmount, reactive } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
-    let messageReactive = null
+    let messageReactive = reactive(null)
 
-    function removeMessage () {
+    const removeMessage = () => {
       if (messageReactive) {
         messageReactive.destroy()
         messageReactive = null
@@ -24,6 +24,7 @@ export default {
     }
 
     onBeforeUnmount(removeMessage)
+
     return {
       removeMessage,
       createMessage () {
@@ -35,5 +36,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/enUS/modify-content.demo.md

@@ -9,32 +9,36 @@
 ```
 
 ```js
+import { defineComponent, ref, reactive } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
-    let count = 0
-    let typeIndex = 0
     const types = ['success', 'info', 'warning', 'error', 'loading']
-    let msg = null
+    const countRef = ref(0)
+    const typeIndexRef = ref(0)
+    let msgReactive = reactive(null)
+
     return {
       plus () {
-        if (msg) {
-          count++
-          msg.content = '' + count
+        if (msgReactive) {
+          countRef.value++
+          msgReactive.content = '' + countRef.value
         }
       },
       changeType () {
-        if (msg) {
-          typeIndex = (typeIndex + 1) % types.length
-          msg.type = types[typeIndex]
+        if (msgReactive) {
+          typeIndexRef.value = (typeIndexRef.value + 1) % types.length
+          msgReactive.type = types[typeIndexRef.value]
         }
       },
       createMessage () {
-        msg = message[types[typeIndex]]('' + count, { duration: 10000 })
+        msgReactive = message[types[typeIndexRef.value]]('' + countRef.value, {
+          duration: 10000
+        })
       }
     }
   }
-}
+})
 ```

src/message/demos/enUS/multiple-line.demo.md

@@ -5,9 +5,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -18,5 +19,5 @@ export default {
       }
     }
   }
-}
+})
 ```

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

@@ -7,8 +7,8 @@
 ```
 
 ```js
+import { defineComponent, h, ref } from 'vue'
 import { useMessage, NButton } from 'naive-ui'
-import { h, ref } from 'vue'
 
 const Buttons = {
   emits: ['changePlacement'],
@@ -102,18 +102,18 @@ const Buttons = {
   }
 }
 
-export default {
+export default defineComponent({
   components: {
     Buttons
   },
   setup () {
-    const placement = ref('top')
+    const placementRef = ref('top')
     return {
-      placement,
-      changePlacement: (val) => {
-        placement.value = val
+      placement: placementRef,
+      changePlacement (val) {
+        placementRef.value = val
       }
     }
   }
-}
+})
 ```

src/message/demos/enUS/timing.demo.md

@@ -7,9 +7,10 @@ Specify the duration of messages.
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -21,5 +22,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/zhCN/about-theme.demo.md

@@ -7,9 +7,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -21,5 +22,5 @@ export default {
       }
     }
   }
-}
+})
 ```

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

@@ -11,9 +11,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -38,5 +39,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/zhCN/closable.demo.md

@@ -7,9 +7,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -24,5 +25,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/zhCN/icon.demo.md

@@ -5,11 +5,11 @@
 ```
 
 ```js
-import { h } from 'vue'
+import { defineComponent, h } from 'vue'
 import { NIcon, useMessage } from 'naive-ui'
 import { MdHourglass } from '@vicons/ionicons4'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -20,5 +20,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/zhCN/manually-close.demo.md

@@ -8,15 +8,15 @@
 ```
 
 ```js
-import { onBeforeUnmount } from 'vue'
+import { defineComponent, onBeforeUnmount, reactive } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
-    let messageReactive = null
+    let messageReactive = reactive(null)
 
-    function removeMessage () {
+    const removeMessage = () => {
       if (messageReactive) {
         messageReactive.destroy()
         messageReactive = null
@@ -24,6 +24,7 @@ export default {
     }
 
     onBeforeUnmount(removeMessage)
+
     return {
       removeMessage,
       createMessage () {
@@ -35,5 +36,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/message/demos/zhCN/modify-content.demo.md

@@ -9,32 +9,36 @@
 ```
 
 ```js
+import { defineComponent, ref, reactive } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
-    let count = 0
-    let typeIndex = 0
     const types = ['success', 'info', 'warning', 'error', 'loading']
-    let msg = null
+    const countRef = ref(0)
+    const typeIndexRef = ref(0)
+    let msgReactive = reactive(null)
+
     return {
       plus () {
-        if (msg) {
-          count++
-          msg.content = '' + count
+        if (msgReactive) {
+          countRef.value++
+          msgReactive.content = '' + countRef.value
         }
       },
       changeType () {
-        if (msg) {
-          typeIndex = (typeIndex + 1) % types.length
-          msg.type = types[typeIndex]
+        if (msgReactive) {
+          typeIndexRef.value = (typeIndexRef.value + 1) % types.length
+          msgReactive.type = types[typeIndexRef.value]
         }
       },
       createMessage () {
-        msg = message[types[typeIndex]]('' + count, { duration: 10000 })
+        msgReactive = message[types[typeIndexRef.value]]('' + countRef.value, {
+          duration: 10000
+        })
       }
     }
   }
-}
+})
 ```

src/message/demos/zhCN/multiple-line.demo.md

@@ -5,9 +5,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -18,5 +19,5 @@ export default {
       }
     }
   }
-}
+})
 ```

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

@@ -7,8 +7,8 @@
 ```
 
 ```js
+import { defineComponent, h, ref } from 'vue'
 import { useMessage, NButton } from 'naive-ui'
-import { h, ref } from 'vue'
 
 const Buttons = {
   emits: ['changePlacement'],
@@ -102,18 +102,18 @@ const Buttons = {
   }
 }
 
-export default {
+export default defineComponent({
   components: {
     Buttons
   },
   setup () {
-    const placement = ref('top')
+    const placementRef = ref('top')
     return {
-      placement,
-      changePlacement: (val) => {
-        placement.value = val
+      placement: placementRef,
+      changePlacement (val) {
+        placementRef.value = val
       }
     }
   }
-}
+})
 ```

src/message/demos/zhCN/timing.demo.md

@@ -7,9 +7,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -21,5 +22,5 @@ export default {
       }
     }
   }
-}
+})
 ```