exam_mp/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue

<template>
  <view class="uni-collapse-item">
    <!-- onClick(!isOpen) -->
    <view
      @click="onClick(!isOpen)"
      class="uni-collapse-item__title"
      :class="{
        'is-open': isOpen && titleBorder === 'auto',
        'uni-collapse-item-border': titleBorder !== 'none',
      }"
    >
      <view class="uni-collapse-item__title-wrap">
        <slot name="title">
          <view
            class="uni-collapse-item__title-box"
            :class="{ 'is-disabled': disabled }"
            :style="{
              paddingLeft: `${leave * 5 * 2 + 10}rpx`,
            }"
          >
            <image
              v-if="thumb"
              :src="thumb"
              class="uni-collapse-item__title-img"
            />
            <text class="uni-collapse-item__title-text">{{ title }}</text>
          </view>
        </slot>
      </view>
      <view
        v-if="showArrow"
        :class="{
          'uni-collapse-item__title-arrow-active': isOpen,
          'uni-collapse-item--animation': showAnimation === true,
        }"
        class="uni-collapse-item__title-arrow"
      >
        <uni-icons
          :color="disabled ? '#ddd' : '#bbb'"
          size="14"
          type="bottom"
        />
      </view>
    </view>
    <view
      class="uni-collapse-item__wrap"
      :class="{ 'is--transition': showAnimation }"
      :style="{ height: isOpen ? 'auto' : 0 }"
    >
      <view
        :id="elId"
        ref="collapse--hook"
        class="uni-collapse-item__wrap-content"
        :class="{
          open: isheight,
          'uni-collapse-item--border': border && isOpen,
        }"
      >
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
// #ifdef APP-NVUE
const dom = weex.requireModule("dom");
// #endif
/**
 * CollapseItem 折叠面板子组件
 * @description 折叠面板子组件
 * @property {String} title 标题文字
 * @property {String} thumb 标题左侧缩略图
 * @property {String} name 唯一标志符
 * @property {Boolean} open = [true|false] 是否展开组件
 * @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
 * @property {String} border = ['auto'|'show'|'none'] 是否显示分隔线
 * @property {Boolean} disabled = [true|false] 是否展开面板
 * @property {Boolean} showAnimation = [true|false] 开启动画
 * @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
 */
export default {
  name: "uniCollapseItem",
  props: {
    // 列表标题
    title: {
      type: String,
      default: "",
    },
    name: {
      type: [Number, String],
      default: "",
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // #ifdef APP-PLUS
    // 是否显示动画,app 端默认不开启动画，卡顿严重
    showAnimation: {
      type: Boolean,
      default: false,
    },
    // #endif
    // #ifndef APP-PLUS
    // 是否显示动画
    showAnimation: {
      type: Boolean,
      default: true,
    },
    // #endif
    // 是否展开
    open: {
      type: Boolean,
      default: false,
    },
    // 缩略图
    thumb: {
      type: String,
      default: "",
    },
    // 标题分隔线显示类型
    titleBorder: {
      type: String,
      default: "auto",
    },
    border: {
      type: Boolean,
      default: true,
    },
    showArrow: {
      type: Boolean,
      default: true,
    },
    leave: {
      type: Number,
      default: 0,
    },
  },
  data() {
    // TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
    const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
    return {
      isOpen: false,
      isheight: null,
      height: 0,
      elId,
      nameSync: 0,
    };
  },
  watch: {
    open(val) {
      this.isOpen = val;
      this.onClick(val, "init");
    },
  },
  updated(e) {
    this.$nextTick(() => {
      this.init(true);
    });
  },
  created() {
    this.collapse = this.getCollapse();
    this.oldHeight = 0;
    this.onClick(this.open, "init");
  },
  // #ifndef VUE3
  // TODO vue2
  destroyed() {
    if (this.__isUnmounted) return;
    this.uninstall();
  },
  // #endif
  // #ifdef VUE3
  // TODO vue3
  unmounted() {
    this.__isUnmounted = true;
    this.uninstall();
  },
  // #endif
  mounted() {
    if (!this.collapse) return;
    if (this.name !== "") {
      this.nameSync = this.name;
    } else {
      this.nameSync = this.collapse.childrens.length + "";
    }
    if (this.collapse.names.indexOf(this.nameSync) === -1) {
      this.collapse.names.push(this.nameSync);
    } else {
      console.warn(`name 值 ${this.nameSync} 重复`);
    }
    if (this.collapse.childrens.indexOf(this) === -1) {
      this.collapse.childrens.push(this);
    }
    this.init();
  },
  methods: {
    init(type) {
      // #ifndef APP-NVUE
      this.getCollapseHeight(type);
      // #endif
      // #ifdef APP-NVUE
      this.getNvueHwight(type);
      // #endif
    },
    uninstall() {
      if (this.collapse) {
        this.collapse.childrens.forEach((item, index) => {
          if (item === this) {
            this.collapse.childrens.splice(index, 1);
          }
        });
        this.collapse.names.forEach((item, index) => {
          if (item === this.nameSync) {
            this.collapse.names.splice(index, 1);
          }
        });
      }
    },
    onClick(isOpen, type) {
      if (this.disabled) return;
      this.isOpen = isOpen;
      if (this.isOpen && this.collapse) {
        this.collapse.setAccordion(this);
      }
      if (type !== "init") {
        this.collapse.onChange(isOpen, this);
      }
    },
    getCollapseHeight(type, index = 0) {
      const views = uni.createSelectorQuery().in(this);
      views
        .select(`#${this.elId}`)
        .fields(
          {
            size: true,
          },
          (data) => {
            // TODO 百度中可能获取不到节点信息 ，需要循环获取
            if (index >= 10) return;
            if (!data) {
              index++;
              this.getCollapseHeight(false, index);
              return;
            }
            // #ifdef APP-NVUE
            this.height = data.height + 1;
            // #endif
            // #ifndef APP-NVUE
            this.height = data.height;
            // #endif
            this.isheight = true;
            if (type) return;
            this.onClick(this.isOpen, "init");
          }
        )
        .exec();
    },
    getNvueHwight(type) {
      const result = dom.getComponentRect(
        this.$refs["collapse--hook"],
        (option) => {
          if (option && option.result && option.size) {
            // #ifdef APP-NVUE
            this.height = option.size.height + 1;
            // #endif
            // #ifndef APP-NVUE
            this.height = option.size.height;
            // #endif
            this.isheight = true;
            if (type) return;
            this.onClick(this.open, "init");
          }
        }
      );
    },
    /**
     * 获取父元素实例
     */
    getCollapse(name = "uniCollapse") {
      let parent = this.$parent;
      let parentName = parent.$options.name;
      while (parentName !== name) {
        parent = parent.$parent;
        if (!parent) return false;
        parentName = parent.$options.name;
      }
      return parent;
    },
  },
};
</script>

<style lang="scss">
.uni-collapse-item {
  /* #ifndef APP-NVUE */
  box-sizing: border-box;

  /* #endif */
  &__title {
    /* #ifndef APP-NVUE */
    display: flex;
    width: 100%;
    box-sizing: border-box;
    /* #endif */
    flex-direction: row;
    align-items: center;
    transition: border-bottom-color 0.3s;

    // transition-property: border-bottom-color;
    // transition-duration: 5s;
    &-wrap {
      width: 100%;
      flex: 1;
    }

    &-box {
      padding: 20rpx 0;
      /* #ifndef APP-NVUE */
      display: flex;
      width: 100%;
      box-sizing: border-box;
      /* #endif */
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      color: #303133;
      font-size: 13px;
      font-weight: 500;
      /* #ifdef H5 */
      cursor: pointer;
      outline: none;

      /* #endif */
      &.is-disabled {
        .uni-collapse-item__title-text {
          color: #999;
        }
      }
    }

    &.is-open {
      border-bottom-color: transparent;
    }

    &-img {
      height: 22px;
      width: 22px;
      margin-right: 10px;
    }

    &-text {
      flex: 1;
      font-size: 14px;
      /* #ifndef APP-NVUE */
      white-space: nowrap;
      color: inherit;
      /* #endif */
      /* #ifdef APP-NVUE */
      lines: 1;
      /* #endif */
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-arrow {
      /* #ifndef APP-NVUE */
      display: flex;
      box-sizing: border-box;
      /* #endif */
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      transform: rotate(0deg);

      &-active {
        transform: rotate(-180deg);
      }
    }
  }

  &__wrap {
    /* #ifndef APP-NVUE */
    will-change: height;
    box-sizing: border-box;
    /* #endif */
    background-color: #fff;
    overflow: hidden;
    position: relative;
    height: 0;

    &.is--transition {
      // transition: all 0.3s;
      transition-property: height, border-bottom-width;
      transition-duration: 0.3s;
      /* #ifndef APP-NVUE */
      will-change: height;
      /* #endif */
    }

    &-content {
      position: absolute;
      font-size: 13px;
      color: #303133;
      // transition: height 0.3s;
      border-bottom-color: transparent;
      border-bottom-style: solid;
      border-bottom-width: 0;

      &.open {
        position: relative;
      }
    }
  }

  &--animation {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
}
</style>