Merge pull request '组件' (#11) from qiaopengfei into master

Reviewed-on: #11
This commit is contained in:
qiaopengfei 2024-07-03 16:34:17 +08:00
commit b86eb26f55
1 changed files with 70 additions and 185 deletions

View File

@ -1,217 +1,102 @@
<template>
<div
@mousedown="
(e) => {
e.preventDefault();
selectOpen = true;
}
"
ref="main"
>
<a-select
class="t_select"
v-model="childSelectedValue"
:style="{ width: width || '100%' }"
:placeholder="placeholder"
:open="selectOpen"
@select="handleSelect"
<el-select
class="ag_select"
:style="{ width }"
:value="value"
:size="size"
v-on="inputListeners"
v-bind="attrs"
v-on="$listeners"
:mode="mode"
>
<template v-for="(index, name) in $slots" v-slot:[name]>
<slot :name="name" />
</template>
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
<div slot="dropdownRender" slot-scope="menu">
<a-checkbox
v-if="mode && !isShowPagination"
:checked="selectChecked"
@change="selectAll"
class="all_checkbox"
>全选</a-checkbox
>
<v-nodes :vnodes="menu" />
<div class="t_select__pagination" v-if="isShowPagination">
<a-pagination
:page-size.sync="paginationOption.pageSize"
v-model="paginationOption.current"
:total="paginationOption.total"
@change="currentChange"
v-bind="{
size: 'small',
'hide-on-single-page': true,
showQuickJumper: true,
...$attrs,
...paginationOption.bind,
}"
v-on="$listeners"
/>
</div>
</div>
<a-select-option
v-for="(item, index) in optionSource"
<el-option
v-for="(item, index) in options"
:key="index"
:value="item[valueKey]"
>{{
customLabel ? customLabelHandler(item) : item[labelKey]
}}</a-select-option
>
</a-select>
</div>
:label="item.label"
:value="item.value"
></el-option>
<!-- <slot name="options" slot="options" /> -->
</el-select>
</template>
<script>
import cloneDeep from "../../../src/utils/cloneDeep";
export default {
name: "TAntdSelect",
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
},
},
name: "agSelect",
props: {
value: {
type: [String, Number, Array, Boolean, Object],
},
// 'multiple'
mode: {
type: String,
},
placeholder: {
type: String,
default: "请选择",
},
//
width: {
type: String,
default: "",
},
// label
customLabel: {
value: {
type: String,
default: "",
},
// optionkey
valueKey: {
size: {
type: String,
default: "key",
},
// option
labelKey: {
type: String,
default: "label",
},
//
optionSource: {
type: Array,
},
//
isShowPagination: {
type: Boolean,
default: false,
},
//
paginationOption: {
type: Object,
default: () => {
return {
pageSize: 6, //
current: 1, //
total: 0, //
};
},
default: "small",
},
},
data() {
return {
selectOpen: false,
model: "",
options: [],
};
},
computed: {
childSelectedValue: {
get() {
return this.value || undefined;
},
set(val) {
this.$emit("input", val);
},
},
attrs() {
return {
allowClear: true,
showSearch: true,
...this.$attrs,
};
if (this.$attrs["remote-method"]) {
let obj = cloneDeep(this.$attrs);
Reflect.deleteProperty(obj, "remote-method");
return { ...obj, clearable: true, filterable: true, remote: true };
}
return false;
},
selectChecked: {
get() {
return this.childSelectedValue?.length === this.optionSource?.length;
//
inputListeners() {
return Object.assign(
{},
//
this.$listeners,
//
//
{
// `v-model`
input: (value) => {
this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
},
set(val) {
// console.log('set', val)
this.$emit("input", val);
blur: (e) => {
let value = e.target.value
.trim()
.replace(/\s/g, (match) =>
match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
);
//
this.$emit("input", value);
},
}
);
},
},
watch: {
value: {
immediate: true,
handler(newVal) {
this.removeMethod(newVal);
this.model = newVal;
},
mounted() {
document.addEventListener("click", this.bodyCloseMenus);
},
beforeDestroy() {
document.removeEventListener("click", this.bodyCloseMenus);
},
methods: {
//
bodyCloseMenus(e) {
if (this.$refs.main && !this.$refs.main.contains(e.target)) {
if (this.selectOpen == true) {
this.selectOpen = false;
}
async removeMethod(keywords) {
if (this.$attrs["remote-method"]) {
let opts = await this.$attrs["remote-method"](keywords);
this.options = opts;
}
},
//
selectAll(val) {
const options = JSON.parse(JSON.stringify(this.optionSource));
if (val.target.checked) {
this.childSelectedValue = options?.map((item) => {
return item[this.valueKey];
});
setTimeout(() => {
this.$emit("change", this.childSelectedValue);
}, 0);
} else {
this.childSelectedValue = null;
}
this.selectOpen = false;
},
handleSelect(value, option) {
if (value) {
this.selectOpen = false;
}
this.$emit("select", value, option);
},
//
currentChange(val) {
// console.log('', val)
if (!this.mode) {
this.childSelectedValue = null;
}
setTimeout(() => {
this.selectOpen = true;
}, 0);
this.$emit("current-change", val);
},
// label
customLabelHandler() {
// eslint-disable-next-line no-eval
return eval(this.customLabel);
handleChange(value) {
this.$emit("input", value);
},
},
};
</script>
<style >
.all_checkbox {
margin-left: 12px;
margin-top: 5px;
}
</style>
<style lang="scss" scoped></style>