grid-input v1.0.11

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

Events