{"slug":"phoneinput","mode":"single","examples":[{"id":"phoneinput-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">PhoneInput 手机号输入</h2>\n  <p class=\"kole-desc\">国际区号选择 + 自动格式化 + 校验，适用于注册、登录。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">基础用法</div>\n    <div class=\"kole-phone\" id=\"phone\">\n      <select class=\"kole-phone-code\" id=\"code\">\n        <option value=\"+86\">+86</option>\n        <option value=\"+852\">+852</option>\n        <option value=\"+1\">+1</option>\n        <option value=\"+81\">+81</option>\n      </select>\n      <input class=\"kole-phone-input\" id=\"num\" role=\"group\" inputmode=\"numeric\" placeholder=\"请输入手机号\" />\n    </div>\n    <div class=\"kole-phone-tip\" id=\"tip\">支持中国大陆、香港、美、日等区号</div>\n  </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<h2>PhoneInput 手机号输入</h2>\n<p>国际区号选择 + 自动格式化 + 校验，适用于注册、登录。</p>\n<div>基础用法</div>\n<div class=\"kole-phone\">\n  <select class=\"kole-phone-code\">\n    <option value=\"+86\">+86</option>\n    <option value=\"+852\">+852</option>\n    <option value=\"+1\">+1</option>\n    <option value=\"+81\">+81</option>\n  </select>\n  <input class=\"kole-phone-input\" role=\"group\" inputmode=\"numeric\" placeholder=\"请输入手机号\" />\n</div>\n<div class=\"kole-phone-tip\">支持中国大陆、香港、美、日等区号</div>","jsx":"import { KolePhoneInput } from 'kole-ui/react';\n\n<>\n<KolePhoneInput placeholder=\"请输入手机号\">+86 +852 +1 +81</KolePhoneInput>\n</>","vue3":"import { KolePhoneInput } from 'kole-ui/vue3';\n\n<template>\n<KolePhoneInput placeholder=\"请输入手机号\">+86 +852 +1 +81</KolePhoneInput>\n</template>","vue2":"import { KolePhoneInput } from 'kole-ui/vue2';\n\n<template>\n<KolePhoneInput placeholder=\"请输入手机号\">+86 +852 +1 +81</KolePhoneInput>\n</template>"},"notes":[]}]}