@zlinst/vue2-sandbox v0.1.3
vue2-sandbox
vue2-sandbox provides a customisable and interactive component for previewing Vue component on the fly which can be useful for testing or demostration.
This project is still under active development.
Basic Usage
Use the component
prop:
<template>
<component-sandbox :component="FooComponent" />
</template>
<script>
import FooComponent from './components/FooComponent.vue'
export default {
components: {
FooComponent,
},
}
</script>
Or
Use the default slot
Note the manual bindings for propsData
and eventsData
are needed in this case.
<template>
<component-sandbox>
<template v-slot="{ propsData, eventsData }">
<foo-component v-bind="propsData" v-on="eventsData" />
</template>
</component-sandbox>
</template>
<script>
// ... omitted
</script>
Advanced Usage
Custom Prop Input
We can use custom input component for editing prop value by using named slot prop:{propName}
.
For example, if UserProfile
component has a prop named userId
, and FormUserId
is a selector component that loads users from remote server and emits id of selected user as v-model
.
<template>
<component-sandbox :component="UserProfile">
<template v-slot:prop:userId="{ prop }">
<form-user-id v-model="prop.valueProxy" />
</template>
<component-sandbox>
</template>
<script>
import UserProfile from './components/UserProfile.vue'
import FormUserId from './components/FormUserId.vue'
export default {
components: {
UserProfile,
FormUserId,
},
}
</script>
Unlisted Props
Sometimes we use $attrs
to pass non-prop attributes to child component, we can use props
prop to include them in the prop list as well, it's just like how we define props
in Vue component.
<template>
<component-sandbox
:component="FooComponent"
:props="{
bar: {
type: String,
default: 'Hello, This is BAR',
}
}"
/>
</template>
<script>
// ... omitted
</script>
Or make it fancier:
<template>
<component-sandbox
:component="FooComponent"
:props="BarComponent.$props"
/>
</template>
<script>
import BarComponent from './component/BarComponent.vue'
// ... omitted
</script>
Eval Mode
The "edit" button next to the prop name allows us to set the prop value using JSON, we can also use eval mode for data that is not supported by JSON, such as Function
.
This feature is disabled by default, and requires manual activation for security reasons.