Recently, when modifying a front-end project I took over, I had an optimization requirement: I needed to prevent the same item from being selected multiple times at the same time. Specific requirements are as follows:
In fact, the above problem is very simple, just do a single item click event to prohibit multiple selection processing, but this blog post is “a storm in a teacup”, or by the way to introduce the use of findIndex() **** method.
The specific operations are as follows:
1.
<a-modal :visible=”showListModal”
:centered=”true”
width=”660″
height=”440″
OkText = “sure”
CancelText = “cancel”
@ok=”selectDone”
@cancel=”cancelSelect”>
<section class=”media-list clearfix”>
<a href=”javascript:;”
:class=”[‘item’,{selected: isMediaSelected(item.id)}]”
v-for=”item in sourceMediaList”
:key=”item.id”
@click=”selectMedia(item)”>
<div class=”topPart”>
<img v-if=”item.type == 2″
:src=”item.url”
class=”img-fluid” />
<video v-else-if=”item.type == 3″
controls
autoplay
class=”img-fluid”>
<source :src=”item.url+ ‘&token=’ + token”
type=”video/mp4″ />
</video>
</div>
<div class=”ellipsis bottomPart”
:title=”item.mediaName”>{{item.mediaName}}</div>
</a>
</section>
<a-pagination v-model=”queryObj.current”
:total=”queryObj.total”
@change=”pageChange” />
</a-modal>
2,
methods: {
selectMedia (item) {
if (this.isMediaSelected(item.id)) {
return;
}
},
isMediaSelected (id) {
return this.mediaList.findIndex(item => item.mediaId === id) > -1;
},
}
The final effect looks like this:
The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “iOS development by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention to it!