vue-amis-editor

Installation

yarn add vue-amis-editor --save

Quick 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 |

Online examples

• amis-admin-vue Online examples
• amis-admin-vue repo