QingWei-Li / vuep

🎡 A component for rendering Vue components with live editor and preview.
https://cinwell.com/vuep/
MIT License
887 stars 103 forks source link

Add scope property #23

Closed Toilal closed 6 years ago

Toilal commented 6 years ago

Close #16

This adds a scope attribute to "vuep" component to allow emulating the global scope in the playground. You can add any object to it, including Vue components (So it fixes #16). It still doesn't use eval() as it's evil :smiling_imp:

It becomes really handy for component developers to provide a vuep playground of their component inside their docs if docs are also built with VueJS and webpack.

Here's an example when using webpack (vue-loader + SFC)

<template>
  <vuep v-model="value" :scope="scope"></vuep> // New scope prop defined
</template>
<script>
  import VueTree from 'vue-tree' // A Vue Component to inject into vuep

  export default {
    data: function() {
      var scope = { VueTree } // Place the component in the scope object (or anything else)
      var value = `
      <template>
        <div>
          <vue-tree></vue-tree>
        </div>
      </template>

      <script>
        export default {
          components: {
            VueTree // VueTree is available in vuep scope !
          }
        }
      </script>
      `
    }
  }
</script>
Toilal commented 6 years ago

Done ! I think it's ready to merge :)