thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
pages/component/expand/digitalKeyboard/digitalKeyboard.vue Normal file
View File

@ -0,0 +1,243 @@
<!--本文件由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>