Небольшие доработки
This commit is contained in:
@@ -13,7 +13,7 @@
|
|||||||
:value="needle" @input="needle = $event.target.value"/-->
|
:value="needle" @input="needle = $event.target.value"/-->
|
||||||
<q-input ref="input" class="col" outlined dense
|
<q-input ref="input" class="col" outlined dense
|
||||||
placeholder="что ищем"
|
placeholder="что ищем"
|
||||||
v-model="needle"
|
v-model="needle" @keydown="inputKeyDown"
|
||||||
/>
|
/>
|
||||||
<div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div>
|
<div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -43,6 +43,7 @@ export default @Component({
|
|||||||
|
|
||||||
},
|
},
|
||||||
foundText: function(newValue) {
|
foundText: function(newValue) {
|
||||||
|
//недостатки сторонних ui
|
||||||
const el = this.$refs.input.$el.querySelector('label div div div input');
|
const el = this.$refs.input.$el.querySelector('label div div div input');
|
||||||
if (el)
|
if (el)
|
||||||
el.style.paddingRight = newValue.length*12 + 'px';
|
el.style.paddingRight = newValue.length*12 + 'px';
|
||||||
@@ -166,12 +167,13 @@ class SearchPage extends Vue {
|
|||||||
this.$emit('search-toggle');
|
this.$emit('search-toggle');
|
||||||
}
|
}
|
||||||
|
|
||||||
keyHook(event) {
|
inputKeyDown(event) {
|
||||||
//недостатки сторонних ui
|
if (event.key == 'Enter') {
|
||||||
if (document.activeElement === this.$refs.input && event.type == 'keydown' && event.key == 'Enter') {
|
|
||||||
this.showNext();
|
this.showNext();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
keyHook(event) {
|
||||||
if (event.type == 'keydown' && (event.code == 'Escape')) {
|
if (event.type == 'keydown' && (event.code == 'Escape')) {
|
||||||
this.close();
|
this.close();
|
||||||
}
|
}
|
||||||
@@ -200,7 +202,7 @@ class SearchPage extends Vue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.button-group {
|
.button-group {
|
||||||
width: 120px;
|
width: 100px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
@@ -208,10 +210,10 @@ class SearchPage extends Vue {
|
|||||||
|
|
||||||
.button {
|
.button {
|
||||||
padding: 9px 17px 9px 17px;
|
padding: 9px 17px 9px 17px;
|
||||||
width: 60px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
top: -8px;
|
top: -9px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user