thoth-frontend-test/src/views/administrators/components/adminNav.vue

<template>
  <el-container>
    <el-header class="admin-nav-header admin-nav-between">
      <el-input v-model="admin_query" placeholder="请输入内容" clearable size="small" @change="$emit('querySelect', admin_query)">
        <i slot="prefix" class="el-input__icon el-icon-search" />
      </el-input>
      <div class="admin-nav-div">
        <i class="el-icon-circle-plus-outline admin-nav-icon" @click="$emit('createDialog', '新建')" />
      </div>
    </el-header>
    <el-main style="padding: 10px; max-height: calc(100vh - 129px); overflow-y: auto;">
      <div v-for="(item, index) in admin_navList" :key="index" class="admin-nav-between admin-nav-col">
        <div class="admin-nav-start admin-nav-cursor">
          <svg-icon :icon-class="index === adminColor ? 'admin-model1' : 'admin_model'" />
          <el-tooltip v-if="item.name.length >= 9" class="item" effect="dark" :content="item.name" placement="top">
            <div class="admin-nav-name admin-nav-cursor" :class="{'admin-name-color': index === adminColor}" @click="$emit('clickName', item), adminColor = index"> {{ item.name }} </div>
          </el-tooltip>
          <div v-else class="admin-nav-name admin-nav-cursor" :class="{'admin-name-color': index === adminColor}" @click="$emit('clickName', item), adminColor = index"> {{ item.name }} </div>
        </div>
        <i v-if="type === 1" class="el-icon-close admin-nav-cursor" @click="deleteModel = true, deleteId = item" />
        <i v-else-if="item.type === 2" class="el-icon-close admin-nav-cursor" @click="deleteModel = true, deleteId = item" />
      </div>
    </el-main>

    <el-dialog title="移除确认" :visible.sync="deleteModel" class="demo-dialog" width="30%">
      <div class="blueStripe" />
      <div align="center">是否要移除 {{ deleteId.name }} ? </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteModel = false">取 消</el-button>
        <el-button type="primary" @click="$emit('delete', deleteId), deleteModel = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  props: {
    datas: { type: Array, required: true },
    type: { type: Number, default: 1 }
  },
  data() {
    return {
      adminColor: '',
      deleteModel: false, // 删除dialog
      deleteId: {},
      admin_query: '', // checkList模版查询
      admin_navList: []
    }
  },
  watch: {
    datas: {
      handler(newV) {
        this.admin_navList = newV
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.admin-nav-header {
  padding: 15px 10px;
}
.admin-nav-icon {
  border-radius: 4px;
  margin-left: 10px;
  line-height: 34px;
  font-size: 20px;
  cursor: pointer;
  color: #888;
}
.admin-nav-icon:hover {
  color: #409eff;
}
.admin-nav-between {
  display: flex;
  justify-content: space-between;
}
.admin-nav-start {
  display: flex;
  justify-content: flex-start;
}

.admin-nav-col {
  line-height: 15px;
  margin-bottom: 20px;
}
.admin-nav-div {
  line-height: 30px;
}
.admin-nav-cursor:hover {
  cursor: pointer;
  color: #409eff;
}
.admin-name-color {
  color:  #409eff;
}
.admin-nav-name {
  width: 149px;
  font-size: 14px;
  font-family: Microsoft Sans Serif;
  font-weight: 400;
  padding-left: 10px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.demo-dialog {
  /deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 16px;
    color: #303133;
    padding-left: 10px;
}
}
.blueStripe {
  width:4px;
  height:17px;
  background:#409EFF;
  border-radius:1px;
  position: absolute;
  top: 23px;
  left: 20px;
}
</style>