我创建了一个简单的“more-less text”组件,它基于 Tailwind hidden 类和绑定的 more 变量。代码如下:
<!-- More.vue -->
<template>
<section :class="{ hidden: more }">
<slot /><!-- long content will be inside -->
<p class="cursor-pointer" @click="toggle"> less </p>
</section>
<p :class="{ hidden: !more }" class="cursor-pointer" @click="toggle"> more </p>
</template>
<script setup>
let more = ref(true);
function toggle() {
more = !more;
console.log(more); // true, false - as expected
}
</script>
该组件在其他地方使用如下:
<template>
Always visible content.
<More>Some long content with toggled visibility.</More>
</template>
我看到正确的控制台输出然后进行测试。但其余“更多”内容部分并未出现。怎么了?