Skip to content
本页目录

###右侧带 展开/收缩/文本按钮组件

vue
<template>
  <!-- divider 右侧带 展开/收缩/文本按钮组件 -->
  <div class="driver-expand">
    <el-divider content-position="left">
      <span v-if="isRequest" class="required">*</span>
      {{ optTitle }}
      <span v-if="title">
        <slot name="title-content"></slot>
      </span>
    </el-divider>
    <div class="optTab">
      <slot name="btn-group"></slot>
      <el-button v-if="hasExpand" type="text" size="mini" style="margin-left:10px;" @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</el-button>
    </div>
    <div v-if="isShow" v-show="isExpand">
      <slot name="content"></slot>
    </div>
    <div v-else>
      <slot name="content" v-if="isExpand"></slot>
    </div>
  </div>
</template>
javascript
export default {
  name: 'DriverExpand',
  props: {
    optTitle: {
      type: String,
      default: ''
    },
    hasExpand: {
      type: Boolean,
      default: true
    },
    isRequest: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: Boolean,
      default: false
    },
    expand: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isExpand: true
    }
  },
  computed: {},
  watch: {
    expand: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.isExpand = false
        } else {
          this.isExpand = true
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    expandClick() {
      this.isExpand = true
    },
    closeExpand() {
      this.isExpand = false
    }
  }
}
text
<style rel="stylesheet/scss" lang="scss" scoped>
.driver-expand {
  position: relative;
  min-height: 22px;

  .optTab {
    position: absolute;
    right: 20px;
    top: -16px;
    background: #ffffff;
    padding: 0 10px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    color: #67c23a;

    .el-button {
      margin-left: 0 !important;
    }

    .el-button + .el-button {
      margin-left: 10px !important;
    }
  }

  .required {
    color: #F56C6C;
    padding-right: 5px;
  }
}
</style>