基础表单组件

元素 definition schema 备注
text placeholder、description、disabled、readonly maxLength、minLength、pattern
number placeholder、description、disabled、readonly、step maximum、minimum
textarea placeholder、description、disabled、readonly、row maxLength、minLength
checkbox description、disabled、readonly -
checkboxs description、disabled、readonly、options -
hidden - -
html tpl(html片段) -
select description、disabled、options、config - 基于vue-select
date placeholder、description、disabled、config format 基于vue2-datepicker
image-upload config format 基于vue-picture-input
editor config - 基于@tinymce/tinymce-vue

iamge-upload

图片上传组件 Demo、Code

图片上传需要服务器支持，所以必须提供 config.action方法，处理用户上传的图片，并返回图片地址；如：

{
  type: 'image-upload',
  config: {
    action: function (image) {
      // image base64
      return new Promise((resolve, reject) => {
        // 图片上传操作
        resolve(uri)
      })
    }
  }
}

editor

富文本编辑组件 Demo、Code

基于@tinymce/tinymce-vue，默认支持以下插件

'lists', 'advlist', 'image', 'table', 'textcolor', 'colorpicker', 'codesample', 'contextmenu', 'link', 'fullscreen', 'help', 'preview', 'searchreplace', 'hr', 'wordcount', 'autosave'

toolbar配置：

'undo redo | styleselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | table hr link image | searchreplace | fullscreen preview help'

可通过config.plugins、config.toolbar进行扩展；其他配置参考tinymce-vue

Mixin

mixins/basic.js 提供了基础表单组件基本功能。所以基础组件一般只需基于此扩展

module.exports = {
  mixins: [basicMixin]
};

results matching ""

    No results matching ""