zujian
This commit is contained in:
qiaopengfei
parent
e5e98d54ab
commit
9b525b9077
|
|
@ -0,0 +1,9 @@
|
|||
import agCascadeOptional from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agCascadeOptional.install = function (Vue) {
|
||||
Vue.component(agCascadeOptional.name, agCascadeOptional)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agCascadeOptional
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
// import pedestal from './src'
|
||||
import agMultifunctionSearch from './src'
|
||||
|
||||
// // 为组件提供 install 安装方法，供按需引入
|
||||
// pedestal.install = function (Vue) {
|
||||
// Vue.component(pedestal.name, pedestal)
|
||||
// }
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agMultifunctionSearch.install = function (Vue) {
|
||||
Vue.component(agMultifunctionSearch.name, agMultifunctionSearch)
|
||||
}
|
||||
|
||||
// // 导出组件
|
||||
// export default pedestal
|
||||
// 导出组件
|
||||
export default agMultifunctionSearch
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
<template>
|
||||
<div class="ag-MultifunctionSearch">
|
||||
<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
|
||||
class="ag_input_group"
|
||||
placeholder="请输入内容"
|
||||
|
|
@ -7,22 +22,6 @@
|
|||
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>
|
||||
<i slot="append" class="el-icon-search">999</i>
|
||||
</ag-input>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -111,54 +110,8 @@ export default {
|
|||
</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;
|
||||
.ag-MultifunctionSearch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
44
src/App.vue
44
src/App.vue
|
|
@ -13,6 +13,24 @@
|
|||
</template> -->
|
||||
</ag-select>
|
||||
<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
|
||||
size="small"
|
||||
ref="ttt"
|
||||
|
|
@ -43,6 +61,7 @@ import agDatePicker from "../packages/agDatePicker/src/index.vue";
|
|||
import agInput from "../packages/agInput/src/index.vue";
|
||||
import agSelect from "../packages/agSelect/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";
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -51,13 +70,36 @@ export default {
|
|||
agInput,
|
||||
agSelect,
|
||||
agNumberRange,
|
||||
agCascadeOptional,
|
||||
agMultifunctionSearch,
|
||||
},
|
||||
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 {
|
||||
ruleForm: {
|
||||
pass: [],
|
||||
},
|
||||
rules: {
|
||||
pass: [{ validator: validatePass, trigger: "blur" }],
|
||||
},
|
||||
value: "选项1",
|
||||
a_value: "59584",
|
||||
values: ['选项1',999],
|
||||
values: ["选项1", 999],
|
||||
options: [
|
||||
{
|
||||
label: "热门城市",
|
||||
|
|
|
|||
Loading…
Reference in New Issue