В PageScroller добавлены кнопки "в начало", "в конец"
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user