Agree 勾选按钮

Scan me!

用于标记切换某种状态,如协议勾选

引入

  1. import { Agree } from 'mand-mobile'
  2. Vue.component(Agree.name, Agree)

代码演示

选中状态

  1. <template>
  2. <div class="md-example-child md-example-child-agree md-example-child-0">
  3. <md-agree
  4. v-model="agreeConf.checked"
  5. :disabled="agreeConf.disabled"
  6. :size="agreeConf.size"
  7. @change="onChange(agreeConf.name, agreeConf.checked, $event)"
  8. >
  9. 本人承诺投保人已充分了解本保险产品,并保证投保信息的真实性,理解并同意<a>《投保须知》</a>, <a>《保险条款》</a>
  10. </md-agree>
  11. </div>
  12. </template>
  13. <script>
  14. import {Agree} from 'mand-mobile'
  15. export default {
  16. name: 'agree-demo',
  17. components: {
  18. [Agree.name]: Agree,
  19. },
  20. data() {
  21. return {
  22. agreeConf: {
  23. checked: true,
  24. name: 'agree0',
  25. size: 'lg',
  26. disabled: false,
  27. introduction: '选中状态',
  28. },
  29. }
  30. },
  31. methods: {
  32. onChange(name, checked) {
  33. console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
  34. },
  35. },
  36. }
  37. </script>
  38.  

选中不可用状态

  1. <template>
  2. <div class="md-example-child md-example-child-agree md-example-child-2">
  3. <md-agree
  4. v-model="agreeConf.checked"
  5. :disabled="agreeConf.disabled"
  6. :size="agreeConf.size"
  7. @change="onChange(agreeConf.name, agreeConf.checked, $event)"
  8. >
  9. 本人承诺投保人已充分了解本保险产品,并保证投保信息的真实性,理解并同意
  10. </md-agree>
  11. </div>
  12. </template>
  13. <script>
  14. import {Agree} from 'mand-mobile'
  15. export default {
  16. name: 'agree-demo',
  17. components: {
  18. [Agree.name]: Agree,
  19. },
  20. data() {
  21. return {
  22. agreeConf: {
  23. checked: true,
  24. name: 'agree2',
  25. size: 'lg',
  26. disabled: true,
  27. introduction: '选中不可用状态',
  28. },
  29. }
  30. },
  31. methods: {
  32. onChange(name, checked) {
  33. console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
  34. },
  35. },
  36. }
  37. </script>
  38.  

未选中状态

  1. <template>
  2. <div class="md-example-child md-example-child-agree md-example-child-1">
  3. <md-agree
  4. v-model="agreeConf.checked"
  5. :disabled="agreeConf.disabled"
  6. :size="agreeConf.size"
  7. @change="onChange(agreeConf.name, agreeConf.checked, $event)"
  8. >
  9. 本人承诺投保人已充分了解本保险产品,并保证投保信息的真实性,理解并同意
  10. </md-agree>
  11. </div>
  12. </template>
  13. <script>
  14. import {Agree} from 'mand-mobile'
  15. export default {
  16. name: 'agree-demo',
  17. components: {
  18. [Agree.name]: Agree,
  19. },
  20. data() {
  21. return {
  22. agreeConf: {
  23. checked: false,
  24. name: 'agree1',
  25. size: 'lg',
  26. disabled: false,
  27. introduction: '未选中状态',
  28. },
  29. }
  30. },
  31. methods: {
  32. onChange(name, checked) {
  33. console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
  34. },
  35. },
  36. }
  37. </script>

未选中不可用状态

  1. <template>
  2. <div class="md-example-child md-example-child-agree md-example-child-3">
  3. <md-agree
  4. v-model="agreeConf.checked"
  5. :disabled="agreeConf.disabled"
  6. :size="agreeConf.size"
  7. @change="onChange(agreeConf.name, agreeConf.checked, $event)"
  8. >
  9. 本人承诺投保人已充分了解本保险产品,并保证投保信息的真实性,理解并同意
  10. </md-agree>
  11. </div>
  12. </template>
  13. <script>
  14. import {Agree} from 'mand-mobile'
  15. export default {
  16. name: 'agree-demo',
  17. components: {
  18. [Agree.name]: Agree,
  19. },
  20. data() {
  21. return {
  22. agreeConf: {
  23. checked: false,
  24. name: 'agree3',
  25. size: 'lg',
  26. disabled: true,
  27. introduction: '未选中不可用状态',
  28. },
  29. }
  30. },
  31. methods: {
  32. onChange(name, checked) {
  33. console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
  34. },
  35. },
  36. }
  37. </script>

API

Agree Props

属性说明类型默认值
v-model是否选中Booleanfalse
disabled是否禁用Booleanfalse
size按钮大小,可选值同iconStringmd

Agree Events

@change(name, checked)

勾选状态发生变化事件

属性说明类型
name单选按钮名称,唯一标识Number/String
checked是否选中Boolean