243 lines
6.7 KiB
Vue
243 lines
6.7 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-wrap">
|
||
<view class="fui-page__hd">
|
||
<view class="fui-page__title fui-align__center" @tap="vip">DigitalKeyboard <image
|
||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||
</view>
|
||
<view class="fui-page__desc">DigitalKeyboard 数字键盘，一般用于数字输入，如金额、密码、验证码输入等。</view>
|
||
</view>
|
||
<view class="fui-page__bd">
|
||
<fui-single-input :native="false" isFocus borderColor="#ccc" :value="value" @focus="onFocus" ref="fui_si">
|
||
</fui-single-input>
|
||
<view class="fui-flex__center fui-flex__column">
|
||
<fui-button type="gray" btn-size="medium" text="默认键盘" bold @click="btnTap(0)">
|
||
</fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="改变按钮背景色" bold :margin="['24rpx']"
|
||
@click="btnTap(1)"></fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="带小数点" bold @click="btnTap(2)">
|
||
</fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="带取消按钮" bold :margin="['24rpx']"
|
||
@click="btnTap(3)"></fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="带清空按钮" bold @click="btnTap(4)"></fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="暗黑模式" bold :margin="['24rpx']"
|
||
@click="btnTap(5)"></fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="身份证键盘" bold @click="btnTap(6)"></fui-button>
|
||
<fui-button type="gray" btn-size="medium" text="自定义插槽内容" :margin="['24rpx']" bold
|
||
@click="btnClick">
|
||
</fui-button>
|
||
</view>
|
||
<fui-digital-keyboard :show="show" :background="background" :decimal="decimal" :spareKey="spareKey"
|
||
:theme="theme" @click="keyClick" @confirm="confirm" @backspace="backspace" @spare="spare">
|
||
</fui-digital-keyboard>
|
||
|
||
<!--自定义插槽内容示例-->
|
||
<fui-backdrop :zIndex="9" :show="visible"></fui-backdrop>
|
||
<fui-digital-keyboard :zIndex="10" :show="visible" spareKey="取消" background="#09BE4F" @click="keyClick2"
|
||
@confirm="confirm2" @backspace="backspace2" @spare="spare2">
|
||
<view class="fui-dk__header">
|
||
<text class="fui-title">请输入密码</text>
|
||
<fui-single-input :native="false" borderColor="#ccc" border="1" borderWidth="1" radius="16"
|
||
activeColor="#09BE4F" cursorHeight="40" cursorColor="#09BE4F" :length="6" width="80" height="80"
|
||
size="24" password isFocus :value="value2" ref="fui_si2">
|
||
</fui-single-input>
|
||
</view>
|
||
</fui-digital-keyboard>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
init: false,
|
||
show: false,
|
||
value: '',
|
||
background: '',
|
||
decimal: false,
|
||
spareKey: '',
|
||
theme: 'light',
|
||
visible: false,
|
||
value2: ''
|
||
}
|
||
},
|
||
methods: {
|
||
vip() {
|
||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||
},
|
||
keyClick(e) {
|
||
console.log(e)
|
||
//输入的值
|
||
let val = e.value;
|
||
//之前输入的值
|
||
let text = this.value;
|
||
//判断根据实际情况做调整，这里只是做演示
|
||
if (text.length === 4) {
|
||
this.fui.toast('已完成输入！')
|
||
return
|
||
} else if (text.includes('.') && val === '.') {
|
||
this.fui.toast('小数点不可重复输入！')
|
||
return
|
||
}
|
||
|
||
if (!text && val === '.') {
|
||
this.value = '0.'
|
||
} else {
|
||
this.value += val
|
||
}
|
||
|
||
},
|
||
confirm(e) {
|
||
let text = this.value;
|
||
let vals = text.split('')
|
||
if (text.length < 4) {
|
||
this.fui.toast('请先输入完成！')
|
||
return
|
||
} else if (vals[vals.length - 1] === '.') {
|
||
this.fui.toast('最后一位不可输入小数点！')
|
||
return
|
||
}
|
||
|
||
this.fui.toast('您输入的值为：' + text)
|
||
this.show = false
|
||
//输入框失去焦点
|
||
this.$refs.fui_si.initFocus(false)
|
||
},
|
||
backspace(e) {
|
||
let val = this.value;
|
||
if (val) {
|
||
this.value = val.substring(0, val.length - 1)
|
||
}
|
||
},
|
||
spare(e) {
|
||
console.log(e)
|
||
//备用键事件，可以换成其他需要的功能
|
||
if (this.spareKey === '清空') {
|
||
this.value = ''
|
||
} else if (this.spareKey === 'X') {
|
||
//可控制仅输入一次
|
||
if (this.value.length === 4) {
|
||
this.fui.toast('已完成输入！')
|
||
return
|
||
}else if (~this.value.indexOf('X')) {
|
||
this.fui.toast('X不可重复输入！')
|
||
return
|
||
}
|
||
this.value += e.value
|
||
} else {
|
||
this.show = false
|
||
//输入框失去焦点
|
||
this.$refs.fui_si.initFocus(false)
|
||
}
|
||
},
|
||
onFocus(e) {
|
||
setTimeout(() => {
|
||
this.show = true
|
||
if (this.init) {
|
||
this.init = false
|
||
}
|
||
}, this.init ? 200 : 0);
|
||
},
|
||
btnTap(type) {
|
||
switch (type) {
|
||
case 0:
|
||
this.theme = 'light';
|
||
this.background = '#465CFF';
|
||
this.spareKey = '';
|
||
this.decimal = false;
|
||
break;
|
||
case 1:
|
||
this.background = '#FFB703';
|
||
break;
|
||
case 2:
|
||
this.decimal = true;
|
||
break;
|
||
case 3:
|
||
//备用键，可以替换为其他需要的功能
|
||
this.spareKey = '取消';
|
||
break;
|
||
case 4:
|
||
this.spareKey = '清空';
|
||
break;
|
||
case 5:
|
||
this.theme = 'dark';
|
||
break;
|
||
case 6:
|
||
this.spareKey = 'X';
|
||
this.decimal = false;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
if (!this.show) {
|
||
this.show = true
|
||
//输入框获得焦点
|
||
this.$refs.fui_si.initFocus(true)
|
||
}
|
||
},
|
||
btnClick() {
|
||
//清空之前输入的密码
|
||
this.value2 = '';
|
||
this.visible = true
|
||
this.$refs.fui_si2.initFocus(true)
|
||
},
|
||
keyClick2(e) {
|
||
console.log(e)
|
||
if (this.value2.length === 6) return;
|
||
this.value2 += e.value
|
||
},
|
||
confirm2(e) {
|
||
let text = this.value2;
|
||
if (text.length < 6) {
|
||
this.fui.toast('请输入6位数密码！')
|
||
return
|
||
}
|
||
this.fui.toast('您输入的密码为：' + text)
|
||
this.visible = false
|
||
//输入框失去焦点
|
||
this.$refs.fui_si2.initFocus(false)
|
||
},
|
||
backspace2(e) {
|
||
let val = this.value2;
|
||
if (val) {
|
||
this.value2 = val.substring(0, val.length - 1)
|
||
}
|
||
},
|
||
spare2(e) {
|
||
//清空输入的密码
|
||
this.value2 = '';
|
||
this.visible = false
|
||
//输入框失去焦点
|
||
this.$refs.fui_si2.initFocus(false)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.fui-wrap {
|
||
padding-bottom: 64rpx;
|
||
}
|
||
|
||
.fui-flex__center {
|
||
padding-top: 120rpx;
|
||
}
|
||
|
||
.fui-dk__header {
|
||
width: 100%;
|
||
padding-bottom: 24rpx;
|
||
}
|
||
|
||
.fui-title {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
padding-top: 12rpx;
|
||
padding-bottom: 24rpx;
|
||
font-weight: normal;
|
||
}
|
||
</style> |