feat(docs): Message code for composition (#2250)

Co-authored-by: 无星 <32910694@qq.com>

website/docs/en-US/message.md

@@ -34,6 +34,37 @@ Displays at the top, and disappears after 3 seconds.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, h } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open = () => {
+        ElMessage('this is a message.');
+      };
+
+      const openVn = () => {
+        ElMessage({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode'),
+          ]),
+        });
+      };
+
+      return {
+        open,
+        openVn,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -76,6 +107,44 @@ Used to show the feedback of Success, Warning, Message and Error activities.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage('this is a message.');
+      };
+      const open2 = () => {
+        ElMessage({
+          message: 'Congrats, this is a success message.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          message: 'Warning, this is a warning message.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage.error('Oops, this is a error message.');
+      };
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -128,6 +197,53 @@ A close button can be added.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'This is a message.',
+        });
+      };
+      const open2 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Congrats, this is a success message.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Warning, this is a warning message.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Oops, this is a error message.',
+          type: 'error',
+        });
+      };
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -153,6 +269,29 @@ Use the `center` attribute to center the text.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openCenter = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Centered text',
+        });
+      };
+      return {
+        openCenter,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -178,6 +317,29 @@ Use the `center` attribute to center the text.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openCenter = () => {
+        ElMessage({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>',
+        });
+      };
+      return {
+        openCenter,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 

website/docs/es/message.md

@@ -34,6 +34,37 @@ Se muestra en la parte superior de la pagina y desaparece después de 3 segundos
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, h } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open = () => {
+        ElMessage('this is a message.');
+      };
+
+      const openVn = () => {
+        ElMessage({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode'),
+          ]),
+        });
+      };
+
+      return {
+        open,
+        openVn,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -76,6 +107,44 @@ Utilizados para mostrar retroalimentación de Success, Warning, Message y Error
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage('this is a message.');
+      };
+      const open2 = () => {
+        ElMessage({
+          message: 'Congrats, this is a success message.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          message: 'Warning, this is a warning message.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage.error('Oops, this is a error message.');
+      };
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -128,6 +197,53 @@ Un botón para cerrar que puede ser agregado.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'This is a message.',
+        });
+      };
+      const open2 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Congrats, this is a success message.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Warning, this is a warning message.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Oops, this is a error message.',
+          type: 'error',
+        });
+      };
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -153,6 +269,29 @@ Utiliza el atributo `center` para centrar el texto.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openCenter = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Centered text',
+        });
+      };
+      return {
+        openCenter,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -178,6 +317,29 @@ Utiliza el atributo `center` para centrar el texto.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openCenter = () => {
+        ElMessage({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>',
+        });
+      };
+      return {
+        openCenter,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 

website/docs/fr-FR/message.md

@@ -34,6 +34,37 @@ S'affiche en haut de la page et disparaît après trois secondes.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, h } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open = () => {
+        ElMessage('Ceci est un message.');
+      };
+
+      const openVn = () => {
+        ElMessage({
+          message: h('p', null, [
+            h('span', null, 'Message peut être '),
+            h('i', { style: 'color: teal' }, 'VNode'),
+          ]),
+        });
+      };
+
+      return {
+        open,
+        openVn,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -76,6 +107,46 @@ Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage('Ceci est un message.');
+      };
+
+      const open2 = () => {
+        ElMessage({
+          message: 'Félicitations, ceci est un message de succès.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          message: 'Attention, ceci est un avertissement.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage.error('Ouups, ceci est une erreur.');
+      };
+
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -128,6 +199,55 @@ Un bouton de fermeture peut être ajouté.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Ceci est un message.',
+        });
+      };
+
+      const open2 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Félicitations, ceci est un message de succès.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Attention, ceci est un avertissement.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Ouups, ceci est une erreur.',
+          type: 'error',
+        });
+      };
+
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -154,6 +274,30 @@ Utilisez l'attribut `center` pour centrer le texte.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openCenter = () => {
+        ElMessage({
+          message: 'Texte centré',
+          center: true,
+        });
+      };
+
+      return {
+        openCenter,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -180,6 +324,30 @@ Utilisez l'attribut `center` pour centrer le texte.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openHTML = () => {
+        ElMessage({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>Ceci est du <i>HTML</i></strong>',
+        });
+      };
+
+      return {
+        openHTML,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 

website/docs/jp/message.md

@@ -34,6 +34,37 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, h } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open = () => {
+        ElMessage('this is a message.');
+      };
+
+      const openVn = () => {
+        ElMessage({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode'),
+          ]),
+        });
+      };
+
+      return {
+        open,
+        openVn,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -76,6 +107,44 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage('this is a message.');
+      };
+      const open2 = () => {
+        ElMessage({
+          message: 'Congrats, this is a success message.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          message: 'Warning, this is a warning message.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage.error('Oops, this is a error message.');
+      };
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -128,6 +197,53 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const open1 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'This is a message.',
+        });
+      };
+      const open2 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Congrats, this is a success message.',
+          type: 'success',
+        });
+      };
+      const open3 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Warning, this is a warning message.',
+          type: 'warning',
+        });
+      };
+      const open4 = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Oops, this is a error message.',
+          type: 'error',
+        });
+      };
+      return {
+        open1,
+        open2,
+        open3,
+        open4,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -153,6 +269,29 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openCenter = () => {
+        ElMessage({
+          showClose: true,
+          message: 'Centered text',
+        });
+      };
+      return {
+        openCenter,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -178,6 +317,29 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+  import { ElMessage } from 'element-plus';
+
+  export default defineComponent({
+    setup() {
+      
+      const openCenter = () => {
+        ElMessage({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>',
+        });
+      };
+      return {
+        openCenter,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 

website/docs/zh-CN/message.md

@@ -35,6 +35,31 @@
     }
   })
 </script>
+<!--
+<setup>
+
+  import { defineComponent, h } from 'vue'
+  import { ElMessage } from 'element-plus'
+  export default defineComponent ({
+    setup() {
+      return {
+        open() {
+          ElMessage('只是一条消息提示')
+        },
+        openVn() {
+          ElMessage({
+            message: h('p', null, [
+              h('span', null, '内容可以是 '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ])
+          });
+        }
+      }
+    }
+  })
+
+</setup>
+-->
 ```
 :::
 
@@ -79,6 +104,38 @@
     }
   })
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue'
+  import { ElMessage } from 'element-plus'
+  export default defineComponent({
+    setup() {
+      return {
+        open1() {
+          ElMessage.success({
+            message: '恭喜你，这是一条成功消息',
+            type: 'success'
+          });
+        },
+        open2() {
+          ElMessage.warning({
+            message: '警告哦，这是一条警告消息',
+            type: 'warning'
+          });
+        },
+        open3() {
+          ElMessage('这是一条消息提示');
+        },
+        open4() {
+          ElMessage.error('错了哦，这是一条错误消息');
+        }
+      }
+    }
+  })
+
+</setup>
+-->
 ```
 :::
 
@@ -136,6 +193,51 @@
     }
   })
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue'
+  import { ElMessage } from 'element-plus'
+
+  export default defineComponent({
+    setup() {
+      return {
+        open1() {
+          ElMessage({
+            showClose: true,
+            message: '这是一条消息提示'
+          });
+        },
+
+        open2() {
+          ElMessage({
+            showClose: true,
+            message: '恭喜你，这是一条成功消息',
+            type: 'success'
+          });
+        },
+
+        open3() {
+          ElMessage({
+            showClose: true,
+            message: '警告哦，这是一条警告消息',
+            type: 'warning'
+          });
+        },
+
+        open4() {
+          ElMessage({
+            showClose: true,
+            message: '错了哦，这是一条错误消息',
+            type: 'error'
+          });
+        }
+      }
+    }
+  })
+
+</setup>
+-->
 ```
 :::
 
@@ -165,6 +267,26 @@
     }
   })
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue'
+  import { ElMessage } from 'element-plus'
+  export default defineComponent({
+    setup() {
+      return {
+        openCenter() {
+          ElMessage({
+            message: '居中的文字',
+            center: true
+          });
+        }
+      }
+    }
+  })
+
+</setup>
+-->
 ```
 :::
 
@@ -194,6 +316,26 @@
     }
   })
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue'
+  import { ElMessage } from 'element-plus'
+  export default defineComponent({
+    setup() {
+      return {
+        openHTML() {
+          ElMessage({
+            dangerouslyUseHTMLString: true,
+            message: '<strong>这是 <i>HTML</i> 片段</strong>'
+          });
+        }
+      }
+    }
+  })
+
+</setup>
+-->
 ```
 :::