TelpoH5FrontendWeb/src/components/Checkbox.vue

<!--
 * @Date: 2022-02-26 09:26:04
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-03-04 11:40:00
 * @FilePath: \AntpayFrontEnd\src\components\Checkbox.vue
 * @description: 单选框组件
-->
<template>
    <div class="checkbox-container">
        <van-checkbox v-model="checked" shape="square" @change="onCheckChange">
            <strong >已阅读协议并确认</strong>
        </van-checkbox>
    </div>
</template>

<script>
export default {
  name:'checkbox',
  mounted() {
      this.getDialogData();
  },
  data(){
   return {
       checked: false,
   }
  },
  methods: {
    //   获取从dialog组件传过来的参数
    getDialogData() {
        this.$bus.$on('getCheckStatus', (data) => {
            this.checked = data;
        })
    },
    //   单选框值发生变化时
    onCheckChange(value) {
        this.checked = value;
        this.$emit('SendCheckStatus', value);
    },
  }
}
</script>

<style scoped lang="scss">
.checkbox-container {
    margin: 5px 0;
    .agreement-container {
        .agreement-content {
            height: 500px;
            padding: 5px 10px;
            border-top: 0.5px soild;
            border-bottom: 0.5px soild;
            text-align: left;
            overflow: scroll;
            h5 {
                padding: 5px;
            }
            p {
                padding: 5px;
                font-size: 14px;
                line-height: 20px;
            }
            .agreement-button {
                padding: 10px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .van-button {
                    height: 30px;
                    width: 120px;
                    border-radius: 10px;
                }
            }
        }
    }
}
</style>