В PageScroller добавлены кнопки "в начало", "в конец"

This commit is contained in:
Book Pauk
2022-09-22 16:10:20 +07:00
parent 88a7e53114
commit 567d0bc28e
3 changed files with 34 additions and 6 deletions

View File

@@ -6,7 +6,7 @@
<div class="bg-white"> <div class="bg-white">
<NumInput <NumInput
v-model="page" :min="1" :max="pageCount" v-model="page" :min="1" :max="pageCount"
style="width: 140px" minus-icon="la la-chevron-circle-left" plus-icon="la la-chevron-circle-right" :disable="disable" style="width: 200px" minus-icon="la la-chevron-circle-left" plus-icon="la la-chevron-circle-right" :disable="disable" mm-buttons
/> />
</div> </div>
<div class="q-ml-xs"> <div class="q-ml-xs">

View File

@@ -318,10 +318,6 @@ class Search {
created() { created() {
this.commit = this.$store.commit; this.commit = this.$store.commit;
/*this.refresh = _.debounce(() => {
this.refreshDebounced();
}, 1000);*/
this.loadSettings(); this.loadSettings();
} }

View File

@@ -9,6 +9,16 @@
> >
<slot></slot> <slot></slot>
<template #prepend> <template #prepend>
<q-icon
v-show="mmButtons"
style="font-size: 100%"
v-ripple="modelValue != min"
:class="(modelValue != min ? '' : 'disable')"
name="la la-angle-double-left"
class="button"
@click="toMin"
/>
<q-icon <q-icon
v-ripple="validate(modelValue - step)" v-ripple="validate(modelValue - step)"
:class="(validate(modelValue - step) ? '' : 'disable')" :class="(validate(modelValue - step) ? '' : 'disable')"
@@ -37,6 +47,17 @@
@touchend.stop="onTouchEnd" @touchend.stop="onTouchEnd"
@touchcancel.prevent.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchEnd"
/> />
<q-icon
v-show="mmButtons"
style="font-size: 100%"
v-ripple="modelValue != max"
:class="(modelValue != max ? '' : 'disable')"
name="la la-angle-double-right"
class="button"
@click="toMax"
/>
</template> </template>
</q-input> </q-input>
</template> </template>
@@ -74,6 +95,7 @@ class NumInput {
disable: Boolean, disable: Boolean,
minusIcon: {type: String, default: 'la la-minus-circle'}, minusIcon: {type: String, default: 'la la-minus-circle'},
plusIcon: {type: String, default: 'la la-plus-circle'}, plusIcon: {type: String, default: 'la la-plus-circle'},
mmButtons: Boolean,
}; };
filteredValue = 0; filteredValue = 0;
@@ -188,6 +210,14 @@ class NumInput {
this.inTouch = false; this.inTouch = false;
this.onMouseUp(); this.onMouseUp();
} }
toMin() {
this.filteredValue = this.min;
}
toMax() {
this.filteredValue = this.max;
}
} }
export default vueComponent(NumInput); export default vueComponent(NumInput);
@@ -202,7 +232,9 @@ export default vueComponent(NumInput);
.button { .button {
font-size: 130%; font-size: 130%;
border-radius: 20px; border-radius: 15px;
width: 30px;
height: 30px;
color: #bbb; color: #bbb;
cursor: pointer; cursor: pointer;
} }