"Vuejs" Action on a text box/Picture frame (delete, move up, move down, and insert)

One of the company's app projects, asked to make a Product Details edit page, very simple, just went a little detour, only with this record.

A page can enter text and insert a picture in a text box.

There are buttons for actions at the bottom of the text box.

such as the effect of micro-store.

-----------------------------------------------------------------------------------------------------

Process:

When you tap add content, the bottom pop-up selects the Insert text box or the picture frame button.

Click the text button to add an empty text box at the bottom of the content. Click the Picture button to upload a picture and add a picture at the bottom.

There are action buttons at the bottom of the text box and picture.

• Delete button: As the name implies.
• Move Up button: Swap the content with the previous content.
• Move Down button: the same logic as the Move Up button.
• Insert button: Inserts a content below the content.

Ideas:

The beginning of a detour, no use of arrays, this situation is no doubt to use an array to achieve.

Initially intended to be implemented with two arrays, a temporary empty array temlist to do the loop, and the other array contentlist do the contents of the storage array. Later on, just use an array to get it done.

So I'm going to use the array contentlist to do this.

• First page v-for= "(item, index) in ContentList" Loop this array, and judge the value is empty to display a text box, the value is not empty is a picture, directly displayed.
• The array push is a value whenever you click "Add Content". The text is an empty string ', and the picture is ' '.
• The action button clicks the event on the label @click = "function (index)" to pass the index over. Get index, Next is the array operation, and there is no difficulty.
  • Both delete and insert can be used with the splice function
  • Move up or down to use Vue.set (arr, index, value). This method does not trigger Vue's DOM update because it is used directly with arr[index] = value.
  • It is also important to note that the move-down and insert operations are used to index + 1 and need to be changed to parseint (index) + 1 for the reason you understand.
  • When inserting a picture, there is no scroll bar on the iOS side, add the following code after inserting the image into the array to solve the problem:
    • var h = $ ('. Calss '). Height ();
    • $ (. class '). Height (h+0.1);

　　

"Vuejs" Action on a text box/Picture frame (delete, move up, move down, and insert)