Preview Demo

基本使用

测试使用 Element Plus 组件

<template>
    <el-button type="primary">测试按钮</el-button>
</template>

title

component description content

<template>
    <el-button type="primary">测试按钮</el-button>
</template>

Component Form

新增：0

基本使用

foo-2

<template>
    <div class="component-preview">
        <p>Component Form</p>
        <div>
            <span>新增：{{ num }}</span>
            <button @click="addNum">按钮</button>
        </div>
    </div>
</template>

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

const num = ref(0)
const addNum = () => {
    num.value += 2
}
</script>

<style scoped>
.component-preview>p {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

button {
    display: inline-block;
    padding: 0px 16px;
    border-radius: 4px;
    background: var(--vp-button-brand-bg);
    color: var(--vp-button-brand-text);
    border: 1px solid var(--vp-button-brand-border);
    margin-left: 40px;

}
</style>

Component Form

新增：0

title

foo-2

<template>
    <div class="component-preview">
        <p>Component Form</p>
        <div>
            <span>新增：{{ num }}</span>
            <button @click="addNum">按钮</button>
        </div>
    </div>
</template>

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

const num = ref(0)
const addNum = () => {
    num.value += 2
}
</script>

<style scoped>
.component-preview>p {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

button {
    display: inline-block;
    padding: 0px 16px;
    border-radius: 4px;
    background: var(--vp-button-brand-bg);
    color: var(--vp-button-brand-text);
    border: 1px solid var(--vp-button-brand-border);
    margin-left: 40px;

}
</style>

Preview Demo ​

Preview Demo