h5-colexiu/src/teacher/teacher-cert/module/subject-model.tsx

import { Button, Checkbox, Icon, Image } from "vant";
import { defineComponent } from "vue";
import styles from './subject-model.module.less';

import checkBoxActive from '../images/checkbox_active.png';
import checkBoxDefault from '../images/checkbox_default.png';

export default defineComponent({
  name: "subject-model",
  props: {
    onChoice: {
      type: Function,
      default: (item: any) => { }
    }
  },
  data() {
    return {
      checkBox: []
    }
  },
  render() {
    return (
      <div class={styles.subjects}>
        <div class={styles['subject-list']}>
          {[1, 2, 3, 4, 5].map((item: any) => (
            <div class={styles['subject-item']}>
            <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="100%" fit="cover" />
            <div class={styles.topBg}>
              <Checkbox v-model={this.checkBox} name={1} class={styles.checkbox} v-slots={{
                icon: (props: any) => (
                  <Icon name={props.checked ? checkBoxActive : checkBoxDefault} size="22" />
                )
              }} />
              <p class={styles.name}>长笛</p>
            </div>
          </div>
          )) }
        </div>

        <div class={styles["btn-group"]}>
          <Button round block type="primary" onClick={() => this.onChoice(true)}>确定</Button>
        </div>
      </div>
    )
  }
})