From be2e8a0f22a770aab5aad038b09da28986e35b02 Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Thu, 10 Jun 2021 00:23:34 +0800
Subject: [PATCH] feat(docs): Dropdown code for composition (#2194)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 无星 <32910694@qq.com>
---
 website/docs/en-US/dropdown.md | 38 ++++++++++++++++++++++++++++++++++
 website/docs/es/dropdown.md    | 38 ++++++++++++++++++++++++++++++++++
 website/docs/fr-FR/dropdown.md | 38 ++++++++++++++++++++++++++++++++++
 website/docs/jp/dropdown.md    | 38 ++++++++++++++++++++++++++++++++++
 website/docs/zh-CN/dropdown.md | 37 +++++++++++++++++++++++++++++++++
 5 files changed, 189 insertions(+)

diff --git a/website/docs/en-US/dropdown.md b/website/docs/en-US/dropdown.md
index 2cb4e1499a..430bfb8900 100644
--- a/website/docs/en-US/dropdown.md
+++ b/website/docs/en-US/dropdown.md
@@ -90,6 +90,24 @@ Use the button to trigger the dropdown list.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleClick = () => {
+        alert('button click');
+      };
+      return {
+        handleClick,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -245,6 +263,26 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const handleCommand = (command) => {
+        ElMessage(`click on item ${command}`);
+      };
+      return {
+        handleCommand,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/dropdown.md b/website/docs/es/dropdown.md
index acce66975b..a288e5fbb6 100644
--- a/website/docs/es/dropdown.md
+++ b/website/docs/es/dropdown.md
@@ -91,6 +91,24 @@ Utilizando un botón para activar la lista desplegable.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleClick = () => {
+        alert('button click');
+      };
+      return {
+        handleClick,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -247,6 +265,26 @@ Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro e
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const handleCommand = (command) => {
+        ElMessage(`click on item ${command}`);
+      };
+      return {
+        handleCommand,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/dropdown.md b/website/docs/fr-FR/dropdown.md
index 3ccedfd66b..99df215884 100644
--- a/website/docs/fr-FR/dropdown.md
+++ b/website/docs/fr-FR/dropdown.md
@@ -90,6 +90,24 @@ Utilisez le bouton pour ouvrir le menu déroulant.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleClick = () => {
+        alert('button click');
+      };
+      return {
+        handleClick,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -246,6 +264,26 @@ Le paramètre de cet évènement peut être assigné à chaque élément de la l
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const handleCommand = (command) => {
+        ElMessage(`click on item ${command}`);
+      };
+      return {
+        handleCommand,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/dropdown.md b/website/docs/jp/dropdown.md
index fdfc3b4d82..16e14ccfa3 100644
--- a/website/docs/jp/dropdown.md
+++ b/website/docs/jp/dropdown.md
@@ -90,6 +90,24 @@ dropdownリストを起動するには、ボタンを使用します。
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleClick = () => {
+        alert('button click');
+      };
+      return {
+        handleClick,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -245,6 +263,26 @@ dropdownリストを起動するには、ボタンを使用します。
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const handleCommand = (command) => {
+        ElMessage(`click on item ${command}`);
+      };
+      return {
+        handleCommand,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/dropdown.md b/website/docs/zh-CN/dropdown.md
index 9cabcb8dc6..724e7a00cd 100644
--- a/website/docs/zh-CN/dropdown.md
+++ b/website/docs/zh-CN/dropdown.md
@@ -91,7 +91,24 @@
     }
   }
 </script>
+<!--
+<setup>
 
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleClick = () => {
+        alert('button click');
+      };
+      return {
+        handleClick,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -246,6 +263,26 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const handleCommand = (command) => {
+        ElMessage(`click on item ${command}`);
+      };
+      return {
+        handleCommand,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::