grid-input

组件介绍

grid-input是一个答题格子输入组件，详见下图: https://xydideo.gitee.io/blog/public-image/grid-input.gif

组件依赖

vue3、less

如需vue2支持可查看源码noode_modules/grid-input/src自行改造

组件使用

使用demo示例

<template>
  <div class="page">

    <grid-input ref="gridInputRef" ansChart="#" :que="str" :answer="answer" @handleSubmit="handleSubmit" />

    <div style="margin-left:20px;margin-top:40px; font-size:15px">
      <div>正确答案：今天四周五</div>
      <van-button type='primary' @click="handleCheck">点击答案检查</van-button>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"

import { GridInput } from 'grid-input'
import 'grid-input/style.css'

// 或者全局在main.js中引入
// import GridInput from 'grid-input'
// import 'grid-input/style.css'
// app.use(GridInput)

let str = "第1题：##是周三，明天是周#，后天是##。"
let answer = "今天四周五"
let gridInputRef = ref(null)

// blur时候触发
const handleSubmit = (ansArr, ansChart, allResult) => {
}

// 检查一下输入是否正确
function handleCheck() {
  gridInputRef.value.checkAns(answer)
}
</script>

组件api

Props

| 参数 | 说明 | 类型 | 默认值 | |----------|------------|--------|--------------------------------------| | ansChart | 答案占位字符 | String | # | | que | 题目 | String | 第1题：##是周三，明天是周#，后天是##。 |

Events

| 参数 | 说明 | 回调参数 | | -------- | ------------------ | ------- | | handleSubmit | 输入的信息，blur时候触发 | ansArr, ansChart, allResult | | handleCheck | 检查答案（子组件的方法）通过refs进行调用 | - |