|
|
@@ -0,0 +1,76 @@ |
|
|
|
<!-- |
|
|
|
* @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> |