vue实现浏览器代码在线编辑预览

小灰灰 2022-10-07 06:49 141阅读 0赞

## 效果图如下： ##

**右边可输入代码， 左边可时时查看效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]

## 实现如下 ##

**参照以下 CodeSandbox 演示**

[ ![Vue Antd Template][] ][_Vue Antd Template_]

## 使用 codeopen.vue 组件： ##

<codeopen title="Conditional rendering" slug="oNXdbpB" tab="js,result" />

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70 1]

## codeopen.vue 组件： ##

<template>
      <p
        class="codepen"
        :data-theme-id="theme"
        :data-preview="preview || null"
        :data-editable="editable || null"
        :data-height="height"
        :data-default-tab="tab"
        :data-user="user"
        :data-slug-hash="slug"
        :data-pen-title="title"
        :data-embed-version="version"
        :style="`height: ${height}px`"
      >
        <span
          >See the Pen <a :href="href">{ {  title }}</a> by { {  name || user }} (<a
            :href="`https://codepen.io/${user}`"
            >@{ {  user }}</a
          >) on <a href="https://codepen.io">CodePen</a>.</span
        >
      </p>
    </template>
    
    <script>
    export default { 
      props: { 
        title: { 
          type: String,
          default: null,
          required: true,
        },
    
        slug: { 
          type: String,
          default: null,
          required: true,
        },
    
        tab: { 
          type: String,
          default: "result",
        },
    
        team: { 
          type: Boolean,
          default: true,
        },
    
        user: { 
          type: String,
          default: "Vue",
        },
    
        name: { 
          type: String,
          default: null,
        },
    
        height: { 
          type: Number,
          default: 300,
        },
    
        theme: { 
          type: String,
          default: "39028",
        },
    
        preview: { 
          type: Boolean,
          default: true,
        },
    
        editable: { 
          type: Boolean,
          default: true,
        },
    
        version: { 
          type: String,
          default: null,
        },
      },
      mounted() { 
        const codepenScript = document.createElement("script");
        codepenScript.setAttribute(
          "src",
          "https://static.codepen.io/assets/embed/ei.js"
        );
        codepenScript.async = true;
        this.$el.appendChild(codepenScript);
      },
      computed: { 
        href() { 
          return `https://codepen.io/${ this.team ? "team" : ""}${ this.user}/pen/${ this.slug }`;
        },
      },
    };
    </script>
    
    <style lang="scss">
    .codepen { 
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid;
      margin: 1em 0;
      padding: 1em;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]: /images/20221005/095be90ffd4e411a961250798a49dd23.png
[Vue Antd Template]: https://codesandbox.io/static/img/play-codesandbox.svg
[_Vue Antd Template_]: https://codesandbox.io/s/blue-rgb-3ri87
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70 1]: /images/20221005/4882b756c18b4bb1b60fcd5a134f4ac2.png