提交 aa5a3838 编写于 作者: Q qiang

feat(h5): 内置 popup 类组件响应 esc、enter 按键

上级 be1b23b8
......@@ -40,13 +40,19 @@
</div>
<div :style="popupStyle.triangle" />
</div>
<keypress
:disable="!visible"
@esc="_close(-1)"
/>
</uni-actionsheet>
</template>
<script>
import popup from './mixins/popup'
import keypress from '../../../helpers/keypress'
export default {
name: 'ActionSheet',
components: { keypress },
mixins: [popup],
props: {
title: {
......
......@@ -38,13 +38,21 @@
</div>
</div>
</div>
<keypress
:disable="!visible"
@esc="_close('cancel')"
@enter="_close('confirm')"
/>
</uni-modal>
</transition>
</template>
<script>
import transition from './mixins/transition'
import keypress from '../../../helpers/keypress'
export default {
name: 'Modal',
components: { keypress },
mixins: [transition],
props: {
title: {
......
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
this.$emit(keyName, $event)
}
}
document.addEventListener('keydown', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keydown', listener)
})
},
render: () => null
}
......@@ -67,6 +67,11 @@
<div>
<slot />
</div>
<keypress
:disable="!visible"
@esc="_cancel"
@enter="_change"
/>
</uni-picker>
</template>
......@@ -74,6 +79,7 @@
import { emitter } from 'uni-mixins'
import { formatDateTime } from 'uni-shared'
import popup from '../../../components/app/popup/mixins/popup'
import keypress from '../../../helpers/keypress'
function getDefaultStartValue () {
if (this.mode === mode.TIME) {
......@@ -126,6 +132,7 @@ const fields = {
}
export default {
name: 'Picker',
components: { keypress },
mixins: [emitter, popup],
props: {
name: {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册