实现动态循环列表上播放和暂停按钮来回切换且列表之间只能有一个处于播放状态的功能

实现动态循环列表上播放和暂停按钮来回切换且列表之间只能有一个处于播放状态的功能

场景：
通过v-if循环出来的列表图片上添加暂停和播放的按钮，两个按钮是同一个位置，通过v-show显示和隐藏对应的svg-icon标签来达到切换效果，且列表之间只能有一个处于播放状态；因为项目原因，这个按钮是来控制对应模型的漫游功能，大家只看功能就可以啦~

注意：
其中workShopList 里面的数据实际是从后台请求的，这里直接将workShopList 里面的数据写在data中，方便展示；
例子中isShow=true代表按钮是暂停状态；isShow=false代表按钮是播放状态；

重点：
**给循环出来的每一个对象上增加isShow=true属性，**在单击时传入当前点击按钮的id,单击事件的逻辑是，将workShopList 进行循环，如果循环到id和当前点击的按钮id是同一个，则将isShow=！isShow，否则就循环到和当前点击的按钮不是同一个，不是同一个情况下，如果循环到按钮的是false，证明这个按钮是播放状态，则其他按钮就暂停。
注意：在这个过程中要自定义一个空的列表集合workShopListTemp，循环后每一项的isShow状态发生变化时，就要将变化的列表push到新的列表集合中去，最后将新的列表赋值给workShopList
有点绕，写这么详细就是为了加强理解，前端小白一枚~

想要展示的效果如下图：

HTML:

<div class="branchWorkshop">
	 <ul>
		 <li v-for="(itemitem,i) in workShopList" :key="i">
			<div class="workshopImg" 
			:style="{ 'background-image': 'url(' + item.imgUrl + ')',
			'background-repeat':'no-repeat','background-size':'cover'}">
				<a href='javascript:;' 
				@click="handleWorkShopKeepOut(item.id)" >
					<svg-icon slot="prefix"
					iconClass="play" 
					class="el-icon-user-solid" 
					id="playButton" 
					v-show="item.isShow" />
					<svg-icon slot="prefix" 
					iconClass="suspended" 
					class="el-icon-user-solid" 
					id="playButton" 
					v-show="!item.isShow" />
				</a>
			</div>
			<span style="color:white">{{item.label}}</span>
		</li>
	 </ul>
</div>

JS:

<script>
export default {
    data(){
        return{
           //这里是在后台请求中增加isShow2=true的列表
        	workShopList:[{
				id: 1
				imgUrl: "/static/manyou/ws.png"
				label: "demo"
				isShow:true
        	},{
				id: 2
				imgUrl: "/static/manyou/zz.png"
				label: "demo"
				isShow:true
        	},{
	        	id: 3
				imgUrl: "/static/manyou/ym.png"
				label: "demo"
				isShow:true
        	},{
	        	id: 4
				imgUrl: "/static/manyou/zxn.png"
				label: "demo"
				isShow:true
        	},{
	        	d: 5
				imgUrl: "/static/manyou/ns.png"
				label: "demo"
				isShow:true
        	},
        	{
	        	d: 6
				imgUrl: "/static/manyou/wm.png"
				label: "demo"
				isShow:true
        	}]
        }
    },
    methods:{
	    handleWorkShopKeepOut(everyWorkShopId){
          this.workShopListTemp = []
          this.workShopList.map(item => {
            if(item.id === everyWorkShopId){
              item.isShow = !item.isShow
              this.workShopListTemp.push(item)
            }else{
              if(!item.isShow){
                item.isShow2 = true
              }
              this.workShopListTemp.push(item)
            }
          })
          this.workShopList = []
          this.workShopList = this.workShopListTemp
        }
     }
     mounted(){
     	 getTreeList("").then((res) => {
            if(res.code === 200){
            // 动态给循环出来的每一项增加item.isShow2的属性，并赋值为true
              res.data[0].children.map(item => {
                item.isShow=true;
              })
              //先给循环出来的每条数据增加item.isShow2的属性，再将新的带有
              //item.isShow2属性的数据赋值给this.workShopList
              this.workShopList = res.data[0].children
            }else{
              this.$message.error(res.msg)
            }
          })
     }
}
</script>

CSS:

<style>
.branchWorkshop{
  width: 400px;
  height: 650px;
  overflow: hidden;
}
.branchWorkshop ul{
  display: flex;
  width: 90%;
  height: 100%;
  margin:0;
  padding:0;
  flex-wrap: wrap;
  /* 垂直居中 */
  align-items: center;
  /* ul里面的字体图片水平居中 */
  text-align:center; 
  /* ul盒子里面的内容水平居中 */
  margin:0 auto;  
}
.branchWorkshop li{
  width: 30%;
  height: 15%;
  list-style: none;
  /* li在ul里面水平居中 */
  margin:0 auto;
  margin-right: 2%;
 
}
.workshopImg{
  width: 100%;
  height: 100%;
}
</style>

总结：
不能直接给两个svg-icon标签分别绑定v-show=isShow和v-show=！isShow的值（isShow=true），这样绑定下来，列表里的每一个按钮状态都是同步的；
出发点是给每一个元素的isShow都起一个单独的名字（这个方法对只有列表元的可以这样写，但是如果有n个列表元素，明显不合理~），或者这个isShow是每一个元素自身的，那就不存在一个列表元素的按钮变，所有列表按钮都跟着变的情况了；