m-vue-form

Vue3 表单设计

使用

import { createApp } from 'vue';
import App from './App.vue';
import mVueForm from 'm-vue-form';

createApp(App).use(MVueForm, { axios, languages, editorLang, editorFamily }).mount('#app');

设计使用

<m-vue-form-design @save="save" />

const save = (value: string) => {
    console.log(value);
};

属性

value: { type: String, default: '' }, //表单设计内容
axios: { type: [Object, Function], default: null }, //请求
preview: { type: Boolean, default: true }, //是否显示预览按钮
download: { type: Boolean, default: true }, //是否显示下载按钮
upload: { type: Boolean, default: true }, //是否显示上传按钮
save: { type: Boolean, default: true } //是否显示保存按钮

方法

getValue() //获取表单设计内容

显示使用

<m-vue-form-view ref="formRef" :value="formValue" :form="formData" />

import { ref } from 'vue';

const formRef = ref(),
    formData = ref(''),
    formValue = ref({ username: '1' });

//校验表单
formRef.value.validate((data: any, err: any) => {
    console.log(data, err);
});

属性

form: { type: String, default: '' }, //表单设计内容
axios: { type: [Object, Function], default: null }, //请求
value: { type: Object, default: () => ({}) }, //数据对象
show: { type: Boolean, default: false } //是否可编辑

方法

validate() //校验表单
getValue() //获取表单值

vite.config配置

import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        { src: ['./node_modules/m-vue-form/worker'], dest: '' },
        { src: ['./node_modules/m-vue-form/tinymce'], dest: '' }
      ]
    })
  ]
})