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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.