Skip to content

H
hls-easy-ui
Commit 81d87ab4 authored by JingChao's avatar JingChao
Browse files
Options

keyboard

parent a28539fe
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 130 deletions
packages/components/NumberKeyboard/index.vue
View file @ 81d87ab4
...@@ -223,149 +223,154 @@ ...@@ -223,149 +223,154 @@
</style> </style>
<script> <script>
import Key from './key' import Key from './key'
export default { export default {
name: 'NumberKeyboard', name: 'NumberKeyboard',
components: {Key}, components: {Key},
props: { props: {
show: Boolean, // eslint-disable-line show: Boolean, // eslint-disable-line
title: String, // eslint-disable-line title: String, // eslint-disable-line
closeButtonText: String, // eslint-disable-line closeButtonText: String, // eslint-disable-line
theme: { theme: {
type: String, type: String,
default: 'default', default: 'default',
},
extraKey: {
type: String,
default: '',
},
zIndex: {
type: Number,
default: 100,
},
transition: {
type: Boolean,
default: true,
},
showDeleteKey: {
type: Boolean,
default: true,
},
hideOnClickOutside: {
type: Boolean,
default: true,
},
cusClass: {
type: String,
default: '',
},
}, },
extraKey: { data () {
type: String,
default: '',
},
zIndex: {
type: Number,
default: 100,
},
transition: {
type: Boolean,
default: true,
},
showDeleteKey: {
type: Boolean,
default: true,
},
hideOnClickOutside: {
type: Boolean,
default: true,
},
cusClass: {
type: String,
default: '',
},
},
data () {
return {
keyBoardPlugin: false,
}
},
computed: {
keys () {
const keys = []
for (let i = 1; i <= 9; i++) {
keys.push({text: i})
}
keys.push(
{text: this.extraKey, type: 'gray'},
{text: 0},
{text: 'delete', type: 'delete gray'}
)
return keys
},
style () {
return { return {
zIndex: this.zIndex, keyBoardPlugin: false,
} }
}, },
showTitleClose () { computed: {
return this.closeButtonText && this.theme === 'default' keys () {
}, const keys = []
}, for (let i = 1; i <= 9; i++) {
watch: { keys.push({text: i})
show () { }
if (!this.transition) { keys.push(
this.$emit(this.show ? 'show' : 'hide') {text: this.extraKey, type: 'gray'},
} {text: 0},
{text: 'delete', type: 'delete gray'}
)
return keys
},
style () {
return {
zIndex: this.zIndex,
}
},
showTitleClose () {
return this.closeButtonText && this.theme === 'default'
},
}, },
}, watch: {
mounted () { show () {
this.handler(true) if (!this.transition) {
this.$el.setAttribute('vum-show-keyborad', '') this.$emit(this.show ? 'show' : 'hide')
}, }
destroyed () { },
this.handler(false)
if (this.keyBoardPlugin) {
document.body.removeChild(this.$el)
}
},
activated () {
this.handler(true)
},
deactivated () {
this.handler(false)
},
methods: {
closeKeyboard () {
let vm = this
this.show = false
let wrapper = document.querySelector('[vum-show-keyborad]')
if (wrapper && vm.keyBoardPlugin) {
document.body.removeChild(wrapper)
}
}, },
showNumberKeyboard (options) { mounted () {
this.keyBoardPlugin = true this.handler(true)
this.title = options.title this.$el.setAttribute('vum-show-keyborad', '')
this.closeButtonText = options.closeButtonText
this.extraKey = options.extraKey
this.keyDown = options.keyDown
this.keyDelete = options.keyDelete
this.show = true
}, },
handler (action) { destroyed () {
if (action !== this.handlerStatus && this.hideOnClickOutside) { this.handler(false)
this.handlerStatus = action if (this.keyBoardPlugin) {
document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur) document.body.removeChild(this.$el)
} }
}, },
onBlur () { activated () {
this.$emit('blur') this.handler(true)
},
onClose () {
this.$emit('close')
this.show = false
this.onBlur()
}, },
onAnimationEnd () { deactivated () {
this.$emit(this.show ? 'show' : 'hide') this.handler(false)
}, },
onPressKey (text) { methods: {
let vm = this closeKeyboard () {
if (text === '') { let vm = this
return let wrapper = document.querySelector('[vum-show-keyborad]')
} if (wrapper && vm.keyBoardPlugin) {
if (text === 'delete') { this.show = false
this.$emit('delete') try {
if (vm.keyDelete) { document.body.removeChild(wrapper)
vm.keyDelete() } catch (e) {
}
} else if (vm.keyBoardPlugin === false && vm.hideOnClickOutside) {
this.onClose()
} }
} else if (text === this.closeButtonText) { },
this.onClose() showNumberKeyboard (options) {
} else { this.keyBoardPlugin = true
this.$emit('input', text) this.title = options.title
if (vm.keyDown) { this.closeButtonText = options.closeButtonText
vm.keyDown(text) this.extraKey = options.extraKey
this.keyDown = options.keyDown
this.keyDelete = options.keyDelete
this.show = true
},
handler (action) {
if (action !== this.handlerStatus && this.hideOnClickOutside) {
this.handlerStatus = action
document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur)
} }
} },
onBlur () {
this.$emit('blur')
},
onClose () {
this.$emit('close')
this.show = false
this.onBlur()
},
onAnimationEnd () {
this.$emit(this.show ? 'show' : 'hide')
},
onPressKey (text) {
let vm = this
if (text === '') {
return
}
if (text === 'delete') {
this.$emit('delete')
if (vm.keyDelete) {
vm.keyDelete()
}
} else if (text === this.closeButtonText) {
this.onClose()
} else {
this.$emit('input', text)
if (vm.keyDown) {
vm.keyDown(text)
}
}
},
}, },
}, }
}
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment