Vue 實現視覺化拖拽頁面編輯器
線上地址 (用梯子會更快些)
視覺化頁面編輯器，聽起來可望不可即是吧，先來張動圖觀摩觀摩一番！
實現這功能之前，在網上參考了很多資料，最終一無所獲，五花八門的文章，都在述說著曾經的自己！
那麼，這時候就需要自己去琢磨了，如何實現？
需要考慮到：
- 拖拽的實現
- 資料結構的定義
- 元件的劃分
- 可維護性、擴充套件性
物件的引用：在這裡是我感覺最酷的技巧了，來一一講解其中的細節吧！！
拖拽實現
拖拽事件
這裡使用 H5的拖拽事件 ，主要用到：
dragstart // 開始拖拽一個元素時觸發 draggable // 指定可被拖拽的元素 dragend // 當拖拽操作結束時觸發 dragover // 當拖拽元素在可釋放目標上移動時觸發 drop // 當拖拽元素在可釋放目標上被釋放時觸發
我們來看看怎麼使用這些事件：
<!-- 拖拽元素列表資料 -->
<script>
// com 為對應的檢視元件，在釋放區域顯示
typeList: {
banner: {
name: '輪播圖',icon: 'el-icon-picture',com: Banner
},product: {
name: '商品',icon: 'el-icon-s-goods',com: Product
},images: {
name: '圖片',com: Images
},}
</script>
<!-- 拖拽元素 -->
<ul
@dragstart="dragStart"
@dragend="dragEnd"
>
<li
v-for="(val,key,index) in typeList"
draggable
:data-type="key"
:key="index + 1"
>
<span :class="val.icon"></span>
<p>{{val.name}}</p>
</li>
</ul>
<!-- 釋放區域 -->
<div
class="view-content"
@drop="drog"
@dragover="dragOver"
>
</div>
拖拽開始
定義一個變數type，用於觸發拖拽事件開始的時候，確定當前拖拽元素是哪種型別，比如：產品、廣告圖...
// 拖拽型別
dragStart(e) {
this.type = e.target.dataset.type
}
確定型別後，再進入下一步的釋放區域
在釋放區域中移動
移動的過程中，需要根據滑鼠位置實時計算拖拽元素的位置，具體可往下翻預覽動圖效果！
// 'view-content': 外層盒子的class，直接 push
// 'item': 盒子內部的元素，需計算位置，進行變換操作
dragOver() {
let className = e.target.className
let name = className !== 'view-content' ? 'item' : 'view-content'
// 元件的預設資料
const defaultData = {
type: this.type,// 元件型別
status: 2,// 預設狀態
data: [],// 基本資料
options: {} // 其他操作
}
if (name == 'view-content') {
//...
} else if (name == 'item') {
//...
}
}
邊界處理、角度計算
核心變數：
- isPush：拖拽元素是否已push到頁面資料中
- index：拖拽元素最終的索引值
- curIndex：滑鼠所在位置的元素的索引值
- direction：滑鼠所在元素的上/下部分
當 name=='view-content'，說明拖拽元素處於外層且空白的可釋放區域，如果未新增狀態，直接push即可
if (name == 'view-content') {
if (!this.isPush) {
this.index = this.view.length
this.isPush = true
this.view.push(defaultData)
}
}
當 name=='item'，也就是在已有元素的上方，則需要計算位置，上/下方，新增 or 移動
if (name == 'item') {
let target = e.target
let [ y,h,curIndex ] = [ e.offsetY,target.offsetHeight,target.dataset.index ]
let direction = y < (h / 2) // 計算滑鼠處於當前元素的位置，來決定拖拽元素的上/下
if (!this.isPush) {
// first
if (direction) {
if (curIndex == 0) {
this.view.unshift(defaultData)
} else {
this.view.splice(curIndex,defaultData)
}
} else {
curIndex = +curIndex + 1
this.view.splice(curIndex,defaultData)
}
} else {
// Moving
if (direction) {
var i = curIndex == 0 ? 0 : curIndex - 1
var result = this.view[i]['status'] == 2
} else {
var i = +curIndex + 1
var result = this.view.length > i && this.view[i]['status'] == 2
}
// 拖拽元素是否需變換位置
if (result) return
const temp = this.view.splice(this.index,1)
this.view.splice(curIndex,temp[0])
}
this.index = curIndex // 拖拽元素位置
this.isPush = true // 進入則push，即true
}
- first：未 push，則根據當前 index 和 direction 來決定拖拽元素的位置
- Moving：已 push 且移動狀態，根據當前 index 和 direction 來找出對應值的狀態，是否為拖拽元素，是則 return，否則變換位置
總結一下：獲取當前滑鼠所在的元素索引，再計算滑鼠是在元素的上半部分還是下半部分，以此推斷出拖拽元素的位置！！！
小問題：
上面的 name=='item'，Event 事件需要阻止預設事件，避免 target 為內層元素，導致無法計算位置，但是隻用事件阻止在這裡行不通，也不知道為啥，需要把 .item 的所有子元素加上 pointer-events: none 的屬性才行！
e.preventDefault()
e.stopPropagation()
.item div{
pointer-events: none;
}
拖拽結束
即鬆開滑鼠、或離開釋放區域，則恢復預設狀態。
這裡的status有什麼作用呢
- 上方的計算規則，用於判斷元素是否為拖拽元素。
- 頁面的顯示方式，拖拽的時候只顯示元件名，釋放之後才恢復正常顯示內容。
// 結束拖拽
dragEnd(e) {
this.$delete(this.view[this.index],'status')
this.isPush = false
this.type = null
},// 已放置到指定位置
drog(e) {
e.preventDefault()
e.stopPropagation()
this.dragEnd()
},
內容塊拖拽實現
因時間關係，這裡偷懶了，使用了一個較為完美的列表拖拽外掛 Vue.Draggable (star 14.2k)
研究了一會兒，其邏輯和上方實現的拖拽有一定聯絡，具體實現方法大同小異，相信有了上面的實戰案例，你也就能做出來了！
要不，你動手試試？
可以根據Vue.Draggable的使用方式，來實現一個拖拽元件，具體會用到（drag、slot、DOM）等操作
（後面有時間，我再回來封裝一個）
元件劃分
中間檢視元件，右邊編輯元件，為一套一套的，果然是一套一套的，不愧是有一套一套的！
page=>index 則管理著整個頁面的內容
. ├── components | ├── Edit ## 右邊編輯 | | ├── Info # 基本資訊 | | ├── Image # 廣告圖 | | ├── Product # 商品 | | └── Index # 管理編輯元件的資訊 | └── View ## 中間檢視 | | ├── Banner # 輪播圖 | | ├── Images # 廣告圖 | | └── Product # 產品列表 └── page └── index ## 主頁面
想要實現預覽頁面的效果，直接使用 components=>View 下面的元件即可，與 page=>index 使用方法一致，無需過多修改！
資料結構的定義
實現一個鮮豔且具有擴充套件性的功能，那麼定義一個符合條件的資料結構是必不可少的！與此同時也能決定你的程式碼質量！
當然，還是得由自身所學和邏輯思維來決定！
這裡最為亮眼的處理方式：借用物件的關係，使得元件之間的傳值，只需單向傳輸一次！
view: [
{
type: 'info',title: '頁面標題',remarks: '頁面備註',backgroundColor: 'red'
},{
type: 'banner',data: [
{ url: '1.jpg',name: '輪播圖1',link: 'https://輪播圖跳轉地址.cn' },{ url: '2.jpg',name: '輪播圖2',link: 'https://輪播圖跳轉地址.cn' }
]
},{
type: 'images',name: '廣告圖1',link: 'https://廣告圖跳轉地址.cn' },name: '廣告圖2',link: 'https://廣告圖跳轉地址.cn' }
]
},{
type: 'product',data: [
{ id: '1',name: '商品1',image: '1.jpg' },{ id: '2',name: '商品2',image: '2.jpg' }
],options: {
originalPrice: true,// 劃線價
goodRatio: true,// 好評率
volumeStr: false,// 銷量數
}
}
]
就是一個數組，陣列的item代表著一個模組
- type：模組型別
- data：基本資訊
- options：其他操作
....可參考原有元件模組，按照需求去自行擴充套件等操作
編輯元件的傳值
選擇檢視元件的時候，把view裡面指定的item物件作為引數傳遞給編輯元件！
物件是指向同一個記憶體地址的，存在著一種引用關係，只需修改一次即可實現多方位的資料更新！
<section class="r">
<EditForm
:data="props"
v-if="isRight"
></EditForm>
</section>
<script>
// 切換檢視元件
selectType(index) {
this.isRight = false
this.props = this.view[index]
this.$nextTick(() => this.isRight = true)
}
</script>
圖片上傳
剛好上面有圖片上傳元件，這裡分享一下我的使用技巧！！
使用 Element-ui 自帶上傳元件的朋友，看過來（敲黑板）
我們先來實現一個簡約版的：
<!-- 禁用所有預設方法 -->
<el-upload
:http-request="upload"
:show-file-list="false"
multiple
action
>
<img :src="item.url" v-for="(item,index) in list" :key="index">
</el-upload>
<script>
upload(params) {
const file = params.file;
const form = new FormData();
form.append("file",file);
form.append("clientType","multipart/form-data");
const index = this.imageIndex // 編輯圖片的索引
const data = {
url: URL.createObjectURL(file),form
}
if (index !== null) {
// this.list => 圖片集合
this.$set(this.list,index,data)
} else {
this.list.push(data)
}
}
</script>
- 重寫上傳方法
- 使用 URL.createObjectURL(file) 建立一個本地預覽的地址
- 把 form 物件存起來，提交時再上傳
// 根據上面的程式碼，使用Promise實現上傳功能
const request = []
this.list.forEach(item => {
request.push(
new Promise((resolve,reject) => {
/**
* 上傳介面
* 替換原 url
* 刪除 form
*/
imageUpload(item.form).then(res => {
item.url = res.data.url
delete item.form
resolve(res)
}).catch(err => {
reject(err)
})
})
)
})
Promise.all(request).then(res => {
// ... submit ...
})
等到最後一步提交資料的時候，再上傳所有的圖片，上傳完成之後再去呼叫提交資料的介面！！
在有表單多資料提交的場景下，這才是最正確的做法！
最後總結
其實並不複雜，重點在於資料結構的定型、元件互動的處理、邏輯方式等規劃，只要這一步核心的點實現了。
其他的，例如新增元件、新增操作等等擴充套件性的操作，剩下的問題已不再是問題！
這隻能算是一個簡版，可按照需求，去優化、去琢磨、去完善，吸收成為自己的知識！
至少我已經滿足了工作上的需求了，哇哈哈哈哈哈~~~
更多的細節，歡迎檢視原始碼，Github 地址獻上，感謝您的 star，我是不吃茶的李白。
以上就是Vue 實現視覺化拖拽頁面編輯器的詳細內容，更多關於Vue 視覺化拖拽頁面編輯器的資料請關注我們其它相關文章！