element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行

**Element UI Message 消息提示组件**

Message 是 Element UI 提供的一个用于显示提示信息的组件。它可以用来展示各种类型的提示信息，例如成功、警告、错误等。

###1.延长提示消息在页面停留时间默认情况下，Message 的停留时间是3 秒钟。如果你想延长这个时间，可以通过 `duration` 属性来实现。例如：

html<template>
 <div>
 <el-button @click="showMessage">显示 Message</el-button>
 </div>
</template>

<script>
export default {
 methods: {
 showMessage() {
 this.$message({
 message: '这是一条提示消息',
 duration:5000 //延长停留时间为5秒 });
 }
 }
}
</script>

在上面的例子中，我们通过设置 `duration` 为5000 来延长 Message 的停留时间。

###2.提示消息换行如果你想让 Message 的内容换行，可以通过 `showClose` 属性来实现。例如：

html<template>
 <div>
 <el-button @click="showMessage">显示 Message</el-button>
 </div>
</template>

<script>
export default {
 methods: {
 showMessage() {
 this.$message({
 message: '这是一条很长的提示消息，希望你能看到所有内容
这是第二行',
 showClose: true //让 Message 的内容换行 });
 }
 }
}
</script>

在上面的例子中，我们通过设置 `showClose` 为 true 来让 Message 的内容换行。

###3.代码注释

html<!-- Element UI Message 消息提示组件示例 @author: your name @date:2022-09-01-->
<template>
 <div>
 <!-- Button 按钮组件，用于触发 Message 的显示 -->
 <el-button @click="showMessage">显示 Message</el-button>

 <!-- Message 消息提示组件的内容 -->
 <el-message :visible.sync="messageVisible" type="success">
 这是一条提示消息 </el-message>
 </div>
</template>

<script>
export default {
 data() {
 return {
 messageVisible: false //控制 Message 的显示和隐藏 }
 },
 methods: {
 showMessage() {
 this.messageVisible = true; //显示 Message setTimeout(() => {
 this.messageVisible = false; //延迟3 秒后隐藏 Message },3000);
 }
 }
}
</script>

在上面的例子中，我们通过设置 `messageVisible` 的值来控制 Message 的显示和隐藏。

###4.部分代码示例

html
显示 Message



 这是一条提示消息

在上面的例子中，我们通过使用 `@click`事件来触发 Message 的显示。

###5.总结Element UI Message 消息提示组件是一个非常有用的工具，可以用来展示各种类型的提示信息。通过设置 `duration` 属性可以延长 Message 的停留时间，通过设置 `showClose` 属性可以让 Message 的内容换行。最后，我们可以通过使用 `@click`事件来触发 Message 的显示。