html实现拖拽自定义表单,vue实现可视化可拖放的自定义表单的示例代码

实现如例子所示的可视化可拖放表单功能。整个页面,分为左中右三栏布局,左栏的部件库的部件(组件)作为key,拖放到中间区域时,往vuex存放数组数据,拖一个就push一个。点击某个组件时,在右栏显示其属性,其实也就是在vuex存放的数据中查找数据迭代属性。

左中右三栏 左右固定 中间自适应布局

首先,布局上来看,左右都是可以拉伸的,中间是自适应的布局。

左右分别float left和float right, 中间栏使用margin撑开布局,即可完成布局

动态显示template

第二个重要点就是让template可编程,

例如: 传来一个字符串按钮,如何显示成为组件而不是字符串标签呢。

关键点: 使用js和vue extends

新建js

export default Vue.component('CustomTemplate', {

props: {

html: String

},

render (h) {

return h(Vue.extend({ // 关键点

template: `

${this.html}
`,

data () {

return {

current: ''

}

},

methods: {

doclick (uuid, id) {

this.current = uuid

this.$store.commit('EditPanel/changeId', uuid)

},

dodragstart (ev) {

ev.dropEffect = 'move'

}

}

}))

},

})

拖放操作和数据的组装

在文章开头已经分析好了,整个数据的流向,接下来就是用vuex去实现。

拖放组件使用vuedraggable,拖放完成的时候,鉴于MVVM的特点,画面改变<=>数据改变,操作vuex时注意不能直接修改state

computed: {

myList: {

get() {

return this.$store.state.myList

},

set(value) {

this.$store.commit('updateList', value)

}

}

}

整个数据流向: 左栏组件库中间展示栏 右栏属性设置, 控制不好数据的话,可能会出现原始数据被修改的情况。请看:

var a = { k: 1 }

var b = a

b.k = 2

console.log(a) // { k: 2 }

这就会无意间导致数据被修改,很难排查。可以使用Object.freeze冻结对象,避免出错。

function deepFreeze(obj) {

// 取回定义在obj上的属性名

var propNames = Object.getOwnPropertyNames(obj);

// 在冻结自身之前冻结属性

propNames.forEach(function(name) {

var prop = obj[name];

// 如果prop是个对象,冻结它

if (typeof prop == 'object' && prop !== null)

deepFreeze(prop);

});

// 冻结自身(no-op if already frozen)

return Object.freeze(obj);

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现可视化拖放自定义表单可以使用Vue.js和一些第三方库来帮助我们完成。下面是一个简单的实现步骤: 1. 安装并引入vue-draggable插件 可以使用npm安装vue-draggable插件:`npm install vuedraggable --save`,然后在Vue组件中引入该插件。 ```javascript import draggable from 'vuedraggable' export default { components: { draggable } } ``` 2. 创建表单设计器组件并添加表单元素 在Vue组件中,可以使用`draggable`组件来实现拖放功能。我们可以使用`v-for`指令渲染表单元素列表,并将元素添加到`draggable`组件中。 ```html <draggable v-model="formElements"> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> </draggable> ``` 3. 添加表单元素到表单设计器 我们可以添加按钮来添加新的表单元素。在Vue组件中,我们可以使用`@click`事件添加新的元素到表单元素列表。 ```html <button @click="addInput">Add Input</button> <button @click="addSelect">Add Select</button> ``` ```javascript export default { data() { return { formElements: [] } }, methods: { addInput() { this.formElements.push({ type: 'input', inputType: 'text', placeholder: 'Enter text' }) }, addSelect() { this.formElements.push({ type: 'select', options: ['Option 1', 'Option 2', 'Option 3'] }) } } } ``` 4. 渲染表单 最后,我们可以使用`v-for`指令再次渲染表单元素列表,并将表单元素添加到表单中。 ```html <form> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> <button type="submit">Submit</button> </form> ``` 完整代码如下: ```html <template> <div> <draggable v-model="formElements"> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> </draggable> <button @click="addInput">Add Input</button> <button @click="addSelect">Add Select</button> <form> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> <button type="submit">Submit</button> </form> </div> </template> <script> import draggable from 'vuedraggable' export default { components: { draggable }, data() { return { formElements: [] } }, methods: { addInput() { this.formElements.push({ type: 'input', inputType: 'text', placeholder: 'Enter text' }) }, addSelect() { this.formElements.push({ type: 'select', options: ['Option 1', 'Option 2', 'Option 3'] }) } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值