classroom/src/views/coursewarePlayOld/component/tool.tsx

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

export type ToolType = "init" | "pen" | "white"

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

export default defineComponent({
   name: "o-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>
      )
   }
})