index.vue 3.31 KB
<template>
  <div class="notice">
    <p style="text-align:right;padding-bottom:10px;margin:0;line-height:40px;"><el-button size="small" icon="el-ump-qingchu" @click="clear">全部标记已读</el-button></p>
    <div v-for="(item,index) in notice" :key="index" class="notice-list">
      <div class="title">
        <el-badge value="未读" class="item" :hidden="item.read">
          <b>{{ item.title }}</b>
        </el-badge>
        <span style="float:right">{{ item.date }}</span>
      </div>
      <div v-if="clickindex!=index" class="content">
        {{ data(item.detail) }}
      </div>
      <div v-else class="content">
        {{ item.detail }}
      </div>
      <span v-if="clickindex!=index" style="float:right;color:rgb(64, 158, 255);cursor: pointer;" @click="toggledetail(item,index)">展开 <i class="el-icon-caret-bottom" /></span>
      <span v-else style="float:right;color:rgb(64, 158, 255);cursor: pointer;" @click="toggledetail(item,-1)">收起 <i class="el-icon-caret-top" /></span>
      <div style="clear:both" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Notice',
  data() {
    return {
      showflag: true,
      clickindex: -1,
      notice: [
        {
          id: '1001',
          title: '我就是一个标题',
          read: false,
          date: '2019-12-25 10:29',
          detail: '我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位我是消息详细内容,此段文'
        },
        {
          id: '1002',
          title: '我就是一个标题2',
          read: false,
          date: '2019-12-25 10:29',
          detail: '我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位,我是消息详细内容,此段文字仅用来占位我是消息详细内容,此段文'
        }
      ]
    }
  },
  methods: {
    data(arr) {
      if (arr.length > 100) {
        return arr.substring(0, 100) + '...'
      } else {
        return arr
      }
    },
    toggledetail(item, index) {
      if (index > -1) { this.notice[index].read = true }
      this.clickindex = index
    },
    clear() {
      for (let i = 0; i < this.notice.length; i++) {
        this.notice[i].read = true
      }
    }
  }

}
</script>
<style scoped>
.notice{
    max-width: 1100px;
    background: #fff;
    margin:0 auto;
    margin-top:15px;
    padding:20px;
  }
  .notice-list{
    margin-top:10px;
    padding-bottom:10px;
    border-bottom:1px solid #ccc;
  }
  .title{
    padding: 10px 0;
  }
  .title span{
    font-size: 14px;
    color:#888;
  }
  .content{
    font-size: 14px;
    line-height: 20px;
  }
  b{
    font-size:18px;
    padding-right:10px;
  }
</style>