| | |
| | | </span> |
| | | </template> |
| | | <template slot="menuForm"> |
| | | <dynamic-button :butttonList="componentVO.buttons" type="form" @buttonClick="buttonClick"></dynamic-button> |
| | | <dynamic-button :componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="[form]" :sourceData="sourceData" type="form" @buttonClick="buttonClick"></dynamic-button> |
| | | </template> |
| | | |
| | | <template v-for="item in slotData" :slot="item.prop + ''"> |
| | |
| | | @setReferValue="setReferValue"> |
| | | |
| | | </vciWebRefer> |
| | | <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor"> |
| | | </quill-editor> |
| | | </template> |
| | | </avue-form> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import vciWebRefer from '@/components/refer/vciWebRefer' |
| | | |
| | | import VciWebRefer from "@/components/refer/vciWebRefer"; |
| | | import {verifyNull, verifySlash} from "@/util/validate"; |
| | | |
| | | const toolbarOptions = [ |
| | | ['bold', 'italic', 'underline', 'strike'], // toggled buttons |
| | | ['blockquote', 'code-block'], |
| | | |
| | | [{'header': 1}, {'header': 2}], // custom button values |
| | | [{'list': 'ordered'}, {'list': 'bullet'}], |
| | | [{'script': 'sub'}, {'script': 'super'}], // superscript/subscript |
| | | [{'indent': '-1'}, {'indent': '+1'}], // outdent/indent |
| | | [{'direction': 'rtl'}], // text direction |
| | | |
| | | [{'size': ['small', false, 'large', 'huge']}], // custom dropdown |
| | | [{'header': [1, 2, 3, 4, 5, 6, false]}], |
| | | |
| | | [{'color': []}, {'background': []}], // dropdown with defaults from theme |
| | | [{'font': []}], |
| | | [{'align': []}], |
| | | ['link', 'image', 'video'], |
| | | ['clean'] // remove formatting button |
| | | ]; |
| | | export default { |
| | | name: "dynamic-form", |
| | | components: {VciWebRefer}, |
| | | props: { |
| | | //ui上下文的业务类型(或链接类型) |
| | | uiBtmType: { |
| | | type: String |
| | | }, |
| | | //ui上下文 |
| | | uiContext:{ |
| | | type: String |
| | | }, |
| | | componentVO: { |
| | | type: Object, |
| | | default: {} |
| | |
| | | data() { |
| | | return { |
| | | form: {}, |
| | | content: '', |
| | | editorOption: { |
| | | placeholder: '你想说什么?', |
| | | modules: { |
| | | imageResize: { |
| | | displayStyles: { |
| | | backgroundColor: 'black', |
| | | border: 'none', |
| | | color: 'white' |
| | | }, |
| | | modules: ['Resize', 'DisplaySize', 'Toolbar'] |
| | | }, |
| | | toolbar: { |
| | | container: toolbarOptions, // 工具栏 |
| | | handlers: { |
| | | 'image': function (value) { |
| | | if (value) { |
| | | document.querySelector('#quillEditorQiniu .avatar-uploader input').click() |
| | | } else { |
| | | this.quill.format('image', false); |
| | | } |
| | | }, |
| | | 'video': function (value) { |
| | | if (value) { |
| | | document.querySelector('#quillEditorQiniu .avatar-uploader input').click() |
| | | } else { |
| | | this.quill.format('video', false); |
| | | } |
| | | }, |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |