zoukankan      html  css  js  c++  java
  • vue 图片多选排序

    前言:有这样一个需求,将图片勾选排序,就类似,发微信朋友圈,手机照片选取。
    如图:

    ok,废话不多说,上代码

    html

          .select_demo
            .select_li(v-for="(item,index) in selectArr" @click="selectFn(index)") 
              .select_box(v-if="item.value") {{item.value}}
              .select_box_active(v-else)
              | {{item.name}}
    

    css

      .select_demo {
           50%;
          height: 17vw;
          border: 1px solid red;
          overflow-y: auto;
          padding: 0 .5vw .5vw .5vw;
    
          .select_li {
            position: relative;
            float: left;
             24%;
            height: 5vw;
            margin-left: calc(4%/3);
            background: chartreuse;
            margin-top: .5vw;
            cursor: pointer;
            &:nth-child(4n+1) {
              margin-left: 0%;
            }
            .select_box,.select_box_active {
              position: absolute;
               10px;
              height: 10px;
              right: -5px;
              top: -5px;
              border-radius: 90px;
              font-size: 10px;
              border: 1px solid white;
            }
            .select_box {
              background: rgba(15, 235, 255, 1);
            }
          }
        }
    

    data()

        data () {
        return {
          selectPic: [
            
          ],
          selectArr: [
            {id: 1,name: 'demo1111'},
            {id: 2,name: 'demo222'},
            {id: 3,name: 'demo333'},
            {id: 4,name: 'demo44'},
            {id: 5,name: 'demo555'},
            {id: 6,name: 'demo666'},
            {id: 7,name: 'demo777'},
            {id: 8,name: 'demo888'},
            {id: 9,name: 'demo9999'},
            {id: 10,name: 'demo1010'}
          ],
          }
    }
    

    methods

         selectFn(index) {
          if(this.selectArr[index].value == undefined) {
            this.selectPic.push(this.selectArr[index])
            this.$set(this.selectArr[index],"value",this.selectPic.length)
          }else {
            var i;
            this.selectPic.map((item,indexs) => {
              if(item == this.selectArr[index]) {
                i = indexs
              }
            })
            this.selectArr.map((item) => {
              if((i+1) < item.value) {
                item.value = item.value - 1
              }
            })
            this.$set(this.selectArr[index],"value",undefined)
            this.selectPic.splice(i,1)
            
          }
          // console.log(this.selectArr)
          // console.log(this.selectPic)
        }
    

    ok,大功告成,nice

  • 相关阅读:
    Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由
    nyoj 635 Oh, my goddess
    nyoj 587 blockhouses
    nyoj 483 Nightmare
    nyoj 592 spiral grid
    nyoj 927 The partial sum problem
    nyoj 523 亡命逃窜
    nyoj 929 密码宝盒
    nyoj 999 师傅又被妖怪抓走了
    nyoj 293 Sticks
  • 原文地址:https://www.cnblogs.com/lafitewu/p/13495912.html
Copyright © 2011-2022 走看看