浏览器右下角下载提示框，

小飞棍来了

已于 2023-02-01 09:03:48 修改

阅读量146

点赞数

文章标签： vue.js javascript elementui

于 2023-01-17 17:31:26 首次发布

本文链接：https://blog.csdn.net/m0_67750137/article/details/128718873

版权

该文章展示了一个使用Vue.js编写的后台任务列表模板，包括点击按钮激活显示、下拉菜单切换排序方式、清空记录功能以及无限滚动加载更多数据的实现。代码中利用ElementUI库创建交互元素，并通过v-infinite-scroll指令处理滚动加载事件。

摘要由CSDN通过智能技术生成

1.实现效果(模板样式，未实现功能，功能根据业务自行增加)

2.代码

<template>
  <div class="app-container">
    // 点击激活时触发
    <el-button @click="rigth_end" plain>激活</el-button>
    <el-card class="box-card rigth_buttom" v-if="visible">
      <div slot="header" class="clearfix">
        <span style="float: left">后台任务(2)</span>
        <div style="float: right">
          <el-dropdown style="margin-right: 20px">
            <span class="el-dropdown-link">
              按时间倒序<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>升序</el-dropdown-item>
              <el-dropdown-item>倒序</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button style="padding: 3px 0; color: #323436" type="text"
            >清空记录<i class="el-icon-delete"></i
          ></el-button>
        </div>
      </div>
      <div class="infinite-list-wrapper" style="overflow: auto">
        <ul
          class="list"
          style="padding-left: 0"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
        >
          <li v-for="i in count" class="list-item" :key="i">
            <el-row type="flex" justify="space-around">
              <el-col>
                <div class="demo-fit">
                  <el-avatar
                    shape="square"
                    :size="50"
                    :fit="fit"
                    :src="url"
                  ></el-avatar></div
              ></el-col>
              <el-col>
                <span>2022-12-30产品模板</span>
                <div>
                  <span>导出成功</span><span>2022-12-30 13:42:05 3kb</span>
                </div>
              </el-col>
              <el-col style="display: flex">
                <el-button type="text">未下载</el-button>
                <el-button type="text">下载</el-button>
                <el-button type="text">删除</el-button>
              </el-col>
            </el-row>
          </li>
        </ul>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      count: 5,
      loading: false,
      fits: "cover",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    rigth_end() {
      this.visible = true;
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 5; //每次滚动加载10条数据
        this.loading = false;
      }, 2000);
    },
  },
};
</script>
<style scoped lang="scss">
.rigth_buttom {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 485px;
  height: 178px;
  .infinite-list-wrapper {
    height: 118px;
    .list-item {
      list-style-type: none;
    }
    .el-col-24 {
      width: auto;
    }
  }
}
::v-deep {
  .el-card__body,
  .el-main {
    padding: 0;
  }
}
</style>