vitepress-demo-preview

Preview By Component Form

Component Preview

Preview By Component Form

Component Form

新增：0

<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 By Custom Container Form

Container Preview

Preview By Custom Container Form

Container Form

新增：0

<template>
  <div class="container-preview">
    <p>Container 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>
  .container-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 TSX Component By Custom Container Form

Container Preview

Preview TSX Component By Custom Container Form

Container Form

新增：0

import { defineComponent, ref } from 'vue'
import './ContainerTsxPreview.css'

export default defineComponent({
  setup() {
    const num = ref(0)
    const addNum = () => {
      num.value += 2
    }
    return () => (
      <>
        <div class="container-preview">
          <p>Container Form</p>
          <div>
            <span>新增：{num.value}</span>
            <button onClick={addNum}>按钮</button>
          </div>
        </div>
      </>
    )
  }
})