selectList 10%

This commit is contained in:
fofolee 2022-04-10 22:56:44 +08:00
parent 0f201469ee
commit 5b9d739b9b
2 changed files with 184 additions and 65 deletions

View File

@ -0,0 +1,107 @@
<template>
<q-dialog
@keydown="keyEvent"
maximized
ref="dialog"
transition-show="fade"
@hide="onDialogHide"
>
<q-scroll-area
ref="scrollbar"
:thumb-style="{
width: '7px',
}"
>
<q-card>
<q-virtual-scroll
virtual-scroll-slice-size="50"
virtual-scroll-item-size="50"
@virtual-scroll="scrollEvent"
:items="items"
>
<template v-slot="{ item, index }">
<q-item
:key="index"
ref="qitems"
clickable
v-ripple
@mousemove="currentIndex = index"
manual-focus
:focused="index === currentIndex"
:active="index === currentIndex"
:style="{
height: itemHeight + 'px',
}"
>
<q-item-section>
<q-item-section>{{ item }}</q-item-section>
</q-item-section>
</q-item>
</template>
</q-virtual-scroll>
</q-card>
</q-scroll-area>
</q-dialog>
</template>
<script>
export default {
data() {
return {
result: this.items[0],
currentIndex: 0,
itemHeight: 50,
};
},
mounted() {
window.SelectList = this;
},
computed: {
maxIndex() {
return this.items.length - 1;
},
},
props: {
options: Object,
items: Array,
},
emits: ["ok", "hide"],
methods: {
show() {
this.$refs.dialog.show();
},
hide() {
this.$refs.dialog.hide();
},
onDialogHide() {
this.$emit("hide");
},
onOKClick() {
this.$emit("ok", this.result);
this.hide();
},
onCancelClick() {
this.hide();
},
keyEvent(e) {
e.preventDefault();
switch (e.keyCode) {
case 38:
this.currentIndex = Math.max(0, this.currentIndex - 1);
break;
case 40:
this.currentIndex = Math.min(this.maxIndex, this.currentIndex + 1);
break;
}
// this.$refs.qitems[this.currentIndex].$el.scrollIntoViewIfNeeded(false);
},
scrollEvent(e) {
console.log(e);
},
},
};
</script>

View File

@ -10,63 +10,58 @@ import {
import inputBox from "../components/quickcommandUI/InputBox"
import buttonBox from "../components/quickcommandUI/ButtonBox"
import TextArea from "../components/quickcommandUI/TextArea"
import SelectList from "../components/quickcommandUI/SelectList"
const quickcommand = {
showInputBox: (options = ["请输入"], title = "") => {
return new Promise((reslove, reject) => {
let props = {
labels: [],
values: [],
hints: [],
title: title
}
if (!(options instanceof Object)) return reject(new TypeError("必须为数组或对象"))
if (options instanceof Array) props.labels = options
else Object.assign(props, options)
Dialog.create({
component: inputBox,
componentProps: props
}).onOk(results => {
reslove(Array.from(results))
}).onCancel(() => {
console.log('取消')
})
showInputBox: (options = ["请输入"], title = "") => new Promise((reslove, reject) => {
let props = {
labels: [],
values: [],
hints: [],
title: title
}
if (!(options instanceof Object)) return reject(new TypeError("必须为数组或对象"))
if (options instanceof Array) props.labels = options
else Object.assign(props, options)
Dialog.create({
component: inputBox,
componentProps: props
}).onOk(results => {
reslove(Array.from(results))
}).onCancel(() => {
console.log('取消')
})
},
}),
showButtonBox: (labels = ["确定"], title = "") => {
return new Promise((reslove, reject) => {
if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
let props = {
labels: labels,
title: title
}
Dialog.create({
component: buttonBox,
componentProps: props
}).onOk(results => {
reslove(results)
}).onCancel(() => {
console.log('取消')
})
showButtonBox: (labels = ["确定"], title = "") => new Promise((reslove, reject) => {
if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
let props = {
labels: labels,
title: title
}
Dialog.create({
component: buttonBox,
componentProps: props
}).onOk(results => {
reslove(results)
}).onCancel(() => {
console.log('取消')
})
},
}),
showConfirmBox: (message = "", title = "提示") => {
return new Promise((reslove, reject) => {
Dialog.create({
title: title,
message: message,
cancel: true,
persistent: true
}).onOk(() => {
reslove(true)
}).onCancel(() => {
reslove(false)
})
showConfirmBox: (message = "", title = "提示") => new Promise((reslove, reject) => {
Dialog.create({
title: title,
message: message,
cancel: true,
persistent: true
}).onOk(() => {
reslove(true)
}).onCancel(() => {
reslove(false)
})
},
}),
showMessageBox: (message, icon = 'success', time = 3000) => {
if (icon === 'success') icon = 'positive'
@ -79,22 +74,39 @@ const quickcommand = {
})
},
showTextArea: (placeholder = "", value = "") => {
return new Promise((reslove, reject) => {
let props = {
placeholder: placeholder,
value: value
}
Dialog.create({
component: TextArea,
componentProps: props
}).onOk(results => {
reslove(results)
}).onCancel(() => {
console.log('取消')
})
showTextArea: (placeholder = "", value = "") => new Promise((reslove, reject) => {
let props = {
placeholder: placeholder,
value: value
}
Dialog.create({
component: TextArea,
componentProps: props
}).onOk(results => {
reslove(results)
}).onCancel(() => {
console.log('取消')
})
}
}),
showSelectList: (selects, options = {
placeholder: "请选择",
optionType: "plaintext"
}) => new Promise((reslove, reject) => {
let props = {
items: selects,
options: options
}
Dialog.create({
component: SelectList,
componentProps: props
}).onOk(results => {
reslove(results)
}).onCancel(() => {
console.log('取消')
})
})
}
export default quickcommand
export default quickcommand