vue实现多选，反选

<template>
  <div class="filter_country">
    <div class="checkbox_text">选择国家(可多选)</div>
    <div class="checkbox_text_right">
      <div class="country_flag">
        <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"
        >
          <div class="flag_icon">
            <img :src="item.logo" style="width: 30px; height: 16px" />
          </div>
          <div class="flag_text">{{ item.name_cn }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<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>

<template>
  <div class="filter_country">
    <div class="checkbox_text">选择国家(可多选)</div>
    <div class="checkbox_text_right">
      <div class="country_flag">
        <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"
        >
          <div class="flag_icon">
            <img :src="item.logo" style="width: 30px; height: 16px" />
          </div>
          <div class="flag_text">{{ item.name_cn }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<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>

posted @ 2021-12-23 17:07 Ocean- 阅读(177) 评论(0) 收藏举报

刷新页面返回顶部

Ocean-

vue实现多选，反选

公告