Collapse 折叠面板 #

<template>
    <n-collapse v-model:activeKey="activeKey">
        <n-collapse-item name="1" header="This is item header 1">
            <p>{{ text }}</p>
        </n-collapse-item>
        <n-collapse-item name="2" header="This is item header 2">
            <p>{{ text }}</p>
        </n-collapse-item>
        <n-collapse-item name="3" header="This is item header 3" collapsible="disabled">
            <p>{{ text }}</p>
        </n-collapse-item>
    </n-collapse>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
    setup() {
        const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
        const activeKey = ref(['1']);

        watch(activeKey, val => {
            console.log(val);
        });

        return {
            text,
            activeKey,
        };
    },
});
</script>

<template>
    <div class="demo-collapse">
        <n-collapse v-model="activeName" accordion>
            <n-collapse-item header="Consistency" name="1">
                <div>
                    Consistent with real life: in line with the process and logic of real life, and
                    comply with languages and habits that the users are used to;
                </div>
                <div>
                    Consistent within interface: all elements should be consistent, such as: design
                    style, icons and texts, position of elements, etc.
                </div>
            </n-collapse-item>
            <n-collapse-item header="Feedback" name="2">
                <div>
                    Operation feedback: enable the users to clearly perceive their operations by
                    style updates and interactive effects;
                </div>
                <div>
                    Visual feedback: reflect current state by updating or rearranging elements of
                    the page.
                </div>
            </n-collapse-item>
            <n-collapse-item header="Efficiency" name="3">
                <div>Simplify the process: keep operating process simple and intuitive;</div>
                <div>
                    Definite and clear: enunciate your intentions clearly so that the users can
                    quickly understand and make decisions;
                </div>
                <div>
                    Easy to identify: the interface should be straightforward, which helps the users
                    to identify and frees them from memorizing and recalling.
                </div>
            </n-collapse-item>
            <n-collapse-item header="Controllability" name="4">
                <div>
                    Decision making: giving advices about operations is acceptable, but do not make
                    decisions for the users;
                </div>
                <div>
                    Controlled consequences: users should be granted the freedom to operate,
                    including canceling, aborting or terminating current operation.
                </div>
            </n-collapse-item>
        </n-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeName = ref('1');
</script>