@opentiny/vue-docs 2.1.10 → 2.2.0

package/demos/pc/app/tree/expand-control-composition-api.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="expand-demo">
+    <div>
+      <div class="tip">默认展开全部，且点击任意地方展开节点</div>
+      <div class="tip">
+        <tiny-button @click="toggleAll">切换全部展开收起</tiny-button>
+      </div>
+      <tiny-tree
+        ref="tree1Ref"
+        :data="data"
+        default-expand-all
+        @node-expand="nodeExpand"
+        @node-collapse="nodeCollapse"
+      ></tiny-tree>
+    </div>
+    <div style="margin-left: 30px">
+      <div class="tip">默认展开节点2，仅点击图标才展开节点</div>
+      <div class="tip">
+        <tiny-button @click="expandHlNode">展开高亮</tiny-button>
+        <tiny-button @click="collapseHlNode">收起高亮</tiny-button>
+      </div>
+      <tiny-tree
+        ref="tree2Ref"
+        :data="data"
+        node-key="id"
+        :default-expanded-keys="['2']"
+        :current-node-key="'2'"
+        :expand-on-click-node="false"
+      ></tiny-tree>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
+
+const data = ref([
+  {
+    id: '1',
+    label: '数据 1',
+    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+  },
+  {
+    id: '2',
+    label: '数据 2',
+    children: [
+      { id: '2-1', label: '数据 2-1' },
+      { id: '2-2', label: '数据 2-2' }
+    ]
+  },
+  {
+    id: '3',
+    label: '数据 3',
+    children: [{ id: '3-1', label: '数据 3-1' }]
+  }
+])
+const isExpandAll = ref(true)
+const tree1Ref = ref()
+const tree2Ref = ref()
+
+function toggleAll() {
+  isExpandAll.value = !isExpandAll.value
+  tree1Ref.value.expandAllNodes(isExpandAll.value)
+}
+function expandHlNode() {
+  const data = tree2Ref.value.getCurrentNode()
+  const node = tree2Ref.value.getNode(data.id)
+  node.expand()
+}
+function collapseHlNode() {
+  const data = tree2Ref.value.getCurrentNode()
+  const node = tree2Ref.value.getNode(data.id)
+  node.collapse()
+}
+function nodeExpand(data, node, vm) {
+  console.log('展开节点：', { data, node, vm })
+}
+function nodeCollapse(data, node, vm) {
+  console.log('收起节点：', { data, node, vm })
+}
+</script>
+
+<style scoped>
+.expand-demo {
+  display: flex;
+  margin: 16px;
+}
+.expand-demo .tiny-tree {
+  flex: 1;
+}
+
+.tip {
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+</style>

package/demos/pc/app/tree/expand-control.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('tree组件基本使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree#basic-usage')
+
+  const tree = page.locator('#preview .tiny-tree')
+  await tree.getByText('一级 1').click()
+  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
+  await page.getByText('二级 1-1').click()
+  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
+  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
+  await page
+    .getByRole('treeitem', { name: '一级 1' })
+    .first()
+    .locator('div')
+    .filter({ hasText: '一级 1' })
+    .first()
+    .click()
+  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
+  await page.locator('.tiny-modal__box').first().click()
+})

package/demos/pc/app/tree/expand-control.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="expand-demo">
+    <div>
+      <div class="tip">默认展开全部，且点击任意地方展开节点</div>
+      <div class="tip">
+        <tiny-button @click="toggleAll">切换全部展开收起</tiny-button>
+      </div>
+      <tiny-tree
+        ref="tree1Ref"
+        :data="data"
+        default-expand-all
+        @node-expand="nodeExpand"
+        @node-collapse="nodeCollapse"
+      ></tiny-tree>
+    </div>
+    <div style="margin-left: 30px">
+      <div class="tip">默认展开节点2，仅点击图标才展开节点</div>
+      <div class="tip">
+        <tiny-button @click="expandHlNode">展开高亮</tiny-button>
+        <tiny-button @click="collapseHlNode">收起高亮</tiny-button>
+      </div>
+      <tiny-tree
+        ref="tree2Ref"
+        :data="data"
+        node-key="id"
+        :default-expanded-keys="['2']"
+        :current-node-key="'2'"
+        :expand-on-click-node="false"
+      ></tiny-tree>
+    </div>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tree, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTree: Tree,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      isExpandAll: true,
+      data: [
+        {
+          id: '1',
+          label: '数据 1',
+          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+        },
+        {
+          id: '2',
+          label: '数据 2',
+          children: [
+            { id: '2-1', label: '数据 2-1' },
+            { id: '2-2', label: '数据 2-2' }
+          ]
+        },
+        {
+          id: '3',
+          label: '数据 3',
+          children: [{ id: '3-1', label: '数据 3-1' }]
+        }
+      ]
+    }
+  },
+  methods: {
+    toggleAll() {
+      this.isExpandAll = !this.isExpandAll
+      this.$refs.tree1Ref.expandAllNodes(this.isExpandAll)
+    },
+    expandHlNode() {
+      const data = this.$refs.tree2Ref.getCurrentNode()
+      const node = this.$refs.tree2Ref.getNode(data.id)
+      node.expand()
+    },
+    collapseHlNode() {
+      const data = this.$refs.tree2Ref.getCurrentNode()
+      const node = this.$refs.tree2Ref.getNode(data.id)
+      node.collapse()
+    },
+    nodeExpand(data, node, vm) {
+      console.log('展开节点：', { data, node, vm })
+    },
+    nodeCollapse(data, node, vm) {
+      console.log('收起节点：', { data, node, vm })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.expand-demo {
+  display: flex;
+  margin: 16px;
+}
+.expand-demo .tiny-tree {
+  flex: 1;
+}
+
+.tip {
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+</style>

package/demos/pc/app/tree/filter-view-composition-api.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div class="option-row">
+      <span> 视图：</span>
+      <tiny-radio-group v-model="viewType">
+        <tiny-radio label="tree">树视图 tree</tiny-radio>
+        <tiny-radio label="plain">平铺视图 plain</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 平铺视图中是否显示辅助信息：</span>
+      <tiny-radio-group v-model="showAuxi">
+        <tiny-radio label="show"> 显示 </tiny-radio>
+        <tiny-radio label="hide"> 隐藏 </tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 搜索值：</span>
+      <tiny-input v-model="filterText" @input="inputChange"></tiny-input>
+    </div>
+
+    <tiny-tree
+      ref="treeRef"
+      :data="data"
+      :view-type="viewType"
+      :filter-node-method="filterNodeMethod"
+      default-expand-all
+      :show-auxi="showAuxi === 'show'"
+    >
+      <!-- 屏蔽默认的后缀图标 -->
+      <template #suffix="{ node }"> <div></div> </template>
+    </tiny-tree>
+  </div>
+</template>
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Tree as TinyTree, RadioGroup as TinyRadioGroup, Radio as TinyRadio, Input as TinyInput } from '@opentiny/vue'
+
+const treeRef = ref()
+const viewType = ref('tree')
+const showAuxi = ref('hide')
+const filterText = ref('')
+const data = ref([
+  {
+    id: '1',
+    label: '数据 1',
+    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+  },
+  {
+    id: '2',
+    label: '数据 2',
+    children: [
+      { id: '2-1', label: '数据 2-1' },
+      { id: '2-2', label: '数据 2-2' }
+    ]
+  },
+  {
+    id: '3',
+    label: '数据 3',
+    children: [{ id: '3-1', label: '数据 3-1' }]
+  }
+])
+
+function inputChange() {
+  treeRef.value.filter(this.filterText)
+}
+
+function filterNodeMethod(text, data, node) {
+  return data.label.includes(text)
+}
+</script>
+
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.option-row > span {
+  font-size: 18px;
+}
+.tiny-input {
+  width: 150px;
+}
+</style>

package/demos/pc/app/tree/filter-view.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('tree组件基本使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree#basic-usage')
+
+  const tree = page.locator('#preview .tiny-tree')
+  await tree.getByText('一级 1').click()
+  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
+  await page.getByText('二级 1-1').click()
+  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
+  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
+  await page
+    .getByRole('treeitem', { name: '一级 1' })
+    .first()
+    .locator('div')
+    .filter({ hasText: '一级 1' })
+    .first()
+    .click()
+  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
+  await page.locator('.tiny-modal__box').first().click()
+})

package/demos/pc/app/tree/filter-view.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="option-row">
+      <span> 视图：</span>
+      <tiny-radio-group v-model="viewType">
+        <tiny-radio label="tree">树视图 tree</tiny-radio>
+        <tiny-radio label="plain">平铺视图 plain</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 平铺视图中是否显示辅助信息：</span>
+      <tiny-radio-group v-model="showAuxi">
+        <tiny-radio label="show"> 显示 </tiny-radio>
+        <tiny-radio label="hide"> 隐藏 </tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 搜索值：</span>
+      <tiny-input v-model="filterText" @input="inputChange"></tiny-input>
+    </div>
+
+    <tiny-tree
+      ref="treeRef"
+      :data="data"
+      :view-type="viewType"
+      :filter-node-method="filterNodeMethod"
+      default-expand-all
+      :show-auxi="showAuxi === 'show'"
+    >
+      <!-- 屏蔽默认的后缀图标 -->
+      <template #suffix="{ node }"> <div></div> </template>
+    </tiny-tree>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tree, RadioGroup, Radio, Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTree: Tree,
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup,
+    TinyInput: Input
+  },
+  data() {
+    return {
+      viewType: 'tree',
+      showAuxi: 'hide',
+      filterText: '',
+      data: [
+        {
+          id: '1',
+          label: '数据 1',
+          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+        },
+        {
+          id: '2',
+          label: '数据 2',
+          children: [
+            { id: '2-1', label: '数据 2-1' },
+            { id: '2-2', label: '数据 2-2' }
+          ]
+        },
+        {
+          id: '3',
+          label: '数据 3',
+          children: [{ id: '3-1', label: '数据 3-1' }]
+        }
+      ]
+    }
+  },
+  methods: {
+    inputChange() {
+      this.$refs.treeRef.filter(this.filterText)
+    },
+    filterNodeMethod(text, data, node) {
+      return data.label.includes(text)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.option-row > span {
+  font-size: 18px;
+}
+.tiny-input {
+  width: 150px;
+}
+</style>

package/demos/pc/app/tree/icons-composition-api.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="icon-demo">
+    <tiny-tree :data="data" :icon="icon"></tiny-tree>
+    <tiny-tree
+      :data="data"
+      :expandIcon="expandIcon"
+      expandIconColor="red"
+      :shrinkIcon="shrinkIcon"
+      shrinkIconColor="blue"
+    ></tiny-tree>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Tree as TinyTree } from '@opentiny/vue'
+import { iconPlusSquare, iconMinusSquare, iconRightO } from '@opentiny/vue-icon'
+
+const icon = iconRightO()
+const shrinkIcon = iconMinusSquare()
+const expandIcon = iconPlusSquare()
+const data = ref([
+  {
+    id: '1',
+    label: '数据 1',
+    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+  },
+  {
+    id: '2',
+    label: '数据 2',
+    children: [
+      { id: '2-1', label: '数据 2-1' },
+      { id: '2-2', label: '数据 2-2' }
+    ]
+  },
+  {
+    id: '3',
+    label: '数据 3',
+    children: [{ id: '3-1', label: '数据 3-1' }]
+  }
+])
+</script>
+
+<style scoped>
+.icon-demo {
+  display: flex;
+  margin: 16px;
+}
+.icon-demo .tiny-tree {
+  flex: 1;
+}
+</style>

package/demos/pc/app/tree/icons.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('tree组件基本使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree#basic-usage')
+
+  const tree = page.locator('#preview .tiny-tree')
+  await tree.getByText('一级 1').click()
+  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
+  await page.getByText('二级 1-1').click()
+  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
+  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
+  await page
+    .getByRole('treeitem', { name: '一级 1' })
+    .first()
+    .locator('div')
+    .filter({ hasText: '一级 1' })
+    .first()
+    .click()
+  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
+  await page.locator('.tiny-modal__box').first().click()
+})

package/demos/pc/app/tree/icons.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="icon-demo">
+    <tiny-tree :data="data" :icon="icon"></tiny-tree>
+    <tiny-tree
+      :data="data"
+      :expandIcon="expandIcon"
+      expandIconColor="red"
+      :shrinkIcon="shrinkIcon"
+      shrinkIconColor="blue"
+    ></tiny-tree>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tree } from '@opentiny/vue'
+import { iconPlusSquare, iconMinusSquare, iconRightO } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTree: Tree
+  },
+  data() {
+    return {
+      icon: iconRightO(),
+      shrinkIcon: iconMinusSquare(),
+      expandIcon: iconPlusSquare(),
+      data: [
+        {
+          id: '1',
+          label: '数据 1',
+          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+        },
+        {
+          id: '2',
+          label: '数据 2',
+          children: [
+            { id: '2-1', label: '数据 2-1' },
+            { id: '2-2', label: '数据 2-2' }
+          ]
+        },
+        {
+          id: '3',
+          label: '数据 3',
+          children: [{ id: '3-1', label: '数据 3-1' }]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.icon-demo {
+  display: flex;
+  margin: 16px;
+}
+.icon-demo .tiny-tree {
+  flex: 1;
+}
+</style>

package/demos/pc/app/tree/lazy-composition-api.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <tiny-tree lazy :load="load" :afterLoad="afterLoad" @load-data="loadedData"></tiny-tree>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Tree as TinyTree } from '@opentiny/vue'
+
+function load(node, resolve) {
+  // node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
+  console.log('即将加载节点下级数据：', node)
+
+  // 通过 level =0 来识别第一次加载
+  if (node.level === 0) {
+    resolve([
+      { id: '1', label: '#数据 1' },
+      { id: '2', label: '#数据 2' },
+      { id: '3', label: '#数据 3' }
+    ])
+  }
+  // 通过 data 有值，识别是用户点击后的加载
+  else if (node.data) {
+    const parentId = node.data.id
+    const parentLabel = node.data.label
+
+    const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+      id: `${parentId}-${num}`,
+      label: `${parentLabel}-${num}`,
+      disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+      isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+    }))
+
+    // 模拟异步返回
+    setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+  }
+}
+function afterLoad(data) {
+  console.log('afterLoad属性触发：', data)
+}
+function loadedData(data) {
+  console.log('load-data 事件触发：', data)
+}
+</script>

package/demos/pc/app/tree/lazy.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('tree组件基本使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree#basic-usage')
+
+  const tree = page.locator('#preview .tiny-tree')
+  await tree.getByText('一级 1').click()
+  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
+  await page.getByText('二级 1-1').click()
+  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
+  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
+  await page
+    .getByRole('treeitem', { name: '一级 1' })
+    .first()
+    .locator('div')
+    .filter({ hasText: '一级 1' })
+    .first()
+    .click()
+  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
+  await page.locator('.tiny-modal__box').first().click()
+})

package/demos/pc/app/tree/lazy.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tiny-tree lazy :load="load" :afterLoad="afterLoad" @load-data="loadedData"></tiny-tree>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tree } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTree: Tree
+  },
+  methods: {
+    load(node, resolve) {
+      // node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
+      console.log('即将加载节点下级数据：', node)
+
+      // 通过 level =0 来识别第一次加载
+      if (node.level === 0) {
+        resolve([
+          { id: '1', label: '#数据 1' },
+          { id: '2', label: '#数据 2' },
+          { id: '3', label: '#数据 3' }
+        ])
+      }
+      // 通过 data 有值，识别是用户点击后的加载
+      else if (node.data) {
+        const parentId = node.data.id
+        const parentLabel = node.data.label
+
+        const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+          id: `${parentId}-${num}`,
+          label: `${parentLabel}-${num}`,
+          disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+          isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+        }))
+
+        // 模拟异步返回
+        setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+      }
+    },
+    afterLoad(data) {
+      console.log('afterLoad属性触发：', data)
+    },
+    loadedData(data) {
+      console.log('load-data 事件触发：', data)
+    }
+  }
+}
+</script>