learning-system-portal/src/components/Article/draftList.vue

<template>
  <div style="">
    <div class="article-list" v-for="(item,idx) in items" :key="idx">
      <div class="article-info">
        <div class="article-info-title">
          <span style=""><a :href="`${webBaseUrl}/article/detail?id=`" target="_blank"> {{item.title}}</a></span>
          <div class="article-info-date">
            <el-button @click="editItem(item)" type="text" icon="el-icon-edit">编辑</el-button>
            <el-button @click="delItem(item,idx)" type="text" icon="el-icon-remove">删除</el-button>
          </div>
        </div>
        <div class="article-info-summary">
         作为一个管理者，首先应该具有的应该是判断力，包括对未来的眼界以及对细节的洞察能力
        </div>
        <div class="article-info-tools">
          <div class="article-info-tools-auth">
             <span style="font-size: 13px; color: #7b7b7b;"><i class="el-icon-time"></i> 2022-02-12</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'articleItems',
    props: {
      items: { //name,
        type: Array,
        default:()=>[]
      }
    },
    data(){
      return {
        shareShow:false,
        shareInfo:{
          aid:'',
          name:'',
          article:null
        }
      }
    },
    mounted() {

    },
    methods:{
      editItem(item){
        this.$message({message:'编辑'+item.title+'内容',offset:50})
      },
      delItem(item,idx){
        this.$confirm('您确定要删除所选文章吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.items.splice(idx,1);
          this.$message({type: 'success',message: '删除成功!',offset:50});
        }).catch(() => {
          this.$message({type: 'info',message: '已取消删除',offset:50});
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .article-status1{
    padding: 3px;
    border: 1px dotted #1EA0FA;
    color:#1EA0FA;
  }
  .article-status2{
    padding: 3px;
    border: 1px dotted #00aa00;
    color:#00aa00;
  }
  .article-status3{
    padding: 3px;
    border: 1px dotted #ff0000;
    color:#ff0000;
  }
  .article-list {
    margin: 5px 0;
    border: 1px solid #dddddd;
    padding: 10px;
  }

  .article-info {
    .article-info-title {
      font-size: 16px;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      .article-info-date {
        height: 40px;
        line-height: 40px;
        float: right;
        font-weight: 200;
        color: #999999;
        i {
          margin-right: 5px;
        }
      }
    }
    .article-info-summary {
      height: 65px;
      color: #999999;
    }
    .article-info-tools {
      height: 30px;
      .article-info-tools-auth {
        float: left;
        font-size: 13px;
        color: #999999;
        img {
          margin-right: 10px;
          width: 30px;
          border: 1px solid #eee;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
      .article-info-tools-btns {
        float: right;
        .article-info-tools-btn {
          margin: 0 0 0 15px;
        }
      }
    }
  }

</style>