{"slug":"bankcardinput","mode":"single","examples":[{"id":"bankcardinput-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">BankCardInput 银行卡输入</h2>\n  <p class=\"kole-desc\">自动每 4 位空格、识别卡组织、Luhn 校验。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">基础用法</div>\n    <div class=\"kole-card\" id=\"card\">\n      <div class=\"kole-card-field\" id=\"field\">\n        <input class=\"kole-card-input\" id=\"input\" inputmode=\"numeric\" maxlength=\"23\" placeholder=\"请输入银行卡号\" />\n        <span class=\"kole-card-type unknown\" id=\"type\">识别中</span>\n      </div>\n      <div class=\"kole-card-tip\" id=\"tip\">支持 Visa / MasterCard / 银联等</div>\n    </div>\n  </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<h2>BankCardInput 银行卡输入</h2>\n<p>自动每 4 位空格、识别卡组织、Luhn 校验。</p>\n<div>基础用法</div>\n<div class=\"kole-card\" id=\"card\">\n  <div class=\"kole-card-field\">\n    <input class=\"kole-card-input\" inputmode=\"numeric\" maxlength=\"23\" placeholder=\"请输入银行卡号\" />\n    <span class=\"kole-card-type unknown\">识别中</span>\n  </div>\n  <div class=\"kole-card-tip\">支持 Visa / MasterCard / 银联等</div>\n</div>","jsx":"import { KoleBankCardInput } from 'kole-ui/react';\n\n<>\n<KoleBankCardInput placeholder=\"请输入银行卡号\" id=\"card\">识别中 支持 Visa / MasterCard / 银联等</KoleBankCardInput>\n</>","vue3":"import { KoleBankCardInput } from 'kole-ui/vue3';\n\n<template>\n<KoleBankCardInput placeholder=\"请输入银行卡号\" id=\"card\">识别中 支持 Visa / MasterCard / 银联等</KoleBankCardInput>\n</template>","vue2":"import { KoleBankCardInput } from 'kole-ui/vue2';\n\n<template>\n<KoleBankCardInput placeholder=\"请输入银行卡号\" id=\"card\">识别中 支持 Visa / MasterCard / 银联等</KoleBankCardInput>\n</template>"},"notes":[]}]}