fix(notification): placement demo (#7419)

* fix(notification): fix placement demo

* fix(notification): localize zhCN placement demo copy

Author: Sepush

src/notification/demos/enUS/placement.demo.vue

@@ -4,46 +4,57 @@
 
 <script lang="ts" setup>
 import type { NotificationPlacement } from 'naive-ui'
+import type { PropType, VNode } from 'vue'
 import { NButton, NSpace, useNotification } from 'naive-ui'
-import { h, ref } from 'vue'
+import { defineComponent, h, ref } from 'vue'
 
-const placementRef = ref<NotificationPlacement>('top-right')
-
-function handlePlacementChange(val: NotificationPlacement) {
-  placementRef.value = val
+interface Item {
+  placement: NotificationPlacement
+  text: string
 }
 
-function PlacementButtons(props: {
-  onPlacementChange?: (placement: NotificationPlacement) => void
-}) {
-  const notification = useNotification()
-  const placementList = [
-    { placement: 'top-left' as const, text: 'Top left' },
-    { placement: 'top-right' as const, text: 'Top right' },
-    { placement: 'bottom-left' as const, text: 'Bottom left' },
-    { placement: 'bottom-right' as const, text: 'Bottom right' },
-    { placement: 'bottom' as const, text: 'Bottom' },
-    { placement: 'top' as const, text: 'Top' }
-  ]
+const PlacementButtons = defineComponent({
+  props: {
+    onPlacementChange: Function as PropType<
+      (placement: NotificationPlacement) => void
+    >
+  },
+  setup(props) {
+    const notification = useNotification()
+    const placementList: Item[] = [
+      { placement: 'top-left', text: 'Top left' },
+      { placement: 'top-right', text: 'Top right' },
+      { placement: 'bottom-left', text: 'Bottom left' },
+      { placement: 'bottom-right', text: 'Bottom right' },
+      { placement: 'bottom', text: 'Bottom' },
+      { placement: 'top', text: 'Top' }
+    ]
+    return (): VNode =>
+      h(NSpace, null, {
+        default: () =>
+          placementList.map((item: Item) =>
+            h(
+              NButton,
+              {
+                onClick: () => {
+                  props.onPlacementChange?.(item.placement)
+                  notification.info({
+                    title: item.placement,
+                    content: 'You can change the placement'
+                  })
+                }
+              },
+              { default: () => item.text }
+            )
+          )
+      })
+  }
+})
+
+const placementRef = ref<NotificationPlacement>('top-right')
 
-  return h(NSpace, null, {
-    default: () =>
-      placementList.map(item =>
-        h(
-          NButton,
-          {
-            onClick: () => {
-              props.onPlacementChange?.(item.placement)
-              notification.info({
-                title: item.placement,
-                content: 'You can change the placement'
-              })
-            }
-          },
-          { default: () => item.text }
-        )
-      )
-  })
+function handlePlacementChange(placement: NotificationPlacement) {
+  placementRef.value = placement
 }
 </script>
 

src/notification/demos/zhCN/placement.demo.vue

@@ -4,46 +4,57 @@
 
 <script lang="ts" setup>
 import type { NotificationPlacement } from 'naive-ui'
+import type { PropType, VNode } from 'vue'
 import { NButton, NSpace, useNotification } from 'naive-ui'
-import { h, ref } from 'vue'
+import { defineComponent, h, ref } from 'vue'
 
-const placementRef = ref<NotificationPlacement>('top-right')
-
-function handlePlacementChange(val: NotificationPlacement) {
-  placementRef.value = val
+interface Item {
+  placement: NotificationPlacement
+  text: string
 }
 
-function PlacementButtons(props: {
-  onPlacementChange?: (placement: NotificationPlacement) => void
-}) {
-  const notification = useNotification()
-  const placementList = [
-    { placement: 'top-left' as const, text: '左上' },
-    { placement: 'top-right' as const, text: '右上' },
-    { placement: 'bottom-left' as const, text: '左下' },
-    { placement: 'bottom-right' as const, text: '右下' },
-    { placement: 'bottom' as const, text: '下' },
-    { placement: 'top' as const, text: '上' }
-  ]
+const PlacementButtons = defineComponent({
+  props: {
+    onPlacementChange: Function as PropType<
+      (placement: NotificationPlacement) => void
+    >
+  },
+  setup(props) {
+    const notification = useNotification()
+    const placementList: Item[] = [
+      { placement: 'top-left', text: '左上' },
+      { placement: 'top-right', text: '右上' },
+      { placement: 'bottom-left', text: '左下' },
+      { placement: 'bottom-right', text: '右下' },
+      { placement: 'bottom', text: '下' },
+      { placement: 'top', text: '上' }
+    ]
+    return (): VNode =>
+      h(NSpace, null, {
+        default: () =>
+          placementList.map((item: Item) =>
+            h(
+              NButton,
+              {
+                onClick: () => {
+                  props.onPlacementChange?.(item.placement)
+                  notification.info({
+                    title: item.placement,
+                    content: '你可以切换弹出位置'
+                  })
+                }
+              },
+              { default: () => item.text }
+            )
+          )
+      })
+  }
+})
+
+const placementRef = ref<NotificationPlacement>('top-right')
 
-  return h(NSpace, null, {
-    default: () =>
-      placementList.map(item =>
-        h(
-          NButton,
-          {
-            onClick: () => {
-              props.onPlacementChange?.(item.placement)
-              notification.info({
-                title: item.placement,
-                content: 'You can change the placement'
-              })
-            }
-          },
-          { default: () => item.text }
-        )
-      )
-  })
+function handlePlacementChange(placement: NotificationPlacement) {
+  placementRef.value = placement
 }
 </script>