自定义一个 组件，通过 封装为 hook, 在使用的时候不需要再次定义 toggle 变量。

需要注意的是，在 jsx 和 h 函数 调用组件的区别，jsx 中 绑定 v-model 变量 需要 <ToggleMore value={toggle.value} onUpdate:modelValue={() => toggle.value = !toggle.value} />;
而 h 函数则需要 在 props 参数中 定义 'onUpdate:modelValue': () => toggle.value = !toggle.value 回调

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script setup lang='ts'>
import {useToggle, useToggleMoreHook} from './useToggle.ts'

const [ more, ToggleMore] = useToggle
const [ more2, ToggleMore2] = useToggle
</script>
<template>

<p v-if='more'>这是更多的内容</p>
<ToggleMore />

<p v-if='more2'>这是更多的内容222</p>
<ToggleMore2 />

</template>

组件定义

首先，定义一个 toggle 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup lang="tsx">
import {h} from 'vue'
import {Link} from "@arco-design/web-vue";
import {IconDoubleDown, IconDoubleUp} from "@arco-design/web-vue/es/icon";
const moreSearchParams = defineModel()

function ToggleMore() {
  return h(Link, {
    type: 'text',
    onClick: () => {
      moreSearchParams.value = !moreSearchParams.value
    }
  }, [
    moreSearchParams.value ? h(IconDoubleDown) : h(IconDoubleUp)
  ])
}
</script>
<template><ToggleMore/></template>

封装为 hook

两种方式，通过 jsx 语法封装，或者通过 h 函数来封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import {ref, h} from "vue";
import ToggleMore from "./toggle-more.vue";

function useToggleJsxHook() {
    const toggle = ref(true)
    return [
        toggle,
        <ToggleMore value={toggle.value} onUpdate:modelValue={() => toggle.value = !toggle.value}  />
    ]
}

function useToggleHook() {
    const toggle = ref(true)
    return [
        toggle,
        h(ToggleMore, {
            value: toggle.value,
            'onUpdate:modelValue': () => toggle.value = !toggle.value
        })
    ]
}

export {
    useToggleJsxHook,
    useToggleHook
}

github 地址