fix(tree): [tree, tooltip] fix tree's tooltip's compositions demo (#1103)

* fix(tree): fix tree's tooltip's  compositions demo

* fix(tooltip): fix

* fix(tooltip): fix

* fix(tooltip): fix

* fix(tooltip): fix

* docs(tooltip): fix

examples/sites/demos/pc/app/tooltip/basic-usage.spec.js

@@ -9,8 +9,8 @@ test('测试Tooltip的是否能出现', async ({ page }) => {
   let button = preview.getByRole('button', { name: '上左' })
   let tooltip = page.getByRole('tooltip', { name: 'Top Left 提示文字' })
 
-  await button.hover()
   await page.waitForTimeout(100)
+  await page.mouse.move(600, 300)
   await expect(tooltip).toBeVisible()
 
   // 测试Tooltip的位置是否正确

examples/sites/demos/pc/app/tooltip/content.spec.js

@@ -11,6 +11,7 @@ test('测试插槽', async ({ page }) => {
   const button3 = page.getByRole('button', { name: '校验错误' })
   const tooltip3 = page.getByText('该网段不可用')
 
+  await page.waitForTimeout(10)
   await button1.hover()
   await expect(tooltip1).toBeVisible()
   await page.waitForTimeout(10)

examples/sites/demos/pc/app/tooltip/custom-popper.spec.js

@@ -13,8 +13,11 @@ test('测试是否显示箭头', async ({ page }) => {
   const arrow = tip.locator('div.popper__arrow')
 
   // 测试小箭头
+  await page.waitForTimeout(20)
   await button.hover()
+  await page.waitForTimeout(20)
   await expect(arrow).toHaveCount(1)
+  await page.waitForTimeout(20)
   await arrowSwitch.click()
   await page.waitForTimeout(20)
   await button.hover()

examples/sites/demos/pc/app/tooltip/theme.spec.js

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试tooltip主题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#theme')
+  await page.waitForTimeout(20)
 
   await page.getByRole('button', { name: 'Dark' }).hover()
   await expect(page.getByRole('tooltip', { name: 'dark 提示文字' })).toHaveClass(/is-dark/)

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

@@ -28,10 +28,11 @@
       :show-auxi="showAuxi === 'show'"
     >
       <!-- 屏蔽默认的后缀图标 -->
-      <template #suffix="{ node }"> <div></div> </template>
+      <template #suffix> <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'
@@ -62,9 +63,10 @@ const data = ref([
 ])
 
 function inputChange() {
-  treeRef.value.filter(this.filterText)
+  treeRef.value.filter(filterText.value)
 }
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 function filterNodeMethod(text, data, node) {
   return data.label.includes(text)
 }

examples/sites/demos/pc/app/tree/filter-view.vue

@@ -28,7 +28,7 @@
       :show-auxi="showAuxi === 'show'"
     >
       <!-- 屏蔽默认的后缀图标 -->
-      <template #suffix="{ node }"> <div></div> </template>
+      <template #suffix> <div></div> </template>
     </tiny-tree>
   </div>
 </template>
@@ -74,6 +74,7 @@ export default {
     inputChange() {
       this.$refs.treeRef.filter(this.filterText)
     },
+    // eslint-disable-next-line unused-imports/no-unused-vars
     filterNodeMethod(text, data, node) {
       return data.label.includes(text)
     }

examples/sites/demos/pc/app/tree/radio-composition-api.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable unused-imports/no-unused-vars -->
 <template>
   <div>
     <div class="node-tip">在开发者控制台中查看它的打印信息：</div>
@@ -22,6 +23,7 @@ import { ref } from 'vue'
 import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
 
 const treeRef = ref()
+const defaultRadioKey = ref(['1-1'])
 const data = ref([
   {
     id: '1',
@@ -44,8 +46,6 @@ const data = ref([
 ])
 
 function getChecks() {
-  const currentKey = treeRef.value.getCurrentKey()
-
   // 查询勾选的值
   const checkedKeys = treeRef.value.getCheckedKeys()
   // 查询勾选叶子的值
@@ -59,6 +59,7 @@ function getChecks() {
   // 查询半选的节点数据
   const checkedHalfNodes = treeRef.value.getHalfCheckedNodes()
 
+  // eslint-disable-next-line no-console
   console.log('当前组件的勾选状态为： ', treeRef.value, {
     checkedKeys,
     checkedKeysOnlyLeaf,
@@ -69,12 +70,13 @@ function getChecks() {
   })
 }
 function setCurrentRadio() {
-  this.defaultRadioKey = ['3-1']
-  this.$refs.treeRef.setCurrentRadio()
+  defaultRadioKey.value = ['3-1']
+  treeRef.value.setCurrentRadio()
 }
 
 function checkChange(data, checked, indeterminate) {
-  console.log('checkChange事件：', arguments)
+  // eslint-disable-next-line no-console
+  console.log('checkChange事件：', { data, checked, indeterminate })
 }
 </script>
 

examples/sites/demos/pc/app/tree/radio.vue

@@ -52,8 +52,6 @@ export default {
   },
   methods: {
     getChecks() {
-      const currentKey = this.$refs.treeRef.getCurrentKey()
-
       // 查询勾选的值
       const checkedKeys = this.$refs.treeRef.getCheckedKeys()
       // 查询勾选叶子的值
@@ -67,6 +65,7 @@ export default {
       // 查询半选的节点数据
       const checkedHalfNodes = this.$refs.treeRef.getHalfCheckedNodes()
 
+      // eslint-disable-next-line no-console
       console.log('当前组件的勾选状态为： ', this.$refs.treeRef, {
         checkedKeys,
         checkedKeysOnlyLeaf,
@@ -81,7 +80,8 @@ export default {
       this.$refs.treeRef.setCurrentRadio()
     },
     checkChange(data, checked, indeterminate) {
-      console.log('checkChange事件：', arguments)
+      // eslint-disable-next-line no-console
+      console.log('checkChange事件：', { data, checked, indeterminate })
     }
   }
 }