Element-UI自学实践（二）

因上篇 Element-UI自学实践（一） 文字过多，不便于观看，故另起一篇。

5. 反馈组件

反馈组件用于与用户进行交互，提供即时反馈，包括警告（Alert）、消息提示（Message）、消息弹窗（MessageBox）、通知（Notification）、对话框（Dialog）、抽屉（Drawer）等。

Alert 警告

<el-alert> 用于页面中展示提示信息。

• type：指定样式，success、info、warning、error，默认为 info。
• effect：改变主题，light、dark
• show-icon：显示 Alert 的 icon
• center：文字水平居中
• description：帮助你更好地介绍，我们称之为辅助性文字。

<template>
  <div>
    <h3>基本用法</h3>
    <el-alert title="成功提示的文案" type="success"> </el-alert>
    <el-alert title="错误提示的文案" type="error"> </el-alert>

    <h3>主题</h3>
    <el-alert title="成功提示的文案" type="success" effect="dark"> </el-alert>
    <el-alert title="错误提示的文案" type="error" effect="dark"> </el-alert>

    <h3>带有 icon</h3>
    <el-alert title="成功提示的文案" type="success" show-icon> </el-alert>
    <el-alert title="错误提示的文案" type="error" show-icon> </el-alert>

    <h3>文字居中</h3>
    <el-alert title="成功提示的文案" type="success" show-icon center></el-alert>
    <el-alert title="错误提示的文案" type="error" show-icon center> </el-alert>

    <h3>带有辅助性文字介绍</h3>
    <el-alert title="成功提示的文案" type="success" show-icon
      description="文字说明文字说明文字说明文字说明文字说明文字说明"
    >
    </el-alert>

    <h3>自定义插槽</h3>
    <el-alert type="success">
      <template slot="title">
        <i class="el-icon-circle-check"></i>
        成功提示的文案
      </template>
    </el-alert>
  </div>
</template>

<script>
export default {
     
  name: "HomeView",
  data() {
     
    return {
     };
  },
};
</script>

Message 消息提示

this.$message() 方法常用于主动操作后的反馈提示。

• type：指定样式，success、info、warning、error，默认为 info。
• showClose：可以人工关闭
• center ：文字水平居中
• dangerouslyUseHTMLString：设置为 true，message 就会被当作 HTML 片段处理。

<template>
  <div>
    <h3>基础用法</h3>
    <el-button :plain="true" @click="open1">成功</el-button>
    <el-button :plain="true" @click="open2">警告</el-button>
    <el-button :plain="true" @click="open3">消息</el-button>
    <el-button :plain="true" @click="open4">错误</el-button>

    <h3>可关闭</h3>
    <el-button :plain="true" @click="open5">成功</el-button>

    <h3>文字居中</h3>
    <el-button :plain="true" @click="openCenter">文字居中</el-button>

    <h3>使用 HTML 片段</h3>
    <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
  </div>
</template>

<script>
export default {
     
  name: "HomeView",
  methods: {
     
    open1() {
     
      this.$message({
     
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
    },
    open2() {
     
      this.$message({
     
        message: "警告哦，这是一条警告消息",
        type: "warning",
      });
    },
    open3() {
     
      this.$message("这是一条消息提示");
    },
    open4() {
     
      this.$message.error("错了哦，这是一条错误消息");
    },
    open5() {
     
      this.$message({
     
        showClose: true,
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
    },
    openCenter() {
     
      this.$message({
     
        message: "居中的文字",
        center: true,
      });
    },
    openHTML() {
     
      this.$message({
     
        dangerouslyUseHTMLString: true,
        message: "<strong>这是 <i>HTML</i> 片段</strong>",
        type: "success"
      });
    }
  },
};
</script>

Notification 通知

this.$notify() 悬浮出现在页面角落，显示全局的通知提醒消息。接收一个 options 对象参数，可以设置 title 字段和 message 字段，用于设置通知的标题和正文。

默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 duration，可以控制关闭的时间间隔，特别的是，如果设置为 0，则不会自动关闭。

• type：指定样式，success、info、warning、error，默认为 info。
• showClose：可以人工关闭
• position：定义 Notification 的弹出位置，top-right、top-left、bottom-right、bottom-left，默认为top-right
• dangerouslyUseHTMLString：设置为 true，message 就会被当作 HTML 片段处理。

<template>
  <div>
    <el-button plain @click="open1"> 成功 </el-button>
    <el-button plain @click="open2"> 警告 </el-button>
    <el-button plain @click="open3"> 消息 </el-button>
    <el-button plain @click="open4"> 错误 </el-button>
    <el-button plain @click="open5"> 不会自动关闭 </el-button>
    <el-button plain @click="open6"> 左上角 </el-button>
  </div>
  </div>
</template>

<script>
export default {
     
  name: "HomeView",
  methods: {
     
    open1() {
     
      this.$notify({
     
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success",
      });
    },
    open2() {
     
      this.$notify({
     
        title: "警告",
        message: "这是一条警告的提示消息",
        type: "warning",
      });
    },
    open3() {
     
      this.$notify.info({
     
        title: "消息",
        message: "这是一条消息的提示消息",
      });
    },
    open4() {
     
      this.$notify.error({
     
        title: "错误",
        message: "这是一条错误的提示消息",
      });
    },
    open5() {
     
      this.$notify({
     
        title: "提示",
        message: "这是一条不会自动关闭的消息",
        duration: 0
      });
    },
    open6() {
     
      this.$notify({
     
        title: '自定义位置',
        message: '左上角弹出的消息',
        position: 'top-left'
      });
    }
  },
};
</script>

MessageBox 弹出框

MessageBox 弹出框实现的一套模态对话框组件，用于 alert（消息提示）、confirm（确认消息）和 prompt（提交内容），适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

• $alter：提示弹出框，只有一个确定按钮
• $confirm：确认弹出框，有两个按钮：确定和取消，分别返回 true 和 false
• $prompt：提交弹出框，确定，取消，输入框，确定返回输入框的值（不输入为空），取消返回Null

消息提示

调用 $alert 方法即可打开消息提示，接收了两个参数，message 和 title。默认会返回一个 Promise 对象便于进行后续操作的处理。

<template>
  <div>
    <el-button type="text" @click="open">点击打开 Message Box</el-button>
  </div>
</template>

<script>
export default {
     
  name: "HomeView",
  methods: {
     
    open() {
     
      this.$alert("这是一段内容", "标题名称", {
     
        confirmButtonText: '确定',
        type: "warning",
      }).then(() => {
     
        this.$message({
     
          type: "success",
          message: "删除成功!",
        });
      }).catch(() => {
     
        this.$message({
     
          type: "info",
          message: "已取消删除",
        });
      });
    }
  }
};
</script>

点击 “确认”，弹出 “删除成功!”；点击 “x”，弹出 “已取消删除”。

确认消息

调用 $confirm 方法即可打开确认消息，我们可以传入 options 作为第三个参数，它是一个字面量对象。

<template>
  <div>
    <el-button type="text" @click="open">点击打开 Message Box</el-button>
  </div>
</template>

<script>
export default {
     
  name: "HomeView",
  methods: {
     
    open() {
     
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
     
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
     
        this.$message({
     
          type: "success",
          message: "删除成功!",
        });
      }).catch(() => {
     
        this.$message({
     
          type: "info",
          message: "已取消删除",
        });
      });
    }
  }
};
</script>

点击 “确认”，弹出 “删除成功!”；点击 “x” 或者 “取消”，弹出 “已取消删除”。

提交内容

调用 $prompt 方法即可打开提交内容提示，可以用 inputPatt