@ebiz/designer-components 0.1.0 → 0.1.1

package/src/components/EbizTree.vue

@@ -1,153 +1,153 @@
-<template>
-  <t-tree
-    ref="treeRef"
-    v-bind="$attrs"
-    :data="data"
-    :value="modelValue"
-    :expanded="expandedModel"
-    :actived="activedModel"
-    :transition="transition"
-    :disable-check="disableCheck"
-    :keys="keys"
-    @change="handleChange"
-    @expand="handleExpand"
-    @active="handleActive"
-    @select="$emit('select', $event)"
-    @drag-start="$emit('drag-start', $event)"
-    @drag-end="$emit('drag-end', $event)"
-    @drag-over="$emit('drag-over', $event)"
-    @drag-leave="$emit('drag-leave', $event)"
-    @drag-drop="$emit('drag-drop', $event)"
-    @click="$emit('click', $event)"
-    @load="$emit('load', $event)"
-  >
-    <template v-if="$slots.default" #default="slotProps">
-      <slot :node="slotProps.node"></slot>
-    </template>
-    <template v-if="$slots.empty" #empty>
-      <slot name="empty"></slot>
-    </template>
-    <template v-if="$slots.icon" #icon="slotProps">
-      <slot name="icon" :node="slotProps.node"></slot>
-    </template>
-    <template v-if="$slots.label" #label="slotProps">
-      <slot name="label" :node="slotProps.node"></slot>
-    </template>
-    <template v-if="$slots.line" #line="slotProps">
-      <slot name="line" :node="slotProps.node"></slot>
-    </template>
-    <template v-if="$slots.operations" #operations="slotProps">
-      <slot name="operations" :node="slotProps.node"></slot>
-    </template>
-  </t-tree>
-</template>
-
-<script setup>
-import { Tree as TTree } from 'tdesign-vue-next';
-import { computed ,ref} from 'vue';
-
-// 定义组件属性
-const props = defineProps({
-  // 选中值
-  modelValue: {
-    type: Array,
-    default: () => []
-  },
-  // 展开节点
-  expanded: {
-    type: Array,
-    default: () => []
-  },
-  // 激活节点
-  actived: {
-    type: Array,
-    default: () => []
-  },
-  // 数据
-  items: {
-    type: Array,
-    default: () => []
-  },
-  // 是否启用过渡动画
-  transition: {
-    type: Boolean,
-    default: false
-  },
-  // 自定义节点禁用状态，返回true表示禁用
-  disableCheck: {
-    type: Function,
-    default: null
-  },
-  // 自定义节点数据中的字段名称
-  keys: {
-    type: Object,
-    default: () => ({
-      label: 'label',
-      value: 'value',
-      children: 'children'
-    })
-  }
-});
-
-const treeRef = ref();
-// 定义组件事件
-const emit = defineEmits([
-  'update:modelValue', 
-  'update:expanded', 
-  'update:actived', 
-  'change', 
-  'expand', 
-  'active', 
-  'select', 
-  'click', 
-  'load',
-  'drag-start',
-  'drag-end',
-  'drag-over',
-  'drag-leave',
-  'drag-drop'
-]);
-
-// 处理items映射到data
-const data = computed(() => props.items);
-
-// 展开事件
-const expandedModel = computed({
-  get: () => props.expanded,
-  set: (val) => emit('update:expanded', val)
-});
-
-// 激活节点
-const activedModel = computed({
-  get: () => props.actived,
-  set: (val) => emit('update:actived', val)
-});
-
-// 值改变事件
-const handleChange = (val, context) => {
-  emit('update:modelValue', val);
-  emit('change', val, context);
-};
-
-// 节点展开事件
-const handleExpand = (val, context) => {
-  emit('update:expanded', val);
-  emit('expand', val, context);
-};
-
-// 节点激活事件
-const handleActive = (val, context) => {
-  emit('update:actived', val);
-  emit('active', val, context);
-};
-
-defineExpose({
-  treeRef
-});
-</script>
-
-<style>
-.t-tree {
-  width: 100%;
-}
+<template>
+  <t-tree
+    ref="treeRef"
+    v-bind="$attrs"
+    :data="data"
+    :value="modelValue"
+    :expanded="expandedModel"
+    :actived="activedModel"
+    :transition="transition"
+    :disable-check="disableCheck"
+    :keys="keys"
+    @change="handleChange"
+    @expand="handleExpand"
+    @active="handleActive"
+    @select="$emit('select', $event)"
+    @drag-start="$emit('drag-start', $event)"
+    @drag-end="$emit('drag-end', $event)"
+    @drag-over="$emit('drag-over', $event)"
+    @drag-leave="$emit('drag-leave', $event)"
+    @drag-drop="$emit('drag-drop', $event)"
+    @click="$emit('click', $event)"
+    @load="$emit('load', $event)"
+  >
+    <template v-if="$slots.default" #default="slotProps">
+      <slot :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty"></slot>
+    </template>
+    <template v-if="$slots.icon" #icon="slotProps">
+      <slot name="icon" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.label" #label="slotProps">
+      <slot name="label" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.line" #line="slotProps">
+      <slot name="line" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.operations" #operations="slotProps">
+      <slot name="operations" :node="slotProps.node"></slot>
+    </template>
+  </t-tree>
+</template>
+
+<script setup>
+import { Tree as TTree } from 'tdesign-vue-next';
+import { computed ,ref} from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 展开节点
+  expanded: {
+    type: Array,
+    default: () => []
+  },
+  // 激活节点
+  actived: {
+    type: Array,
+    default: () => []
+  },
+  // 数据
+  items: {
+    type: Array,
+    default: () => []
+  },
+  // 是否启用过渡动画
+  transition: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义节点禁用状态，返回true表示禁用
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 自定义节点数据中的字段名称
+  keys: {
+    type: Object,
+    default: () => ({
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    })
+  }
+});
+
+const treeRef = ref();
+// 定义组件事件
+const emit = defineEmits([
+  'update:modelValue', 
+  'update:expanded', 
+  'update:actived', 
+  'change', 
+  'expand', 
+  'active', 
+  'select', 
+  'click', 
+  'load',
+  'drag-start',
+  'drag-end',
+  'drag-over',
+  'drag-leave',
+  'drag-drop'
+]);
+
+// 处理items映射到data
+const data = computed(() => props.items);
+
+// 展开事件
+const expandedModel = computed({
+  get: () => props.expanded,
+  set: (val) => emit('update:expanded', val)
+});
+
+// 激活节点
+const activedModel = computed({
+  get: () => props.actived,
+  set: (val) => emit('update:actived', val)
+});
+
+// 值改变事件
+const handleChange = (val, context) => {
+  emit('update:modelValue', val);
+  emit('change', val, context);
+};
+
+// 节点展开事件
+const handleExpand = (val, context) => {
+  emit('update:expanded', val);
+  emit('expand', val, context);
+};
+
+// 节点激活事件
+const handleActive = (val, context) => {
+  emit('update:actived', val);
+  emit('active', val, context);
+};
+
+defineExpose({
+  treeRef
+});
+</script>
+
+<style>
+.t-tree {
+  width: 100%;
+}
 </style>