This commit is contained in:
qiaopengfei 2024-07-02 17:13:44 +08:00
parent e73c078b04
commit 49c154d54b
5 changed files with 133 additions and 3 deletions

View File

@ -2,9 +2,10 @@ import Vue from 'vue'
import App from '../src/App.vue'
//基于element组件封装引入element组件库
import { Input } from 'element-ui';
import { Input, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Input);
Vue.use(Select);
// 导入组件库
import erp_element_ui from '../packages'

9
packages/Select/index.js Normal file
View File

@ -0,0 +1,9 @@
import Select from './src'
// 为组件提供 install 安装方法,供按需引入
Select.install = function (Vue) {
Vue.component(Select.name, Select)
}
// 导出组件
export default Select

View File

@ -0,0 +1,103 @@
<template>
<el-select
class="ag_select"
:style="{ width }"
:value="value"
:size="size"
v-on="inputListeners"
v-bind="attrs"
>
<el-option
v-for="(item, index) in options"
:key="index"
: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: "AgSelect",
props: {
width: {
type: String,
default: "",
},
value: {
type: String,
default: "",
},
size: {
type: String,
default: "small",
},
},
data() {
return {
model: "",
options: [],
};
},
computed: {
attrs() {
cloneDeep();
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;
},
//
inputListeners() {
return Object.assign(
{},
//
this.$listeners,
//
//
{
// `v-model`
input: (value) => {
this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
},
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;
},
},
},
methods: {
async removeMethod(keywords) {
if (this.$attrs["remote-method"]) {
let opts = await this.$attrs["remote-method"](keywords);
this.options = opts;
}
},
handleChange(value) {
this.$emit("input", value);
},
},
};
</script>
<style lang="scss" scoped></style>

View File

@ -1,6 +1,11 @@
<template>
<div>
<Pedestal ref="ref_Pedestal" v-model="value" @input="changeInput">
<Pedestal
ref="ref_Pedestal"
v-model="value"
@input="changeInput"
:width="'180px'"
>
<!-- <template #operate="">
<el-button
class="excel"
@ -17,7 +22,7 @@
</template>
<script>
import Pedestal from "../packages/pedestal/src/index.vue";
import Pedestal from "../packages/Select/src/index";
export default {
components: { Pedestal },
data() {

12
src/utils/cloneDeep.js Normal file
View File

@ -0,0 +1,12 @@
export default function cloneDeep(obj, hash = new WeakMap()) {
if (obj == null || typeof obj !== "object") return obj
if (obj instanceof Date) return new Date(obj)
if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
if (hash.has(obj)) return hash.get(obj)
let deepobj = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj))
hash.set(obj, deepobj)
for (const key in obj) {
deepobj[key] = cloneDeep(obj[key], hash);
}
return deepobj
}