今天分享幾個拖拉拽的工具，包括流程圖和表單
- GoJS
- vue.draggable
- Vue.Draggable.next
- form-generator
GoJS 這個上手也挺快的，大部分需求都可以滿足
vue.draggable 支持vue2
Vue.Draggable.next 是一款vue3的拖拽插件,基于Sortable.js實現(xiàn)的，你可以用它來拖拽列表、菜單、工作臺、選項卡等常見的工作場景
Form Generator
Vue 表單生成器(Form Generator)是一個基于Schema的表單生成器組件，可以基于Schema構建反應式表單。
Vue 表單生成器(Form Generator)提供21種字段類型，、也可以使用自定義字段進行擴展。生成的模板對Bootstrap友好，并且可以輕松自定義樣式。文章來源：http://www.zghlxwxcb.cn/news/detail-404947.html
npm install vue-form-generator
//全局引入
import VueFormGenerator from "vue-form-generator";
import "vue-form-generator/dist/vfg.css";
Vue.use(VueFormGenerator)
//組件中引入
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
import VueFormGenerator from "vue-form-generator";
export default {
components: {
"vue-form-generator": VueFormGenerator.component
},
data(){
return{
{
model: {
id: 1,
name: 'John Doe',
password: 'J0hnD03!x4',
skills: ['Javascript', 'VueJS'],
email: 'john.doe@gmail.com',
status: true
},
schema: {
fields: [
{
type: 'input',
inputType: 'text',
label: 'ID (disabled text field)',
model: 'id',
readonly: true,
disabled: true
},
]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true,
validateAsync: true
}
}
}
}
};
文章來源地址http://www.zghlxwxcb.cn/news/detail-404947.html
到了這里，關于前端適用的幾個拖拉拽插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
