Move focus directive to seperate file
This commit is contained in:
parent
97aca96e7e
commit
7343e98a26
2 changed files with 14 additions and 13 deletions
12
src/directives/focus.js
Normal file
12
src/directives/focus.js
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
export default {
|
||||||
|
// When the bound element is inserted into the DOM...
|
||||||
|
inserted: (el, {modifiers}) => {
|
||||||
|
// Focus the element only if the viewport is big enough
|
||||||
|
// auto focusing elements on mobile can be annoying since in these cases the
|
||||||
|
// keyboard always pops up and takes half of the available space on the screen.
|
||||||
|
// The threshhold is the same as the breakpoints in css.
|
||||||
|
if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
|
||||||
|
el.focus()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
15
src/main.js
15
src/main.js
|
@ -144,19 +144,8 @@ Vue.use(VTooltip, {defaultHtml: false})
|
||||||
|
|
||||||
Vue.use(vueShortkey)
|
Vue.use(vueShortkey)
|
||||||
|
|
||||||
// Set focus
|
import focus from '@/directives/focus'
|
||||||
Vue.directive('focus', {
|
Vue.directive('focus', focus)
|
||||||
// When the bound element is inserted into the DOM...
|
|
||||||
inserted: (el, {modifiers}) => {
|
|
||||||
// Focus the element only if the viewport is big enough
|
|
||||||
// auto focusing elements on mobile can be annoying since in these cases the
|
|
||||||
// keyboard always pops up and takes half of the available space on the screen.
|
|
||||||
// The threshhold is the same as the breakpoints in css.
|
|
||||||
if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
|
|
||||||
el.focus()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
Vue.mixin({
|
Vue.mixin({
|
||||||
methods: {
|
methods: {
|
||||||
|
|
Loading…
Reference in a new issue