實(shí)現(xiàn)如例子所示的可視化可拖放表單功能。整個(gè)頁面，分為左中右三欄布局，左欄的部件庫的部件（組件）作為key,拖放到中間區(qū)域時(shí)，往vuex存放數(shù)組數(shù)據(jù)，拖一個(gè)就push一個(gè)。點(diǎn)擊某個(gè)組件時(shí)，在右欄顯示其屬性，其實(shí)也就是在vuex存放的數(shù)據(jù)中查找數(shù)據(jù)迭代屬性。

左中右三欄 左右固定 中間自適應(yīng)布局

首先，布局上來看，左右都是可以拉伸的，中間是自適應(yīng)的布局。

左右分別float left和float right, 中間欄使用margin撐開布局，即可完成布局

動態(tài)縮放瀏覽器窗口來查看效果

動態(tài)顯示template

第二個(gè)重要點(diǎn)就是讓template可編程,

例如： 傳來一個(gè)字符串<el-button>按鈕</el-button>,如何顯示成為組件而不是字符串標(biāo)簽?zāi)亍?/p>

關(guān)鍵點(diǎn)： 使用js和vue extends

新建js

export default Vue.component('CustomTemplate', {  props: {    html: String  },  render (h) {   return h(Vue.extend({ // 關(guān)鍵點(diǎn)     template: `<div class="root-custom-template">${this.html}</div>`,     data () {      return {       current: ''      }     },     methods: {      doclick (uuid, id) {       this.current = uuid       this.$store.commit('EditPanel/changeId', uuid)      },      dodragstart (ev) {       ev.dropEffect = 'move'      }     }  })) },})

拖放操作和數(shù)據(jù)的組裝

在文章開頭已經(jīng)分析好了，整個(gè)數(shù)據(jù)的流向，接下來就是用vuex去實(shí)現(xiàn)。

拖放組件使用vuedraggable,拖放完成的時(shí)候，鑒于MVVM的特點(diǎn)，畫面改變<=>數(shù)據(jù)改變，操作vuex時(shí)注意不能直接修改state

computed: {  myList: {    get() {      return this.$store.state.myList    },    set(value) {      this.$store.commit('updateList', value)    }  }}

整個(gè)數(shù)據(jù)流向： 左欄組件庫<-->中間展示欄 <---->右欄屬性設(shè)置, 控制不好數(shù)據(jù)的話，可能會出現(xiàn)原始數(shù)據(jù)被修改的情況。請看：

var a = { k: 1 }var b = ab.k = 2console.log(a) // { k: 2 }

這就會無意間導(dǎo)致數(shù)據(jù)被修改，很難排查。可以使用Object.freeze凍結(jié)對象，避免出錯(cuò)。

Object.freeze

function deepFreeze(obj) { // 取回定義在obj上的屬性名 var propNames = Object.getOwnPropertyNames(obj); // 在凍結(jié)自身之前凍結(jié)屬性 propNames.forEach(function(name) {  var prop = obj[name];  // 如果prop是個(gè)對象，凍結(jié)它  if (typeof prop == 'object' && prop !== null)   deepFreeze(prop); }); // 凍結(jié)自身(no-op if already frozen) return Object.freeze(obj);}

demo項(xiàng)目github

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。