0.0.3 • Published 2 years ago
reregi-test-components v0.0.3
vue3_plate_num_input
一、简介
- 基于 vue3+TS 的中国大陆车牌号输入组件
二、预览
试用自定义样式
码云-暂无
三、使用
引用
npm
npm install vue3_plate_num_input
全局注册
import { createApp } from "vue";
import App from "./App.vue";
import plateNumInput from "./plateNumInput/"; //下载组件引用
import plateNumInput from "vue3_plate_num_input"; //npm
createApp(App).use(plateNumInput).mount("#app");
组件内引用
import { defineComponent, Ref, ref } from "vue";
import plateNumInput from "./plateNumInput/src"; //下载组件引用
import { plateNumInput } from "vue3_plate_num_input"; //npm
export default defineComponent({
components: {
plateNumInput,
},
});
API
v-model
使用v-model:defaultPlateNum
进行车牌的双向绑定
<plateNumInput v-model:defaultPlateNum="plateNum"></plateNumInput>
Props
控制大小的属性需要加上单位,方便移动端项目使用的不同像素单位调整,不固定为 px。
属性 | 变量名 | 类型 |
---|---|---|
isNewEnergy | 是否新能源 | boolean |
width | 字符框宽度 | string |
height | 字符框高度 | string |
fontSize | 字符框字体大小 | string |
fontColor | 字符框字体颜色 | string |
borderColor | 字符框边框颜色 | string |
inputPanelBgColor | 输入面板背景颜色 | string |
btnColor | 输入面板按钮背景颜色 | string |
btnActiveColor | 输入面板按钮 active 颜色 | string |
btnFontColor | 输入面板按钮字体颜色 | string |
inputPanelFontSize | 输入面板字体大小 | string |
License
MIT
问题与建议
请移步到 GitHub issues
感谢
- KoroLin
- 支付宝停车的那个页面
- vue-car-number
版本号
- 1.0.0 正式版