wz-element-ui v0.0.4

wz-element-ui

一个简单的组件库,需要安装Vue3+和element-plus

Project Install

npm install wz-element-ui

Start Using

main.js

import WzUI from "wz-element-ui";
const app = createApp(App)

app.use(WzUI);

app.mount('#app')

App.vue

//带节点过滤的树形菜单
<template>
  <div class="box">
    <WzTree
      :size="''"
      :data="data"
      :defaultProps="defaultProps"
      :placeholder="'筛选'"
      :showCheckbox="true"
      :checkStrictly="true"
      highlight-current
      :draggable="true"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :defaultExpandAll="true"
      @handleDragStart="handleDragStart"
      @handleDragEnter="handleDragEnter"
      @handleDragLeave="handleDragLeave"
      @handleDragOver="handleDragOver"
      @handleDragEnd="handleDragEnd"
      @handleDrop="handleDrop"
      @handleCheckChange="handleCheckChange"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

const data = ref([
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
]);

const defaultProps = {
  children: "children",
  label: "label",
};

const handleDragStart = (node, ev) => {
  console.log("drag start", node);
};
const handleDragEnter = (draggingNode, dropNode, ev) => {
  console.log("tree drag enter:", dropNode.label);
};
const handleDragLeave = (draggingNode, dropNode, ev) => {
  console.log("tree drag leave:", dropNode.label);
};
const handleDragOver = (draggingNode, dropNode, ev) => {
  console.log("tree drag over:", dropNode.label);
};
const handleDragEnd = (draggingNode, dropNode, dropType, ev) => {
  console.log("tree drag end:", dropNode && dropNode.label, dropType);
};
const handleDrop = (draggingNode, dropNode, dropType, ev) => {
  console.log("tree drop:", dropNode.label, dropType);
};
const allowDrop = (draggingNode, dropNode, type) => {
  if (dropNode.data.label === "Level two 3-1") {
    return type !== "inner";
  } else {
    return true;
  }
};
const allowDrag = (draggingNode) => {
  return !draggingNode.data.label.includes("Level three 3-1-1");
};

const handleCheckChange = (data, checked, indeterminate) => {
  console.log(data, checked, indeterminate);
};
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  height: auto;
  border: 5px solid #f00;
  border-radius: 5px;
}
</style>