Переглянути джерело

- 增加 Checkbox 组件, '@/components/checkbox'

feat
JinxChen 2 роки тому
джерело
коміт
b116b9d3b3
2 змінених файлів з 86 додано та 0 видалено
  1. +76
    -0
      src/components/Checkbox.vue
  2. +10
    -0
      src/utils/bus.js

+ 76
- 0
src/components/Checkbox.vue Переглянути файл

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

+ 10
- 0
src/utils/bus.js Переглянути файл

@@ -0,0 +1,10 @@
/*
* @Date: 2022-02-28 15:30:40
* @LastEditors: JinxChen
* @LastEditTime: 2022-02-28 15:30:43
* @FilePath: \AntpayFrontEnd\src\utils\bus.js
* @description:
*/
import Vue from 'vue';
const bus = new Vue();
export default bus;

Завантаження…
Відмінити
Зберегти