10. 封装Demo组件

将展示组件示例的代码封装成一个组件，以便重复使用

<template>
    <div class="demo">
          <h2>{{component.__sourceCodeTitle}}</h2>
          <div class="demo-component">
              <component :is="component" />
          </div>
          <div class="demo-actions">
              <Button @click="toggle">查看代码</Button>
          </div>
          <div class="demo-code" v-if="codeVisible">
              <pre class="language-html" v-html="html"></pre>
          </div>
      </div>
</template>
<script lang="ts">
import Button from '../lib/Button.vue'
import 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
import { computed, ref } from 'vue'
const Prism = (window as any).Prism
export default {
    props: {
        component: {
            type: Object
        }
    },
    setup(props){
        const codeVisible = ref(false)
        const html = computed(()=>{
            return Prism.highlight(props.component.__sourceCode,Prism.languages.html, 'html')
        })
        const toggle = () => {
            codeVisible.value = !codeVisible.value
        }
        return {
            Prism,
            html,
            codeVisible,
            toggle
        }
    },
    components: {
        Button
        }
}
</script>

重复使用

<template>
    <h1>Switch 组件示例</h1>
    <Demo :component="Switch1Demo" />
    <Demo :component="Switch2Demo" />    
</template>