暂存-级联选项

 

<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="step-one-form" v-show="currentStep === 2">
    <div ref="dropdownRef">
      <div
        class="cascade-input"
        @click="toggleDropdown"
        :class="{ 'is-active': isDropdownVisible }"
      >
        <!-- <span v-if="selectedLabels.length">{{
        selectedLabels.join(" -> ")
      }}</span> -->
        <span class="cascade_choose">请选择</span>
        <!-- <i class="arrow-icon" :class="{ 'is-reverse': isDropdownVisible }">▼</i> -->
        <!-- <el-icon v-if="isDropdownVisible"><ArrowUp /></el-icon>-->
        <el-icon :class="{ 'is-rotate': isDropdownVisible }" class="down"><ArrowDown /></el-icon>
      </div>
      <div class="cascade-dropdown" v-if="isDropdownVisible">
        <div style="display: flex">
          <ul>
            <li
              class="cascade_item"
              v-for="(item, index) in cascadeType"
              :key="index"
              @click="chooseType(index)"
              :class="{ active: chooseTypeIndex == index }"
            >
              <span class="cascade_item_name">{{ item }}</span
              ><span class="cascade_item_name">
                <el-icon><ArrowRight /></el-icon>
              </span>
            </li>
          </ul>
          <div class="choose" v-show="isShowTwoMenu">
            <div class="choose_header">
              <ul>
                <li
                  v-for="(item, index) in MustList"
                  @click="changeMust(index)"
                  :key="index"
                  :class="{ 'is-must': isMust == index }"
                  >{{ item }}</li
                >
              </ul>
            </div>
            <div class="choose_content">
              <ul>
                <li class="is-choose">客户名称</li>
                <li>电活</li>
              </ul>
            </div>
            <div class="choose_footer"> 新增自定义字段 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown, ArrowRight } from "@element-plus/icons-vue"

const props = defineProps({
  currentStep: {
    type: Number,
    default: 1
  }
})

/**
 * 切换
 */
const isDropdownVisible = ref(false)

const cascadeType = ref(["客户", "联系人", "跟进记录"])
const toggleDropdown = () => {
  isDropdownVisible.value = !isDropdownVisible.value
  if (!isDropdownVisible.value) {
    isShowTwoMenu.value = false
    chooseTypeIndex.value = null
  }
}

// const dropdownRef = ref(null)
// const handleClickOutside = (event) => {
//   if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
//     isDropdownVisible.value = false
//   }
// }

// onMounted(() => {
//   debugger
//   document.addEventListener("click", handleClickOutside)
// })

// onBeforeUnmount(() => {
//   document.removeEventListener("click", handleClickOutside)
// })

//切换类型
const chooseTypeIndex = ref<any>(null)
//展示二级菜单
const isShowTwoMenu = ref(false)

const chooseType = (index: any) => {
  chooseTypeIndex.value = index
  isShowTwoMenu.value = true
}

// 切换必须非必选
const isMust = ref(0)
const MustList = ref(["必须", "非必须"])
const changeMust = (index) => {
  isMust.value = index
}
</script>

<style scoped lang="scss">
.cascade-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .cascade_choose {
    color: #333333;
    font-size: 16px;
    font-weight: 400;
  }
  /* after伪元素 */
  // &::after {
  //   position: absolute;
  //   top: 12px;
  //   right: 12px;
  //   content: "";
  //   width: 8px;
  //   height: 8px;
  //   border-right: 2px solid #000;
  //   border-bottom: 2px solid #000;
  //   transform: rotate(45deg);
  //   /* 添加过渡 */
  //   transition: all 0.4s;
  // }
  // &:hover::after {
  //   transform: rotate(225deg);
  // }
}
.cascade-input.is-active {
  border-color: #409eff;
}
.down {
  transition: all 0.4s;
}
.is-rotate {
  transform: rotate(180deg);
}
.cascade-dropdown {
  display: inline-block;
  box-shadow: 0 2px 9px 0 #c8c9cc80;
  height: 291px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #ebedf0;
  border-radius: 4px;
  margin-top: 4px;
  .active {
    background: #f7f8fa;
  }
  .cascade_item {
    width: 240px;
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12px;
    cursor: pointer;
    .cascade_item_name {
      color: #323233;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .choose {
    width: 240px;
    height: 291px;
    border-left: 1px solid #dcdfe6;
    position: relative;
    .choose_header {
      width: 100%;
      ul {
        display: flex;
        height: 36px;
        line-height: 36px;
        border-bottom: 1px solid #dedede;
        box-sizing: border-box;
        padding-left: 10px;
        li {
          margin-right: 20px;
          color: #323233;
          font-size: 14px;
          font-weight: 500;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .is-must {
        color: #477fff;
        border-bottom: 1px solid #477fff;
      }
    }
    .choose_content {
      // padding-left: 12px;
      ul {
        li {
          height: 32px;
          line-height: 32px;
          padding-left: 12px;
        }
        .is-choose {
          background: #f7f8fa;
        }
      }
    }
    .choose_footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 92%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-top: 1px solid #dcdfe6;
      color: #477fff;
      font-size: 14px;
      font-weight: 400;
      margin: 0px 10px;
    }
  }
}
</style>