qiaopengfei #8

Merged
qiaopengfei merged 2 commits from qiaopengfei into master 2024-07-15 10:32:54 +08:00
5 changed files with 240 additions and 73 deletions
Showing only changes of commit 9b525b9077 - Show all commits

View File

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

View File

@ -0,0 +1,163 @@
<template>
<div class="ag-CascadeOptional">
<ag-input
class="ag_input_group"
placeholder="请输入内容"
:value="value[1]"
v-bind="config.input"
v-on="Listeners.input"
>
<ag-select
slot="prepend"
:clearable="false"
placeholder="请选择"
:value="value[0]"
v-bind="config.select"
v-on="Listeners.select"
class="ag_select_group"
>
<template slot="prefix">
{{
(config.select.options.find((e) => e.value == value[0]) || {}).label
}}
</template>
</ag-select>
</ag-input>
</div>
</template>
<script>
import agSelect from "../../agSelect/src/index.vue";
import agInput from "../../agInput/src/index.vue";
export default {
name: "agCascadeOptional",
components: {
agSelect,
agInput,
},
props: {
value: {
type: Array,
default: () => {
return [null, null];
},
},
},
data() {
return {
values: [null, null],
};
},
computed: {
config() {
const input_config = this.getAfterAgo(this.$attrs, "after_");
const input = {
...this.$attrs,
...input_config,
};
const select_configs = this.getAfterAgo(this.$attrs, "ago_");
const select = {
...this.$attrs,
...select_configs,
};
console.log(input, select);
return {
input,
select,
};
},
Listeners() {
const new_listeners = Object.assign({}, this.$listeners, {
after_input: (value) => {
this.$emit("input", [value, this.value[1] ? this.value[1] : ""]);
},
ago_input: (value) => {
this.$emit("input", [this.value[0] ? this.value[0] : "", value]);
},
});
const select = this.getAfterAgo(new_listeners, "after_");
const input = this.getAfterAgo(new_listeners, "ago_");
return {
select,
input,
};
},
},
watch: {
value: {
handler(newVal) {
if (!Array.isArray(newVal)) {
throw new Error("agDatePicker data请传入数组");
}
},
immediate: true,
},
},
methods: {
getAfterAgo(attr, prefix) {
const config = {};
for (const key in attr) {
if (attr.hasOwnProperty(key) && key.startsWith(prefix)) {
const newKey = key.substring(prefix.length);
config[newKey] = attr[key];
}
}
return config;
},
},
};
</script>
<style scoped lang='scss'>
::v-deep {
.el-input-group__prepend {
background-color: #fff;
border: none !important;
}
.el-input__suffix {
z-index: 99;
transition: none !important;
}
.el-input__inner {
position: relative;
left: 0;
border: 1px solid #dcdfe6 !important;
padding: 0 5px 0 15px !important;
&:hover {
position: relative;
z-index: 20 !important;
border: 1px solid #c0c4cc !important;
}
&:focus {
position: relative;
z-index: 20 !important;
border: 1px solid #1890ff !important;
}
}
}
::v-deep .ag_select_group {
min-width: 90px;
max-width: 140px;
color: #606266;
text-align: start;
.el-input__prefix {
position: relative;
left: 0;
padding: 0 5px 0 15px;
box-sizing: border-box;
color: #606266;
visibility: hidden;
}
.el-input__inner {
border-radius: 4px 0 0 4px;
z-index: 1;
}
}
::v-deep .el-select {
margin: 0 -21px !important;
box-sizing: border-box;
}
</style>

View File

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

View File

@ -1,12 +1,5 @@
<template> <template>
<div class="ag-MultifunctionSearch"> <div class="ag-MultifunctionSearch">
<ag-input
class="ag_input_group"
placeholder="请输入内容"
:value="value[1]"
v-bind="config.input"
v-on="Listeners.input"
>
<ag-select <ag-select
slot="prepend" slot="prepend"
:clearable="false" :clearable="false"
@ -22,7 +15,13 @@
}} }}
</template> </template>
</ag-select> </ag-select>
<i slot="append" class="el-icon-search">999</i> <ag-input
class="ag_input_group"
placeholder="请输入内容"
:value="value[1]"
v-bind="config.input"
v-on="Listeners.input"
>
</ag-input> </ag-input>
</div> </div>
</template> </template>
@ -111,54 +110,8 @@ export default {
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
::v-deep { .ag-MultifunctionSearch {
.el-input-group__prepend { display: flex;
background-color: #fff; align-items: center;
border: none !important;
}
.el-input__suffix {
z-index: 99;
transition: none !important;
}
.el-input__inner {
position: relative;
left: 0;
border: 1px solid #dcdfe6 !important;
padding: 0 5px 0 15px !important;
&:hover {
position: relative;
z-index: 20 !important;
border: 1px solid #c0c4cc !important;
}
&:focus {
position: relative;
z-index: 20 !important;
border: 1px solid #1890ff !important;
}
}
}
::v-deep .ag_select_group {
min-width: 90px;
max-width: 140px;
color: #606266;
text-align: start;
.el-input__prefix {
position: relative;
left: 0;
padding: 0 5px 0 15px;
box-sizing: border-box;
color: #606266;
visibility: hidden;
}
.el-input__inner {
border-radius: 4px 0 0 4px;
z-index: 1;
}
}
::v-deep .el-select {
margin: 0 -21px !important;
box-sizing: border-box;
} }
</style> </style>

View File

@ -13,6 +13,24 @@
</template> --> </template> -->
</ag-select> </ag-select>
<ag-NumberRange v-model="values"> </ag-NumberRange> <ag-NumberRange v-model="values"> </ag-NumberRange>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
class="demo-ruleForm"
>
<el-form-item prop="pass">
<ag-CascadeOptional
size="small"
ref="ttt"
v-model="ruleForm.pass"
:after_clearable="true"
:ago_options="a_options"
>
</ag-CascadeOptional>
</el-form-item>
</el-form>
<ag-MultifunctionSearch <ag-MultifunctionSearch
size="small" size="small"
ref="ttt" ref="ttt"
@ -43,6 +61,7 @@ import agDatePicker from "../packages/agDatePicker/src/index.vue";
import agInput from "../packages/agInput/src/index.vue"; import agInput from "../packages/agInput/src/index.vue";
import agSelect from "../packages/agSelect/src/index.vue"; import agSelect from "../packages/agSelect/src/index.vue";
import agNumberRange from "../packages/agNumberRange/src/index.vue"; import agNumberRange from "../packages/agNumberRange/src/index.vue";
import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue"; import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
export default { export default {
components: { components: {
@ -51,13 +70,36 @@ export default {
agInput, agInput,
agSelect, agSelect,
agNumberRange, agNumberRange,
agCascadeOptional,
agMultifunctionSearch, agMultifunctionSearch,
}, },
data() { data() {
var validatePass = (rule, value, callback) => {
for (const key in value) {
if (!value[key]) {
alert("错误");
callback();
}
}
// if (value === "") {
// callback(new Error(""));
// } else {
// if (this.ruleForm.checkPass !== "") {
// this.$refs.ruleForm.validateField("checkPass");
// }
// }
};
return { return {
ruleForm: {
pass: [],
},
rules: {
pass: [{ validator: validatePass, trigger: "blur" }],
},
value: "选项1", value: "选项1",
a_value: "59584", a_value: "59584",
values: ['选项1',999], values: ["选项1", 999],
options: [ options: [
{ {
label: "热门城市", label: "热门城市",