vue实现多选，反选
选择国家(可多选)<div class="flag" v-for="(item, index) in CountryData" @click="onStorage(item.name_cn, index)" :class="{ active: rSelect.indexOf(item.name_cn) != -1 }" :key="index" >![]()
{{ item.name_cn }}
<script> export default { data() { return { rSelect: [], CountryData: [ { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/us.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1fdf8b429a422cd9d4c1f70d7a35b85a5a532ef86c11953028e21b0a4157d91c", name_cn: "美国", name_en: "America/USA/United States of America", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/%E5%A4%AA%E5%B9%B3%E6%B4%8Blogo.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a690ecc4a666d0fcdedd0abd2c2524475278843287e632736f7df1d9574365a7", name_cn: "西太平洋", name_en: "West Pacific/WestPac/Western Pacific", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/%E5%A4%AA%E5%B9%B3%E6%B4%8Blogo.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a690ecc4a666d0fcdedd0abd2c2524475278843287e632736f7df1d9574365a7", name_cn: "太平洋", name_en: "Pac/Pacific Ocean", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/ph.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eb5eddeea2af9aa90b28ab3e30922dba03565078b56e92ebdeff099ff3c148cc", name_cn: "菲律宾", name_en: "Philippines", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/vn.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=f78674e1573d327d971720b52abe8bedcca6944741cbc31c8642495470c0792f", name_cn: "越南", name_en: "Vietnam", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/jp.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=3de0d6b9643364b90f8542a6dc302f69dbf4129ccb26c5ddda78da33d1b854a4", name_cn: "日本", name_en: "Japan", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/pe.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=8de626b44a7be1e105749d1460a8d9754a6b968b248734b6b9f37d732cf2fac6", name_cn: "秘鲁", name_en: "Peru", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/%E5%A4%AA%E5%B9%B3%E6%B4%8Blogo.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a690ecc4a666d0fcdedd0abd2c2524475278843287e632736f7df1d9574365a7", name_cn: "东太平洋", name_en: "East Pacific/EastPac", }, { logo: "http://10.168.160.104:9000/pattern/service/resources/location/flag/%E4%BA%BA%E5%B7%A5.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T084515Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b26079959f4c2074b4c895b8fde6fc1b8afeb1f20c5a5e2707efe6325f56b640", name_cn: "人工", name_en: "custom", }, ], }; }, methods: { onStorage(value) { if (this.rSelect.indexOf(value) !== -1) { this.rSelect.splice(this.rSelect.indexOf(value), 1); //取消 } else { this.rSelect.push(value); //选中添加到数组里 } this.choiceData = this.rSelect.join(); }, }, }; script>
<style scoped > .filter_country { width: 100%; display: flex; min-height: 6rem; padding-left: 2rem; } .checkbox_text { color: red; font-size: 1rem; width: 10rem; line-height: 2.5rem; } .country_flag { width: 100%; flex-wrap: wrap; display: flex; white-space: nowrap; overflow-x: scroll; } .active { background: rgba(39, 146, 245, 0.5); } ::-webkit-scrollbar { display: none; } .flag { margin-top: 6px; margin-right: 10px; display: flex; min-width: 7rem; align-items: center; border: 1px solid #226fde; padding: 4px; } .flag:hover { background-color: #173d74; cursor: pointer; }
.flag_text { width: 70%; font-size: 1rem; color: #dce0e8; } .flag_icon { width: 30%; vertical-align: middle; margin-left: 4px; } img { vertical-align: middle; } style>