效果圖

1. 子元件需要接受（父元件）兩個值
   • isShow：是否顯示元件的
   • checkboxArr：可供多選的陣列

<template>
    <div class="modal_mask"  v-if="isShow">
      <div class="modal_Box">
        <div class="modal_title">
            <button @tap="tapNoShow">取消</button>
            <p>選擇保司</p>
            <button @tap="tapComfirm">確定</button>
        </div>
        <div class="modal_content">
          <scroll-view :scroll-y="isShow" style="height: 100%;">
            <radio-group>
            // 控制多選的三種顏色，預設顏色，選中顏色， 選中三個之後不可選的顏色
              <label :class="{checkbox: true, checked: item.checked, banColor: flag }" v-for="(item,index) in checkboxArr" @tap.stop="radio2" :id="index" :key="item.name">
                <checkbox :value="item.name" :checked="item.checked" :disabled="(!item.checked) && flag"/>{{item.name}}
              </label>
            </radio-group>
          </scroll-view>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "index",
    props:["isShow","checkboxArr"],
    data(){
      return{
        checkedInsurance:[],
        flag: false,
      }
    },
    methods:{
      radio2 (e) {
      // 最多選擇三個（自己可控制多選的個數）
        if(this.checkedInsurance.length ==3) {
          let index = e.mp.target.id;//獲取當前點選的下標
          if(this.checkboxArr[index].checked){
            this.checkboxArr[index].checked = false;
            this.checkedInsurance=[];
            this.checkboxArr.forEach(item => {
              if(item.checked){
                this.checkedInsurance.push(item);
              }
            });
            this.flag = false;
          }else {
            this.flag = true;
          }
          return;
        }
        let index = e.mp.target.id;//獲取當前點選的下標
        this.checkboxArr[index].checked = !this.checkboxArr[index].checked;//改變當前選中的checked值
        this.checkedInsurance=[];
        this.checkboxArr.forEach(item => {
          if(item.checked){
            this.checkedInsurance.push(item);
          }
        });
        if(this.checkedInsurance.length ==3){
          this.flag = true;
        }
      },
      // 取消之後傳給父元件的值
      tapNoShow(){
        this.isShow = false;
        this.checkboxArr.forEach(item => {
          item.checked= false
        });
        this.checkedInsurance=[];
        this.flag = false;
        this.$emit('getInsurance',this.checkedInsurance, this.isShow);
      },
       // 確定之後傳給父元件的值
      tapComfirm(){
        this.isShow = false;
        this.$emit('getInsurance',this.checkedInsurance, this.isShow);
      },
    },
  };
</script>

<style scoped>
  .modal_mask{
    width: 100%;
    height: 65%;
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    z-index: 10;
  }
  .modal_Box{
    height: 35%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    bottom: 0;
    background-color: #fff;
  }
  .modal_title{
    display: flex;
    justify-content: space-between;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 32px;
  }
  .modal_title button{
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #508CEE;
    margin: 0px 0px;
    vertical-align: middle;
    line-height: 80px;
  }
  .modal_title p{
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #333333;
  }
  .modal_content{
    height: 360px;
    padding: 0px 10px 0px 30px;
  }
  .color{
    color: red;
  }
  .wrap{
    width: 550px;
    margin: 50px auto;
  }

  .checkbox-con{
    margin-top: 40px;
    text-align: center
  }
  .checkbox{
    width: 216px;
    height: 48px;
    line-height: 48px;
    font-family: PingFangSC-Regular;
    font-size: 26px;
    color: #666666;
    text-align: center;
    display: inline-block;
    position: relative;
    z-index: 9999;
    background-color: #f9f9f9;
    margin-right: 20px;
    margin-bottom: 26px;
  }
  .checkbox:first-of-type{
    margin-top: 40px;
  }
  .checkbox:last-of-type{
    margin-bottom: 40px;
  }
  .checked{
    color: #508CEE !important;
    background: #F2F7FF;
  }
  .banColor{
    color: #b4b4b4;
  }
  .checkbox checkbox{
    display: none
  }

</style>

 

2. 父元件的呼叫

<template>
// 類名page{overflow-y: hidden;}是顯示彈框之後不給頁面滑動，但彈框內容可以滑動
  <div :class="{insuranceConfirmation:true, page: isShow}">
    <!-- 投保保司 -->
    <div class="insuranceDivision padding0_30">
      <div class="titleBox displayFlex">
        <div class="title_left">投保保司</div>
        <div class="title_right displayFlex" @tap="insuranceDialog">
          <div class="rightInsurance">{{divisionStr}}</div>
          <div class="rightIcon iconfont"></div>
        </div>
      </div>
    </div>
    // 父元件兩個傳值和子需要出發父元件的事件
    <customCheckBox :isShow="isShow" :checkboxArr="checkboxArr" @getInsurance = "getInsurance"></customCheckBox>
  </div>
</template>

<script>
// 引用元件
  import customCheckBox from "@/components/checkBox/index";

  export default {
    onLoad() {

    },
    onShow() {

    },
    computed() {

    },
    mounted() {

    },
    data() {
      return {
        divisionStr: "請選擇", // 儲存保司的字串
        divisionInsurance: [], // 儲存保司的陣列
        isShow: false,
        checkboxArr: [{
          name: '選項A',
          checked: false
        }, {
          name: '選項B',
          checked: false
        }, {
          name: '選項C',
          checked: false
        }, {
          name: '選項D',
          checked: false
        }, {
          name: '選項E',
          checked: false
        }, {
          name: '選項F',
          checked: false
        }, {
          name: '選項G',
          checked: false
        }, {
          name: '選項H',
          checked: false
        }, {
          name: '選項I',
          checked: false
        }, {
          name: '選項J',
          checked: false
        }, {
          name: '選項K',
          checked: false
        }, {
          name: '選項M',
          checked: false
        }, {
          name: '選項N',
          checked: false
        }, {
          name: '選項O',
          checked: false
        }, {
          name: '選項P',
          checked: false
        }, {
          name: '選項Q',
          checked: false
        }, {
          name: '選項R',
          checked: false
        },{
          name: '選項S',
          checked: false
        }, {
          name: '選項T',
          checked: false
        }, {
          name: '選項U',
          checked: false
        }, {
          name: '選項V',
          checked: false
        }, {
          name: '選項W',
          checked: false
        }, {
          name: '選項X',
          checked: false
        }, {
          name: '選項Y',
          checked: false
        }, {
          name: '選項Z',
          checked: false
        }],
      };
    },
    components: { customCheckBox},
    methods: {
      // 處理子元件傳過來的值
      getInsurance(divisionsurance, isShow){
        if(divisionsurance.length!=0){
          this.divisionInsurance = divisionsurance;
          this.divisionStr = '';
          this.divisionInsurance.forEach(item=>{
            this.divisionStr += item.name +' ';
          })
        }else{
          this.divisionStr = '請選擇';
        }
        this.isShow = isShow;
      },
      insuranceDialog() {
        this.isShow = true;
        console.log(this.isShow)
      }
    },
  };
</script>

<style lang='scss'>
  @import "./style.scss";
</style>