docs(components): use script setup replace defineComponent (#4849)

* docs(components): use `script setup` replace `defineComponent` * docs(components): use setup sugar simplify `checkbox` demo * docs(components): use setup sugar simplify `collapse` demo * docs(components): use setup sugar simplify `color-picker` demo * docs(components): use setup sugar simplify `config-provider` demo * docs(components): use setup sugar simplify `container` demo * docs(components): use setup sugar simplify `date-picker` demo * docs(components): use setup sugar simplify `datetime-picker` demo * docs(components): use setup sugar simplify `dialog` demo * docs(components): use setup sugar simplify `drawer` demo * docs(components): use setup sugar simplify `dropdown` demo * docs(components): use setup sugar simplify `image` demo * docs(components): use setup sugar simplify `infinite-scroll` demo * docs(components): use setup sugar simplify `input-number` demo * docs(components): use setup sugar simplify `loading` demo * docs(components): use setup sugar simplify `menu` demo * docs(components): use setup sugar simplify `message` demo * docs(components): use setup sugar simplify `message-box` demo * docs(components): use setup sugar simplify `notification` demo * docs(components): use setup sugar simplify `page-header` demo * docs(components): use setup sugar simplify `pagination` demo * docs(components): use setup sugar simplify `popover` demo * docs(components): use setup sugar simplify `progress` demo * docs(components): use setup sugar simplify `radio` demo * docs(components): use setup sugar simplify `rate` demo * docs(components): use setup sugar simplify `scrollbar` demo * docs(components): use setup sugar simplify `select` demo * docs(components): use setup sugar simplify `select-v2` demo * docs(components): use setup sugar simplify `skeleton` demo * docs(components): use setup sugar simplify `slider` demo * docs(components): use setup sugar simplify `space` demo * docs(components): use setup sugar simplify `step` demo * docs(components): use setup sugar simplify `switch` demo * docs(components): use setup sugar simplify `tabs` demo * docs(components): use setup sugar simplify `tag` demo * docs(components): use setup sugar simplify `time-picker` demo * docs(components): use setup sugar simplify `time-select` demo * docs(components): use setup sugar simplify `timeline` demo * docs(components): use setup sugar simplify `tooltip` demo * docs(components): use setup sugar simplify `transfer` demo * docs(components): use setup sugar simplify `transition` demo * docs(components): use setup sugar simplify `tree` demo * docs(components): use setup sugar simplify `table` demo * docs(components): Escape character * docs(components): use setup sugar simplify `tree-v2` demo * docs(components): use setup sugar simplify `upload` demo * docs(components): use `ref` to replace `reactive` * docs(ci): use `playground` to replace `codepen` * docs(ci): change icon from `codepen` to `ep` * docs(components): `sass` to `css` * fix(components): add button CssVar * docs(ci): change `Edit in Codepen.io` to `Edit in Playground` * docs(ci): add vitepress i18
2025-08-26 04:27:26 +08:00 · 2021-12-21 15:51:33 +08:00
parent 0870bb968c
commit 575835a2f8
244 changed files with 6757 additions and 8034 deletions
--- a/docs/examples/message-box/distinguishable-close-cancel.vue
+++ b/docs/examples/message-box/distinguishable-close-cancel.vue
@ -2,41 +2,33 @@
  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { ElMessageBox, ElMessage } from 'element-plus'
-export default defineComponent({
-  setup() {
-    const open = () => {
-      ElMessageBox.confirm(
-        'You have unsaved changes, save and proceed?',
-        'Confirm',
-        {
-          distinguishCancelAndClose: true,
-          confirmButtonText: 'Save',
-          cancelButtonText: 'Discard Changes',
-        }
-      )
-        .then(() => {
-          ElMessage({
-            type: 'info',
-            message: 'Changes saved. Proceeding to a new route.',
-          })
-        })
-        .catch((action) => {
-          ElMessage({
-            type: 'info',
-            message:
-              action === 'cancel'
-                ? 'Changes discarded. Proceeding to a new route.'
-                : 'Stay in the current route',
-          })
-        })
+import type { Action } from 'element-plus'
+const open = () => {
+  ElMessageBox.confirm(
+    'You have unsaved changes, save and proceed?',
+    'Confirm',
+    {
+      distinguishCancelAndClose: true,
+      confirmButtonText: 'Save',
+      cancelButtonText: 'Discard Changes',
    }
-
-    return {
-      open,
-    }
-  },
-})
+  )
+    .then(() => {
+      ElMessage({
+        type: 'info',
+        message: 'Changes saved. Proceeding to a new route.',
+      })
+    })
+    .catch((action: Action) => {
+      ElMessage({
+        type: 'info',
+        message:
+          action === 'cancel'
+            ? 'Changes discarded. Proceeding to a new route.'
+            : 'Stay in the current route',
+      })
+    })
+}
 </script>