公司的一個APP項目，要求做一個商品詳情編輯頁，很簡單，只是走了點彎路，僅以此記錄。
頁面可以在文本框內輸入文本和插入圖片。
在文本框底部還有操作的按鈕。
效果圖如微店的效果。
-----------------------------------------------------------------------------------------------------
流程：
點擊“添加內容”時，底部彈出選擇插入 文本框 還是 圖片框 按鈕。
點擊文本按鈕，則在內容底部添加空文本框。點擊圖片按鈕，則上傳圖片並在底部添加圖片。
文本框和圖片底部都有操作按鈕。
- 刪除按鈕：顧名思義。
- 上移按鈕：將該內容與上一個內容調換位置。
- 下移按鈕：與上移按鈕一樣的邏輯。
- 插入按鈕：在該內容下方插入一個內容。
思路：
一開始繞了點彎路，沒有用數組，這種情況毫無疑問要用數組來實現。
一開始打算用兩個數組來實現，一個臨時空數組 temList 做循環用，另外一個數組 contentList 做內容存放數組。后來一想，只用一個數組就完事了。
所以我就用數組 contentList 來完成這個功能。
- 首先頁面 v-for="(item, index) in contentList" 循環這個數組，並判斷值為空則顯示一個文本框，值不為空則是圖片，直接顯示出來。
- 每當點擊“添加內容”時，數組push一個值。文字為空字符串 ''，圖片為 '<img src="url/image.jpg">'。
- 操作按鈕在標簽上的點擊事件 @click="function(index)" 將index傳過去。拿到 index ，接下來就是數組操作了，並沒有什么難度。
- 刪除和插入都可以用 splice 函數
- 上下移則用需要用到 Vue.set(arr, index, value) 。因為直接用 arr[index] = value 這種方法不觸發vue的dom更新。
- 另外需要注意的是下移和插入操作用到 index + 1 ，需要改為 parseInt(index) + 1 ，原因你懂的。
- 在插入圖片的時候，ios端沒有出現滾動條，在數組插入圖片后加入下面代碼解決這個問題：
- var h = $('.calss').height();
- $(.class').height(h+0.1);