vue 自定义侧边栏组件_dis-hover

<template>
  <div :class="[cusClass]">
    <Affix :offset-top="0" :use-capture="true">
      <Card class="category mr_10" :bordered="false" dis-hover :padding="0">
         <!-- <RadioGroup v-model="vertical" v-for="(item, index) in list" :key="index" vertical @on-change="onChange(item)">
            <Radio :label="item.dataName">
            </Radio>
          </RadioGroup> -->
        <div class="Box" v-for="(option, index) in list" :key="index" @click="onChange(option, index)" :class="activeClass == index ? 'active':''">
          <div style="height: 37px; line-height: 37px; font-size: 14px; cursor: pointer;">{{option.dataName}}</div>
        </div>
        <div>
          <Spin class="cus-auto-body-more" v-if="loading"></Spin>
          <div class="cus-auto-body-more" @click="onMore" v-if="!loading && !finished">查看更多</div>
          <div class="cus-auto-body-more" v-if="finished">没有更多啦~</div>
      </div>
      </Card>
    </Affix>
  </div>
</template>
 
<script>
/**
 * 语法糖value
 * @fnc 接口列表方法
 * @onChange 回调方法 -> 返回当前选中对象, 索引(option, index)
*/
 
export default {
  name: "cusSidebar",
  props:{
    value: {
      type: Object,
      default: () =>{
        return {
          label: '',
          value: ''
        }
      }
    },
    fnc: {
      type: Function,
      default: () =>{
        return () =>{
        }
      }
    }
  },
  computed: {
    cusClass() {
      if (this.menu_collapsed) {
        return "close";
      } else {
        return "open";
      }
    },
  },
  data() {
    return {
      collapsed: false,
      vertical: "",
      list: [],
      activeClass: "",
      loading: true,
      finished: false,
      contextData: {
        level: 0,
      },
      pages :{
        page: 1,
        pageSize: 1000,
      }
    };
  },
  mounted() {
    this.getOptionsList();
  },
  methods: {
    handleContextMenu(data) {
      this.contextData = data;
    },
    onChange(option, index) {
      this.$emit("onChange", option);
      this.activeClass = index;
    },
    onMore () {
      this.loading = true
      this.getOptionsList()
    },
    getOptionsList() {
      return new Promise((resolve, reject) => {
        let params = {
          pageNum: this.pages.page,
          pageSize: this.pages.pageSize,
        }
        this.fnc( params ).then( res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.pages.page += 1;
            this.list = res.data.records;
            this.finished = true;
            if (this.list.length) {
              this.$emit("onChange", this.list[0]);
            }
            resolve()
          }
        })
      })
    }
  },
};
</script>
 
<style lang="scss" scoped>
.close .ivu-affix {
  transition: all 0.5s;
  left: 84px !important;
}
 
.open .ivu-affix {
  transition: all 0.5s;
  left: 270px !important;
}
</style>
<style scoped lang="scss">
.category {
  min-width: 150px;
  overflow-y: scroll;
  padding: 20px 20px 10px;
  max-height: calc(100vh - 150px);
}
 
.category::-webkit-scrollbar {
  display: none;
  width: 0 !important;
}
.ivu-tree-arrow {
  display: none;
}
.active {
  background: #f3f3f3;
  color: #1e6fff;
}
.Box:hover {
  background: #f3f3f3;
}
.cus-auto-body-more {
  justify-content: start!important;;
}
</style>

代码已经封装可实现侧边选择（可用作管理系统侧边选择组件使用）