classroom-app/src/views/courseware-play/component/tool.tsx

import { Grid, GridItem } from 'vant'
import { defineComponent } from 'vue'
import styles from './tool.module.less'
import iconPen from '../image/icon-pen.png'

export type ToolType =  'init' | 'pen'

export type ToolItem = {
    type: ToolType
    name: string
    icon: string
}

export default defineComponent({
  name: 'tool',
  emits: ['handleTool'],
  setup(props, { emit }) {
    const tool: ToolItem[] = [
      {
        type: 'pen',
        icon: iconPen,
        name: '批注'
      }
    ]
    return () => (
      <div class={styles.tool}>
        <div class={styles.title}>教学功能</div>
        <Grid class={styles.grid} columnNum={3} border={false}>
          {tool.map((item) => (
            <GridItem
              icon={item.icon}
              text={item.name}
              onClick={() => emit('handleTool', item)}
            ></GridItem>
          ))}
        </Grid>
      </div>
    )
  }
})