vue-amis-editor
Installation
yarn add vue-amis-editor --saveQuick Start
Serve.vue
import VueAmisEditor from 'vue-amis-editor'
export default Vue.extend({
name: 'ServeDev',
components: {
VueAmisEditor,
},
data() {
return {
preview: true,
schema: {
type: 'tasks',
name: 'tasks',
items: [
{
label: 'hive 任务',
key: 'hive',
status: 4,
remark: '查看详情<a target="_blank" href="http://www.baidu.com">日志</a>。',
},
{
label: '小流量',
key: 'partial',
status: 4,
},
{
label: '全量',
key: 'full',
status: 4,
},
],
id: 'u:5f649ab86d6a',
},
}
},
})
</script>
<template>
<div id="app">
<vue-amis-editor :is-preview="preview" :value="schema" />
</div>
</template>props：
| prop | type | default | explain |
| ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------- |
| isPreview | Boolean | false | Whether it is in preview |
| isMobile | Boolean | false | Is it mobile | isMobile |
| navHeight | Number | 50 | Toolbar height |
| isTools | Boolean | true | Show and hide the toolbar |
| sources | Array | [] | video's source link |
| theme | Boolean | false | autoplay when video is loaded |
| loop | Boolean | false | amis theme |
| toolbar | Object | {title: 'vue-amis-editor',preview: 'preview',release: 'release',edit: 'edit',obtain: 'obtain',copy: "copy",clear: 'clear',set: "set"} | Toolbar configuration, support for internationalization |
| value | Object | {message: 'message'} | schemanode |
| onChange | Function | onChange(e) | amis onChange |
| obtain | Function | obtain | Get the data in the current amis-editor |
| copy | Function | copy | Copy the data of amis-editor |
| clear | Function | clear | data for clearamis-editor |
| getSchema | Function | getSchema | Get the data of amis-editor |
| setSchema | Function | setSchema(Schema) | set the data of amis-editor |
| togggeMobile | Function | togggeMobile(Boolean) | Switch between pc and mobile mode |
| togglePreview | Function | togglePreview(Boolean)' | Preview and edit mode switching |