vue 小案例-02 大屏常用，点击目标，目标高亮，弹出弹层拿到点击目标数据

礼小七

已于 2022-08-06 23:46:00 修改

阅读量324

点赞数

分类专栏： JS vue 文章标签： vue.js javascript 前端

于 2022-07-23 18:15:53 首次发布

本文链接：https://blog.csdn.net/lixiaoqidecsdn/article/details/125950980

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

<template>
  <div class="content tabs">
    <h1 class="title">考核评价</h1>
    <div
      v-for="(item, index) in userList"   //v-for 遍历数组数据
      :key="index"
      @click="changeClick(item)"
      :class="activeClick === item ? 'tab-container-active' : 'tab-container'"
    >
      <div class="tab-item">
        {{ item.name }}   //拿到每一项的name
      </div>
    </div>
    <el-dialog
      :title="`考核评价 - ${diaLogTitle}`"
      :visible="dialogVisible"
      @close="handleClose"
      width="30%"
    >
      <span>关于{{diaLogTitle}}的考核评价</span>
      <div>XXXXXXXXXXX</div>
      <div>XXXXXXXXXXX</div>    //内容一般来自于接口
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userList: [    //数据一般对接接口
        {
          name: '疫情防控'
        },
        {
          name: '交通整治'
        },
        {
          name: '食品安全'
        },
        {
          name: '维稳安保'
        }
      ],
      dialogVisible: false,
      activeClick: '',
      diaLogTitle: ''
    }
  },
  methods: {
    // 点击传参
    changeClick (active) {
      // console.log(active)
      this.activeClick = active
      this.diaLogTitle = active.name
      this.dialogVisible = true
    },
    // 点击弹层X号,关闭弹层。
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  width: 400px;
  height: 400px;
  background-color: rgb(203, 201, 218);
  color: aliceblue;
}
.tabs {
  display: flex;
  justify-content: space-between;
  margin: 35px 0 0 300px;
  flex-wrap: wrap;
}
.tab-item {
  background: rgba(105, 105, 105, 0.4);
  font-weight: 500;
  font-size: 32px;
  color: rgba(230, 242, 255, 0.7);
  letter-spacing: 1px;
  cursor: pointer;
  text-align: center;
  width: 360px;
  line-height: 32px;
  padding: 10px 0;
  box-sizing: border-box;
  margin: 10px;
}

.tab-container-active {
  .tab-item {
    background: rgba(0, 182, 243, 0.4);
    color: #ffffff;
    border: 3px solid #00b6f3;
    padding: 7px 0;
  }
}
</style>

视图：