引入组件

局部引入

// parent.vue
const FNumberKeyboard = defineAsyncComponent(() => import('@/components/formaui/f-number-keyboard/f-number-keyboard.vue'))

基础用法

<f-keyboard v-model="showKeyboard" @item-click="clickItem" @cancel="inputValue = ''">
  <view class="w-[600rpx] mx-auto my-[32rpx]">
    <view class="text-center font-semibold mb-[32rpx] text-base">请输入密码</view>
    <f-keyboard-input v-model="inputValue"></f-keyboard-input>
  </view>
</f-keyboard>
<f-button width="200rpx" margin="200rpx auto" @click="click">click</f-button>

import { ref } from 'vue'
const showKeyboard = ref<boolean>(false)
const inputValue = ref<string>('')
const clickItem = (value: string) => {
  inputValue.value = value
  if (inputValue.value.length >= 6) {
    uni.showToast({ title: inputValue.value, icon: 'none' })
    showKeyboard.value = false
  }
}
const click = () => {
  inputValue.value = ''
  showKeyboard.value = true
}

插槽

名称	说明
default	键盘上方展示的内容

属性

名称	类型	说明	默认值
v-model	boolean	是否显示键盘	-
isMask	boolean	是否显示遮罩层	true
closeOnClickMask	boolean	是否点击遮罩层关闭键盘	true
isAnimate	boolean	是否显示动画	true
borderRadius	string	自定义圆角大小	16rpx
fontSize	string	自定义字体大小	32rpx
textColor	string	自定义字体颜色	#0B1D4A
cancelText	string	自定义取消按钮文字	取消
cancelColor	string	自定义取消按钮字体颜色	#0B1D4A
cancelBgColor	string	自定义取消按钮背景颜色	#E7E6EB
delText	string	自定义删除按钮文字	删除
delColor	string	自定义删除按钮字体颜色	#0B1D4A
delBgColor	string	自定义删除按钮背景颜色	#E7E6EB
bgColor	string	自定义键盘背景颜色	#FFFFFF
zIndex	number	自定义键盘 z-index	12000

事件

事件名	说明	回调参数
itemClick	点击键盘上的按钮时触发	键盘绑定的值
cancel	点击取消按钮时触发	-

方法

方法名	说明	传入参数
-	-	-