123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <template>
- <view class="u-page">
- <u-navbar
- title="键盘"
- @leftClick="navigateBack"
- safeAreaInsetTop
- fixed
- placeholder
- ></u-navbar>
- <u-gap height="20" bgColor="#fff"></u-gap>
- <u-cell-group>
- <u-cell
- :titleStyle="{fontWeight: 500}"
- @click="openKeyboard(index)"
- :title="item.title"
- v-for="(item, index) in list"
- :key="index"
- isLink
- >
- <image
- slot="icon"
- class="u-cell-icon"
- :src="item.iconUrl"
- mode="widthFix"
- ></image>
- </u-cell>
- </u-cell-group>
- <u-keyboard
- :mode="keyData.mode"
- :dotDisabled="keyData.dotDisabled"
- :random='keyData.random'
- :show="show"
- @close="close"
- @cancel="cancel"
- @confirm="confirm"
- @change="change"
- @backspace="backspace"
- ></u-keyboard>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- input: '',
- keyData: {
- mode: '',
- dotDisabled: false,
- random: false,
- },
- list: [{
- title: '车牌号键盘',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/car.png'
- },
- {
- title: '数字键盘',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/number.png'
- },
- {
- title: '身份证键盘',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/IdCard.png'
- },
- {
- title: '隐藏键盘"."符号',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/dot.png'
- },
- {
- title: '打乱键盘按键的顺序',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/order.png'
- },
- ],
- show: false
- }
- },
- methods: {
- navigateBack() {
- uni.navigateBack();
- },
- // 点击展示不同的键盘
- openKeyboard(indexNum) {
- this.keyData = {
- mode: '',
- dotDisabled: false,
- random: false,
- }
- if (indexNum == 0) {
- this.keyData.mode = ''
- } else if (indexNum == 1) {
- this.keyData.mode = 'number'
- } else if (indexNum == 2) {
- this.keyData.mode = 'card'
- } else if (indexNum == 3) {
- this.keyData.mode = 'number'
- this.keyData.dotDisabled = true
- } else if (indexNum == 4) {
- this.keyData.mode = 'number'
- this.keyData.random = true
- }
- this.input = ''
- this.show = true
- },
- change(e) {
- // console.log('change');
- this.input += e
- },
- close() {
- // console.log('close');
- this.show = false
- },
- cancel() {
- // console.log('cancel');
- this.show = false
- },
- confirm() {
- // console.log('confirm');
- this.show = false
- },
- backspace() {
- this.input = this.input.slice(0, -1)
- }
- }
- }
- </script>
- <style lang="scss">
- .u-page {
- padding: 0;
- }
- </style>
|