如何利用JS制作上传图片并可选择的功能-群英

上一篇：用JS制作数字拼图难不难，要点是什么下一篇：this关键字的值取决什么，相关要点有哪些

本篇内容介绍了“如何利用JS制作上传图片并可选择的功能”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

需求：实现微信发送图片或发朋友圈选择图片功能可实现选后点击后选择图片标记值自减或自增

最终效果：

思路：

1、给原始数组中增加一个用于判断是否选中的状态默认为false和选中序号值默认为空
2、定义一个选中初始值作为计算选中值

data() {
    return {
      initial:0, //设置选中初始值 作为最终选择几个依据
      imgList:[ //初始数据
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
      ]
    };
  },

3、点击选中/取消时让对应的数据自增或自减

逻辑

1.判断所点击的项的选中状态

开始未选中 — 切换选中状态 – 默认初始值自增1 — 赋值给当前项

if(!item.state){ //开始未选中
        //点击选中,改变当前项的选中状态 设置为true 
        item.state = true
        // 选中初始值 +1
        this.initial++
        // 当前项赋值=设置初始值
        item.serial = this.initial
      }```

2.选中下点击取消（状态值为true时点击）

更改选中状态 — 设置一个空值用于接受最终几个值选中用于更改选中初始值 — 跑循环去自减 — 判断当前点击的选中值和数组中所有选中值做对比 — 数组中的选中值大于当前选中值数组中大于的值自减1 – 判断数组选中状态用于统计-- 有选中则设置控制自+1 – 给选中初始值赋值 – 当前选中值清空

else { //选中下点击取消（状态值为true时点击）
        // 改变当前项选中状态为false
        item.state = false
        // 设置一个空值 用于接受最终几个值选中 用于更改选中初始值
        let xuanzhong = 0
        // 跑循环去自减
        this.imgList.forEach((items,index) => {
          // items = 循环所需要的每一项
          if(items.serial>item.serial){ //判断 当前点击的选中值 和 数组中所有选中值做对比
            // 数组中的选中值 大于 当前选中值 数组中大于的值自减1
            items.serial--
          }
          if(items.state){//判断数组选中状态用于统计
            // 有选中则 设置控制自+1
            xuanzhong ++
          }
        })
        // 给选中初始值 赋值
        this.initial=xuanzhong
        // 当前选中值清空
        item.serial = ''
      }

完整代码

<template>
    
  <div class="app">
    <div class="bgView">
      <div class="bottomView">

        <div class="ceshitt">
          <div class="imgDiv" v-for="(item,index) in imgList" :key="index">
            <img class="bgImg" src="../../assets/img/BGImg1.png" alt="">
            <div :class="['selectBox',item.state ? 'selectClass' :'']" @click="selectClick(item,index)">
              <p v-if="item.state">{{item.serial}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
      
  </div>
</template>

<script>

export default {
  data() {
    return {
      initial:0, //设置选中初始值 作为最终选择几个依据
      imgList:[ //初始数据
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
      ]
    };
  },
  components: {},
  created() {
  },
  mounted() {
  },
  methods: {
    selectClick(item,val){
      // item = 点击事件带过来整条参数
      // val = 所点击的下标
      // 逻辑 1、在原始数组中对象中增加2个值 --- 选中状态 默认false  选中值 默认'',
      // 判断所点击的项的选中状态
      if(!item.state){ //开始未选中
        //点击选中,改变当前项的选中状态 设置为true 
        item.state = true
        // 选中初始值 +1
        this.initial++
        // 当前项赋值=设置初始值
        item.serial = this.initial
      }else { //选中下点击取消（状态值为true时点击）
        // 改变当前项选中状态为false
        item.state = false
        // 设置一个空值 用于接受最终几个值选中 用于更改选中初始值
        let xuanzhong = 0
        // 跑循环去自减
        this.imgList.forEach((items,index) => {
          // items = 循环所需要的每一项
          if(items.serial>item.serial){ //判断 当前点击的选中值 和 数组中所有选中值做对比
            // 数组中的选中值 大于 当前选中值 数组中大于的值自减1
            items.serial--
          }
          if(items.state){//判断数组选中状态用于统计
            // 有选中则 设置控制自+1
            xuanzhong ++
          }
        })
        // 给选中初始值 赋值
        this.initial=xuanzhong
        // 当前选中值清空
        item.serial = ''
      }
    },
  },
};
</script>

<style scoped>

.ceshitt{
  display: flex;
  width: 100%;
  height: 220px;
  flex-wrap: wrap;
/* justify-content: space-between; */
}

.imgDiv{
  width: 30%;
  position: relative;
  margin-right: 10px;
}
.bgImg{
  position: absolute;
  height: 100px;
  width: 100%;
}
.selectBox{
  width: 15px;
  height: 15px;
  line-height: 15px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  color:#FFF ;
  border: 1px solid cyan;
}
.selectClass{
  background-color:#4cc25b ;
}
</style>

到此这篇关于“如何利用JS制作上传图片并可选择的功能”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！