Element-UI自学实践（二）

不会叫的狼2024-08-25 22:00

因上篇 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：帮助你更好地介绍，我们称之为辅助性文字。
html 复制代码 
<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 片段处理。
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 片段处理。
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 对象便于进行后续操作的处理。

html 复制代码 
<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 作为第三个参数，它是一个字面量对象。

html 复制代码 
<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 方法即可打开提交内容提示，可以用 inputPattern 字段自己规定匹配模式，或者用 inputValidator 规定校验函数，可以返回 Boolean 或 String，返回 false 或字符串时均表示校验未通过，同时返回的字符串相当于定义了 inputErrorMessage 字段。此外，可以用 inputPlaceholder 字段来定义输入框的占位符。

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

<script>
export default {
  name: "HomeView",
  methods: {
    open() {
      this.$prompt("请输入邮箱", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入邮箱',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确',
        type: 'warning'
      }).then(({ value }) => {
        this.$message({
          type: "success",
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: '取消输入'
        });
      });
    }
  }
};
</script>

Dialog 对话框

<el-dialog> 在保留当前页面状态的情况下，弹出用户交互页面。Dialog 分为两个部分：body 和 footer，footer 需要具名为 footer 的 slot。

  • title：定义标题
  • visible：Boolean，为 true 时显示 Dialog
  • before-close：仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
html 复制代码 
<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- body -->
      <span>这是一段信息</span>
      <!-- footer -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    }
  }
};
</script>

自定义内容

Dialog 组件的内容可以是任意的，甚至可以是表格或表单。

html 复制代码 
<template>
  <div>
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true" style="margin-left:50px;">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      gridData: [{
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
      }],
      form: {
        name: "",
        region: ""
      },
      formLabelWidth: "120px",
    };
  }
};
</script>

嵌套的 Dialog

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置 。对于确实需要嵌套 Dialog 的场景，我们提供了 append-to-body 属性。

html 复制代码 
<template>
  <div>
    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>

    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
      >
      <span>我是内层 Dialog内容</span>
      </el-dialog>
      
      <span>我是外层 Dialog内容</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
  </div>
</template>

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

嵌套平级放置 Dialog

html 复制代码 
<template>
  <div>
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="innerVisible = true">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="用户信息" :visible.sync="innerVisible">
      <el-descriptions title="用户信息">
        <el-descriptions-item label="用户名">王小虎</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">上海市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">上海市普陀区金沙江路 1518 弄</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      dialogTableVisible: false,
      innerVisible: false,
      gridData: [{
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
      }]
    };
  }
};
</script>

Drawer 抽屉

有些时候，<el-dialog> 组件并不满足我们的需求，比如你的表单很长，亦或是你需要临时展示一些文档，<el-drawer> 拥有和 <el-dialog>几乎相同的 API，在 UI 上带来不一样的体验。

<el-drawer> 在保留当前页面状态的情况下，弹出用户交互页面。Drawer 分为两个部分：title 和 body，title 需要具名为 title 的 slot。需要注意的是, Drawer 默认是从右往左打开 , 当然可以设置对应的 direction。

  • title：定义标题
  • withHeader：控制是否显示 header 栏, 默认为 true，当此项为 false 时，title attribute 和 title slot 均不生效
  • visible：Boolean，为 true 时显示 Drawer
  • direction：Drawer 打开的方向，rtl / ltr / ttb / btt，默认 rtl（从右往左打开）
  • before-close：仅当用户通过点击关闭图标或遮罩关闭 Drawer 时起效。可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
  • closeDrawer：用于关闭 Drawer, 该方法会调用传入的 before-close 方法
html 复制代码 
<template>
  <div>
    <h3>带标头Title</h3>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px">
      点我，从右往左打开
    </el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <span>我来啦!</span>
    </el-drawer>

    <h3>从左往右开</h3>
    <el-button @click="drawer2 = true" type="primary" style="margin-left: 16px">
      点我，从上往下打开
    </el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer2"
      direction="ttb"
      :before-close="handleClose"
    >
      <span>我来啦!</span>
    </el-drawer>

    <h3>不带标头Title</h3>
    <el-button @click="drawer3 = true" type="primary" style="margin-left: 16px">
      点我打开
    </el-button>
    <el-drawer title="我是标题" :visible.sync="drawer3" :with-header="false">
      <span>我来啦!</span>
    </el-drawer>

    <h3>自定义内容</h3>
    <el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
    <el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
    <el-drawer
      title="我嵌套了表格!"
      :visible.sync="table"
      direction="rtl"
      size="50%"
    >
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150" ></el-table-column>
        <el-table-column property="name" label="姓名" width="200" ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-drawer>

    <el-drawer
      title="我嵌套了 Form !"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading" >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
        </div>
      </div>
    </el-drawer>

    <h3>多层嵌套</h3>
    <el-button @click="drawer4 = true" type="primary" style="margin-left: 16px">
      点我打开
    </el-button>
    <el-drawer title="我是外面的 Drawer" :visible.sync="drawer4" size="50%">
      <div>
        <el-button @click="innerDrawer = true">打开里面的!</el-button>
        <el-drawer
          title="我是里面的"
          :append-to-body="true"
          :before-close="handleClose"
          :visible.sync="innerDrawer"
        >
          <p>_(:зゝ∠)_</p>
        </el-drawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      drawer: false,
      drawer2: false,
      drawer3: false,
      drawer4: false,
      table: false,
      dialog: false,
      loading: false,
      innerDrawer: false,
      gridData: [{
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      },{
        date: "2016-05-04",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      },{
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      },{
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      }],
      form: {
        name: "",
        region: "",
      },
      formLabelWidth: "80px",
      timer: null,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    }
  }
};
</script>

6. 其他组件

如加载（Loading）、文字提示（Tooltip）、弹出框（Popover）、确认框（Popconfirm）、卡片（Card）、折叠面板（Collapse）、时间线（Timeline）、分割线（Divider）、无限滚动（InfiniteScroll）等。

Loading 加载

组件通过自定义指令 v-loading 使用加载层，绑定 Boolean 即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加 body 修饰符，可以使遮罩插入至 DOM 中的 body 上。

html 复制代码 
<template>
  <div>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      loading: true,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ]
    };
  },
};
</script>

Tooltip 文字提示

<el-tooltip> 常用于展示鼠标 hover 时的提示信息。

  • content：决定 hover 时的提示信息。
  • placement：Tooltip 的出现位置
  • effect：提供的主题，dark/light，默认为 dark。
html 复制代码 
<template>
  <div>
    <h3>不同主题</h3>
    <el-tooltip content="Top center" placement="top">
      <el-button>Dark</el-button>
    </el-tooltip>
    <el-tooltip content="Bottom center" placement="bottom" effect="light">
      <el-button>Light</el-button>
    </el-tooltip>

    <h3>不同方向的展示方式</h3>
    <el-tooltip effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>上左</el-button>
    </el-tooltip>
    <el-tooltip effect="dark" content="Right Bottom 提示文字" placement="right-end">
      <el-button>右下</el-button>
    </el-tooltip>
    <el-tooltip effect="dark" content="Left Center 提示文字" placement="left">
      <el-button>左边</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
      <el-button>右边</el-button>
    </el-tooltip>

    <h3>自定义Content</h3>
    <el-tooltip placement="top">
      <div slot="content">多行信息<br />第二行信息</div>
      <el-button>Top center</el-button>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "HomeView"
};
</script>

Popover 弹出框

<el-popover> 与 <el-tooltip>很类似，它们都是基于 Vue-popper 开发的，很多属性类似。以下列出 <el-popover> 常用属性：

  • trigger：用于设置何时触发 Popover，hover、click、focus、manual。默认 click。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令 v-popover 指向 Popover 的索引 ref。
  • content：嵌套多种类型信息
  • value / v-model：状态是否可见，Boolean，默认 false。
html 复制代码 
<template>
  <div>
    <el-popover
      placement="top-start"
      title="标题"
      width="200"
      trigger="hover"
      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
      <el-button slot="reference">hover 激活</el-button>
    </el-popover>

    <el-popover
      placement="bottom"
      title="标题"
      width="200"
      trigger="click"
      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
      <el-button v-popover:popover>click 激活</el-button>
    </el-popover>

    <h3>嵌套信息</h3>
    <el-popover placement="right" width="400" trigger="click">
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="日期"></el-table-column>
        <el-table-column width="100" property="name" label="姓名"></el-table-column>
        <el-table-column width="300" property="address" label="地址"></el-table-column>
      </el-table>
      <el-button slot="reference">click 激活</el-button>
    </el-popover>

    <h3>嵌套操作</h3>
    <el-popover 
      placement="top" 
      width="160" 
      v-model="visible">
      <p>这是一段内容这是一段内容确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
      </div>
      <el-button slot="reference">删除</el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      visible: false,
      gridData: [{
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
      }],
    };
  }
};
</script>

Popconfirm 气泡确认框

<el-popconfirm> 的属性与 <el-popover> 很类似，本身自带"取消 "、"确认 "按钮。需要注意的是，<el-popconfirm> 只有 title 属性可用，content 属性不会被展示 。以下列出 <el-popconfirm> 常用属性：

  • title：标题
  • confirm-button-text：确认按钮文字
  • cancel-button-text：取消按钮文字
  • icon：Icon
  • confirm：点击确认按钮时触发
  • cancel：点击取消按钮时触发
html 复制代码 
<template>
  <div>
    <h3>基本用法</h3>
    <el-popconfirm title="这是一段内容确定删除吗？">
      <el-button slot="reference">删除</el-button>
    </el-popconfirm>

    <h3>自定义</h3>
    <el-popconfirm
      confirm-button-text="好的"
      cancel-button-text="不用了"
      icon="el-icon-info"
      icon-color="red"
      @confirm="confirmHandle"
      @cancel="cancelHandle"
      title="这是一段内容确定删除吗？"
    >
      <el-button slot="reference">删除</el-button>
    </el-popconfirm>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  methods: {
    confirmHandle() {
      console.log("confirmHandle");
    },
    cancelHandle() {
      console.log("cancelHandle");
    }
  }
};
</script>

Card 卡片

<el-card> 组件包括 header 和 body 部分，header 部分需要有显式具名 slot 分发，同时也是可选的。

  • header：设置卡片标题
  • shadow：设置阴影显示，always / hover / never，默认 always
  • body-style：设置 body 的样式，object
html 复制代码 
<template>
  <div>
    <el-card class="box-card" shadow="always">
      <div v-for="o in 4" :key="o" class="text item">
        {{ "列表内容 " + o }}
      </div>
    </el-card>

    <h3>带表头card</h3>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-button style="float: right; padding: 3px 0" type="text"操作按钮</el-button>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ "列表内容 " + o }}
      </div>
    </el-card>

    <h3>带图片</h3>
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"/>
      <div style="padding: 14px">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

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

<style>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 300px;
}
.image {
  width: 100%;
  display: block;
}
</style>

Collapse 折叠面板

<el-collapse> 通过折叠面板收纳内容区域

  • value / v-model：当前激活的面板
  • accordion：是否手风琴模式，每次只能展开一个面板
  • change：当前激活面板改变时触发事件

<el-collapse-item> 设置折叠面板项

  • name：唯一标志符
  • title：面板标题，可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。
html 复制代码 
<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <span slot="title"> 一致性 Consistency <i class="el-icon-info"></i> </span>
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback" name="2">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
      <el-collapse-item title="效率 Efficiency" name="3">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          可控 Controllability <i class="el-icon-question"></i>
        </template>
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      activeNames: ["1"]
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

Timeline 时间线

<el-timeline> 通常用于展示一系列事件的发生顺序，时间戳 是其区分于其他控件的重要特征，每个事件可以有标题和详细描述。

步骤条 <el-steps> 用于引导用户按照特定的步骤完成一个任务。每个步骤通常有标题和描述，可以通过指定当前步骤来显示进度。

  • timestamp：时间戳
  • placement：时间戳位置，top / bottom，默认bottom
  • type：节点类型，primary / success / warning / danger / info
  • color：节点颜色
  • size：节点尺寸，normal / large
  • icon：节点图标
html 复制代码 
<template>
  <div>
    <h3>⾃定义节点样式</h3>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :timestamp="activity.timestamp"
      >
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>

    <h3>⾃定义时间戳</h3>
    <el-timeline>
      <el-timeline-item timestamp="2018/4/12" placement="top">
        <el-card>
          <h4>更新 Github 模板</h4>
          <p>王小虎 提交于 2018/4/12 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top">
        <el-card>
          <h4>更新 Github 模板</h4>
          <p>王小虎 提交于 2018/4/3 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/2" placement="top">
        <el-card>
          <h4>更新 Github 模板</h4>
          <p>王小虎 提交于 2018/4/2 20:46</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      activities: [{
        content: "支持使用图标",
        timestamp: "2018-04-12 20:46",
        size: "large",
        type: "primary",
        icon: "el-icon-more",
      },{
        content: "支持自定义颜色",
        timestamp: "2018-04-03 20:46",
        color: "#0bbd87",
      },{
        content: "支持自定义尺寸",
        timestamp: "2018-04-03 20:46",
        size: "large",
      },{
        content: "默认样式的节点",
        timestamp: "2018-04-03 20:46",
      }]
    };
  }
};
</script>

Divider 分割线

<el-divider> 区隔内容的分割线。

  • direction：设置分割线方向，horizontal / vertical，默认 horizontal
  • content-position：设置分割线文案的位置，left / right / center，默认 center
html 复制代码 
<template>
  <div>
    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
    <el-divider></el-divider>
    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
    <el-divider content-position="left">少年包青天</el-divider>
    <span>饿了别叫妈, 叫饿了么</span>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <span>为了无法计算的价值</span>
    <el-divider content-position="right">阿里云</el-divider>

    <span>雨纷纷</span>
    <el-divider direction="vertical"></el-divider>
    <span>旧故里</span>
    <el-divider direction="vertical"></el-divider>
    <span>草木深</span>
  </div>
</template>

<script>
export default {
  name: "HomeView"
};
</script>

Image 图片

<el-image> 图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等

  • src：图片源
  • preview-src-list：Array，预览图片集合
java 复制代码 
<template>
  <div>
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
    >
    </el-image>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      url: "https://img2.baidu.com/it/u=2291283723,121700949&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      srcList: [
        "https://img2.baidu.com/it/u=2291283723,121700949&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img0.baidu.com/it/u=4137861691,3371971391&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      ],
    };
  },
};
</script>

InfiniteScroll 无限滚动

滚动至底部时，加载更多数据。要实现滚动加载的列表上上添加 v-infinite-scroll ，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

  • infinite-scroll-disabled：是否禁用，boolean
  • infinite-scroll-immediate：是否立即执行加载方法，以防初始状态下内容无法撑满容器。boolean
html 复制代码 
<template>
  <div>
    <div class="infinite-list-wrapper" style="overflow: auto">
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
      >
        <li v-for="(i, index) in list" class="list-item" :key="index">
          {{ index }}+ {{ i.title }}
        </li>
      </ul>
      <p v-if="loading" style="color: red;">加载中...</p>
      <p v-if="noMore" style="color: green;">没有更多了</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1, //起始页数值为0
      loading: false,
      totalPages: 10, //取后端返回内容的总页数
      list: [], //后端返回的数组
    };
  },
  computed: {
    noMore() {
      return this.count >= this.totalPages - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.getMessage();
  },
  methods: {
    load() {
      //滑到底部时进行加载
      this.loading = true;
      setTimeout(() => {
        this.count += 1; //页数+1
        this.getMessage(); //调用接口，此时页数+1，查询下一页数据
        this.loading = false;
      }, 2000);
    },
    //没有后端的情况
    getMessage() {
      let templist = [{
          title: "我爱您 你却爱着她",
      },{
          title: "我爱您 你却爱着她",
      },{
          title: "我爱您 你却爱着她",
      },{
          title: "我爱您 你却爱着她",
      }];
      this.list = this.list.concat(templist);
      this.loading = false;
    },
    //有后端的情况
    // getMessage() {
    //   let params = {
    //     pageNumber: this.count,
    //     pageSize: 10 //每页查询条数
    //   };
    //   console.log(params);
    //   request({
    //     url:"/getfollowlist",
    //     method:'post',
    //     data:{
    //         params
    //     }
    // }).then(res =>{
    //   console.log(res);
    //   this.list = this.list.concat(res.data.list);
    //   //因为每次后端返回的都是数组，所以这边把数组拼接到一起 concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本
    //   this.loading = false;
    //  }).catch(err =>{ console.log(err);});
    // }
  },
};
</script>
<style scoped>
/* 解决进去后一直自己加载的问题，加 height: 100vh;，意思为 height: 100%; */
.infinite-list-wrapper {
  height: 100vh;
  .list-item {
    height: 110px;
  }
}
</style>

无限加载

⚠️**注意：**复制官方代码发现，我还没滚动，他就无限加载，查阅资料发现，infinite-list-wrapper 需要加上 height: 100vh;，意思为 height: 100%;。

el-table实现无限向下滚动懒加载数据

相关推荐
syj_1112 小时前
初识ArkUI
ui·arkts·arkui
芋芋qwq10 小时前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
鸿蒙自习室11 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
大霞上仙13 小时前
element ui table 每行不同状态
vue.js·ui·elementui
栈老师不回家21 小时前
Element UI 组件库详解【Vue】
前端·vue.js·ui
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
wyh要好好学习1 天前
WPF数据加载时添加进度条
ui·wpf
code_shenbing1 天前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计
vvw&2 天前
如何使用 Docker Compose 安装 WireGuard UI
linux·服务器·ui·docker·容器·wireguard·异地组网
老码沉思录2 天前
Android开发实战班 - 现代 UI 开发之 Material Design及自定义主题
android·ui
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作