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

  • 相关阅读:
    ionic3 覆盖主题色
    sublime text 替换功能使用反向引用 replace with using
    mac 10.10.4 下安装xdebug不了的解决办法
    sublime package control 下载不了插件问题解决
    firefox css3 transform样式 位置偏移问题解决
    从ie9上打开httpwatch
    (转)用CSS为英文和中文字体分别设置不同的字体
    几个常用的dos命令
    moodle常用方法及代码片断
    多对多文件复制粘贴
  • 原文地址:https://www.cnblogs.com/lafitewu/p/13495912.html
Copyright © 2011-2022 走看看