0 Review of last issue

Last time we improved the styling of the Tree component and added click highlighting, disable expansion/collapse, disable selection, and more.

A small flaw in the use-highlight function was also identified, which was quickly optimized by Pineaple.

Improvement plan: gitee.com/devui/vue-d…

1 Customize ICONS

1.1 Defining the ICON slot

Think before you write:

Where should we write our slots?

RenderIcon method in tree.tsx

const renderIcon = (item: TreeItem) => { return item.children ? <span class={item.disabletoggle && 'toggle-disabled'} onClick={() => toggle(item)}> {// Add slot logic ctx.slots.node? ctx.slots.node(item) : item.open ? <IconOpen class='mr-xs' /> : <IconClose class='mr-xs' /> } </span> : <Indent /> }Copy the code

IconOpen.tsx

const IconOpen = () = > {
  return (
    <svg
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="4160"
      width="12"
      height="12"
    >
      <path d="M64 320l448 448 448-448z" fill="#8C92A4" p-id="4161"></path>
    </svg>)}export default IconOpen
Copy the code

IconClose.tsx

const IconClose = () = > {
  return (
    <svg
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="4361"
      width="12"
      height="12"
    >
      <path d="M256 64l448 448-448 448z" fill="#8C92A4" p-id="4362"></path>
    </svg>)}export default IconClose
Copy the code

1.2 Using slots

Compares the writing method used by JSX and SFC slots.

JSX:

<d-tree data={data}>
  {{
    node: (node: TreeItem) = > (node.open ? <IconOpen /> : <IconClose />),
  }}
</d-tree>
Copy the code

SFC:

<d-tree :data="data">
  <template #node="node">
    <IconOpen v-if="node.open" />
    <IconClose v-else />
  </template>
</d-tree>
Copy the code

The effect is as follows:

2 Node Selection

2.1 Added checkable and Checked

tree-types.ts

Export const treeProps = {data: {type: Array as PropType<TreeData>, default: () => [],}, // Add checkable: {type: Boolean, default: false }, } as const export interface TreeItem { label: string children? : TreeData open? : boolean disableToggle? : boolean, checked? : Boolean, // add [key: string]: any}Copy the code

2.2 Adding Checkbox Components

tree.tsx

const { data, checkable } = toRefs(props)
Copy the code

RenderNode method in tree.tsx

{renderIcon(item)} // Add {checkable. Value && <d-checkbox v-model={item.checked} />} <span class={['devui-tree-node__title', disabled && 'select-disabled']}> { label } </span>Copy the code

2.3 configuration checkable

// Add the 'checkable={true}' argument
<d-tree data={data} checkable={true} > {{icon: (node: TreeItem) = > (node.open ? <IconOpen /> : <IconClose />),
  }}
</d-tree>
Copy the code

The effect is as follows: