✨(component): 新增Cascader级联选择组件

#I4RSDS

ISSUES CLOSED: #I4RSDS

package/component/src/component/cascader/index.less

@@ -0,0 +1,55 @@
+.layui-cascader {
+  position: relative;
+}
+.layui-cascader .layui-icon-down {
+  transition: all 0.3s ease-in-out;
+  transform: rotate(0);
+}
+.layui-cascader-open .layui-icon-down {
+  transform: rotate(180deg);
+}
+
+.layui-cascader .layui-cascader-panel {
+  position: absolute;
+  margin-top: 2px;
+  z-index: 899;
+  background-color: #fff;
+  box-sizing: border-box;
+  border: 1px solid #e4e7ed;
+  border-radius: 2px;
+  box-shadow: 0 2px 12px #0000001a;
+  line-height: 26px;
+  color: #000c;
+  font-size: 14px;
+  white-space: nowrap;
+  display: none;
+}
+.layui-cascader-menu {
+  border-right: 1px solid var(--global-neutral-color-3);
+  max-height: 360px;
+  overflow-y: scroll;
+}
+.layui-cascader-menu:last-child {
+  border-right: none;
+}
+.layui-cascader-menu-item {
+  min-width: 130px;
+  padding: 5px 15px;
+  box-sizing: border-box;
+  transition: all 0.1s ease-in-out;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 9px;
+}
+.layui-cascader-menu-item:hover {
+  background-color: var(--global-checked-color);
+  color: white;
+}
+.layui-cascader-selected {
+  background-color: var(--global-checked-color);
+  color: white;
+}
+.layui-cascader-open .layui-cascader-panel {
+  display: flex !important;
+}

package/component/src/component/cascader/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

package/component/src/component/cascader/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div
+    class="layui-cascader"
+    :class="[{ 'layui-cascader-open': open }]"
+    ref="cascaderRef"
+  >
+    <div @click="open = !open">
+      <lay-input
+        v-model="displayValue"
+        readonly
+        suffix-icon="layui-icon-down"
+        :placeholder="placeholder"
+        v-if="!slots.default"
+      ></lay-input>
+      <slot v-else></slot>
+    </div>
+
+    <dl class="layui-cascader-panel layui-anim layui-anim-upbit">
+      <template v-for="(itemCol, index) in treeData">
+        <ul
+          class="layui-cascader-menu"
+          :key="'cascader-menu' + index"
+          v-if="itemCol.data.length"
+        >
+          <li
+            class="layui-cascader-menu-item"
+            v-for="(item, i) in itemCol.data"
+            :key="index + i"
+            @click="selectBar(item, i, index)"
+            :class="[
+              {
+                'layui-cascader-selected': itemCol.selectIndex === i,
+              },
+            ]"
+          >
+            {{ item.label }}
+            <i
+              class="layui-icon layui-icon-right"
+              v-if="item.children && item.children.length"
+            ></i>
+          </li>
+        </ul>
+      </template>
+    </dl>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayCascader",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { ref, onMounted, watch, useSlots } from "vue";
+import { onClickOutside } from "@vueuse/core";
+export interface LayCascaderProps {
+  options?: Array<any> | null;
+  modelValue?: string;
+  decollator?: string;
+  placeholder?:string;
+}
+const props = withDefaults(defineProps<LayCascaderProps>(), {
+  options: null,
+  modelValue: "",
+  decollator: "/",
+  placeholder:''
+});
+const emit = defineEmits(["update:modelValue", "change", "clear"]);
+
+onMounted(() => {
+  initTreeData();
+});
+
+watch(
+  () => props.options,
+  () => {
+    initTreeData();
+  }
+);
+
+const treeData = ref<any>([]);
+const initTreeData = () => {
+  let treeLvNum = getMaxFloor(props.options);
+  for (let index = 0; index < treeLvNum; index++) {
+    if (index == 0) {
+      treeData.value[0] = {
+        selectIndex: null,
+        data: findData(props.options, 1),
+      };
+    } else {
+      treeData.value[index] = {
+        selectIndex: null,
+        data: [],
+      };
+    }
+  }
+
+  //数据回显
+  if (props.modelValue) {
+    try {
+      let valueData = props.modelValue.split(props.decollator);
+      let data: any[] = [];
+      for (let index = 0; index < treeData.value.length; index++) {
+        const element = treeData.value[index];
+        const nowValue = valueData[index];
+        for (let i = 0; i < element.length; i++) {
+          const ele = element[i];
+          if (nowValue === ele.value) {
+            data.push(ele);
+            element.selectIndex = i;
+          }
+        }
+      }
+      displayValue.value = data
+        .map((e) => {
+          return e.label;
+        })
+        .join(` ${props.decollator} `);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+};
+
+function getMaxFloor(treeData: any) {
+  let floor = 0;
+  let max = 0;
+  function each(data: any, floor: any) {
+    data.forEach((e: any) => {
+      e.floor = floor;
+      if (floor > max) {
+        max = floor;
+      }
+      if (e.children && e.children.length > 0) {
+        each(e.children, floor + 1);
+      }
+    });
+  }
+  each(treeData, 1);
+  return max;
+}
+function findData(orginData: any, level: number) {
+  let data: any[] = [];
+  for (let i = 0; i < orginData.length; i++) {
+    const element = orginData[i];
+    if (level === 1) {
+      data.push({
+        value: element.value,
+        label: element.label,
+        children: element.children ?? false,
+      });
+    }
+
+    if (level !== 1 && element.children && element.children.length > 0) {
+      findData(element.children, level - 1);
+    }
+  }
+  return data;
+}
+
+const dataContainer = ref<any>([]);
+const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
+  treeData.value[parentIndex].selectIndex = selectIndex;
+  if (item.children) {
+    treeData.value[parentIndex + 1].selectIndex = null;
+    treeData.value[parentIndex + 1].data = findData(item.children, 1);
+  }
+  //把数组里后面的数据清空
+  let nextIndex = parentIndex + 2;
+  for (let index = nextIndex; index < treeData.value.length; index++) {
+    treeData.value[index].selectIndex = null;
+    treeData.value[index].data = [];
+  }
+
+  if (!item.children) {
+    //输入框数据更新
+    let data: never[] = [];
+    function extractData(orginData: any, dataContainer: any, index: number) {
+      const element = orginData[index].data;
+      const selectIndex = orginData[index].selectIndex;
+      const selectData = element[selectIndex];
+      dataContainer.push(selectData);
+      if (selectData.children && selectData.children.length > 0) {
+        extractData(orginData, dataContainer, index + 1);
+      }
+    }
+    extractData(treeData.value, data, 0);
+    displayValue.value = data
+      .map((e: any) => {
+        return e.label;
+      })
+      .join(` ${props.decollator} `);
+    let value = data
+      .map((e: any) => {
+        return e.value;
+      })
+      .join(props.decollator);
+    emit("update:modelValue", value);
+    emit("change", displayValue.value);
+    open.value = false;
+  }
+};
+
+const open = ref<boolean>(false);
+const displayValue = ref<string | number | null>(null);
+const slots = useSlots();
+const cascaderRef = ref<null | HTMLElement>();
+onClickOutside(cascaderRef, () => {
+  open.value = false;
+});
+</script>

package/component/src/index.ts

@@ -85,6 +85,7 @@ import LayUpload from "./component/upload/index";
 import LayRipple from "./component/ripple/index";
 import LayNoticeBar from "./component/noticeBar/index";
 import LayPageHeader from "./component/pageHeader/index";
+import LayCascader from "./component/cascader/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -168,6 +169,7 @@ const components: Record<string, Plugin> = {
   LayRipple,
   LayNoticeBar,
   LayPageHeader,
+  LayCascader,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -258,6 +260,7 @@ export {
   LayRipple,
   LayNoticeBar,
   LayPageHeader,
+  LayCascader,
   install,
 };