qiaopengfei
/
ag-element-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

22

This commit is contained in:
ln1778 2024-09-12 17:08:07 +08:00
parent b631f64cbb
commit 3bbf8a51dc
3 changed files with 214 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ag-element-ui", "name": "ag-element-ui",
"version": "0.1.11", "version": "0.1.12",
"main": "packages/index.js", "main": "packages/index.js",
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "vue-cli-service serve",

13
packages/agMultifunctionSearch/src/index.vue
View File

@ -3,7 +3,8 @@
<ag-select <ag-select
v-bind="$attrs" v-bind="$attrs"
v-on="listeners" v-on="listeners"
:value="values&&values[0]" :options="$attrs.options||[]"
:value="value&&value[0]"
@change="onSelect" @change="onSelect"
class="ag_select_group" class="ag_select_group"
:style="{ width: `${swidth}px` }" :style="{ width: `${swidth}px` }"
@ -104,13 +105,7 @@ export default {
default: () => { default: () => {
return [null, '']; return [null, ''];
}, },
}, },
options: {
type: Array,
default: () => {
return [];
},
},
showExtra: { showExtra: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -137,7 +132,7 @@ export default {
throw new Error("请传入数组"); throw new Error("请传入数组");
} }
let newselectValue=newVal[0]; let newselectValue=newVal[0];
const find=this.options.find((f)=>f.value==newselectValue); const find=this.$attrs.options&&this.$attrs.options.find((f)=>f.value==newselectValue);
if(find){ if(find){
let fontwidth=this.getStringWidth(find.label); let fontwidth=this.getStringWidth(find.label);
this.swidth=fontwidth>165?165:fontwidth; this.swidth=fontwidth>165?165:fontwidth;

424
packages/agMultionDattePicker/src/index.vue
View File

@ -1,228 +1,222 @@
<template> <template>
<div class="ag-MultifunctionSearch"> <div class="ag-MultifunctionSearch">
<ag-select <ag-select
v-bind="$attrs" v-bind="$attrs"
v-on="listeners" v-on="listeners"
:value="values&&values[0]" :options="$attrs.options||[]"
@change="onSelect" :value="value&&value[0]"
class="ag_select_group" @change="onSelect"
:style="{ width: `${swidth}px` }" class="ag_select_group"
> :style="{ width: `${swidth}px` }"
</ag-select> >
</ag-select>
<ag-date-picker <ag-date-picker
class="ag_input_group" class="ag_input_group"
:placeholder="$attrs.placeholder||'请选择时间'" :placeholder="$attrs.placeholder||'请选择时间'"
:disabled="$attrs.disabled" :disabled="$attrs.disabled"
v-bind="$attrs" v-bind="$attrs"
v-on="listeners" v-on="listeners"
:value="value[1]" :value="value[1]"
@change="onInputChange" @change="onInputChange"
> >
</ag-date-picker> </ag-date-picker>
</div> </div>
</template> </template>
<script> <script>
import agSelect from "../../agSelect/src/index.vue"; import agSelect from "../../agSelect/src/index.vue";
import agDatePicker from "../../agDatePicker/src/index.vue"; import agDatePicker from "../../agDatePicker/src/index.vue";
export default { export default {
name: "agMultionDattePicker", name: "agMultionDattePicker",
components: { components: {
agSelect, agSelect,
agDatePicker, agDatePicker,
}, },
props: { props: {
value: { value: {
default: () => { default: () => {
return [null, []]; return [null, []];
},
}, },
options: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
values: [null, []],
swidth:90,
inputValue:"",
selectvalue:"",
imeipopover:false,
listeners:{}
};
}, },
model: { },
prop: 'value', // 明确指定 prop 为 'value' data() {
event: 'change' // 自定义事件名，用于更新 value return {
}, values: [null, []],
watch: { swidth:90,
value: { inputValue:"",
handler(newVal) { selectvalue:"",
if (!Array.isArray(newVal)) { imeipopover:false,
throw new Error("请传入数组"); listeners:{}
} };
let newselectValue=newVal[0]; },
const find=this.options.find((f)=>f.value==newselectValue); model: {
if(find){ prop: 'value', // 明确指定 prop 为 'value'
let fontwidth=this.getStringWidth(find.label); event: 'change' // 自定义事件名，用于更新 value
this.swidth=fontwidth>165?165:fontwidth; },
} watch: {
value: {
}, handler(newVal) {
immediate: true, if (!Array.isArray(newVal)) {
}, throw new Error("请传入数组");
},
mounted(){
let newlist=Object.assign({},this.$listeners);
delete newlist.change;
delete newlist.input;
this.listeners=newlist;
},
methods: {
onSelect(value){
if(this.$listeners.change){
this.$emit("change", [value, this.value[1]||[]]);
} }
let newselectValue=newVal[0];
const find=this.$attrs.options&&this.$attrs.options.find((f)=>f.value==newselectValue);
if(find){
let fontwidth=this.getStringWidth(find.label);
this.swidth=fontwidth>165?165:fontwidth;
}
},
immediate: true,
},
},
mounted(){
let newlist=Object.assign({},this.$listeners);
delete newlist.change;
delete newlist.input;
this.listeners=newlist;
},
methods: {
onSelect(value){
if(this.$listeners.change){
this.$emit("change", [value, this.value[1]||[]]);
}
},
onInputChange(val){
if(this.$listeners.change){
this.$emit("change", [this.values[0] ||"",val]);
}
},
getStringWidth(text) {
let font = "13px";
// 创建一个隐藏的元素
let element = document.createElement('span');
element.style.visibility = 'hidden';
element.style.whiteSpace = 'nowrap';
element.style.font = font; // 设置字体样式
element.textContent = text;
// 将元素添加到文档中
document.body.appendChild(element);
// 获取元素的宽度
let width = element.offsetWidth;
// 移除元素
document.body.removeChild(element);
return width+50;
},
imeiiconClick(){
this.imeipopover=!this.imeipopover;
},
}, imeiclose(){
onInputChange(val){ this.imeipopover=false;
if(this.$listeners.change){
this.$emit("change", [this.values[0] ||"",val]);
}
},
getStringWidth(text) {
let font = "13px";
// 创建一个隐藏的元素
let element = document.createElement('span');
element.style.visibility = 'hidden';
element.style.whiteSpace = 'nowrap';
element.style.font = font; // 设置字体样式
element.textContent = text;
// 将元素添加到文档中
document.body.appendChild(element);
// 获取元素的宽度
let width = element.offsetWidth;
// 移除元素
document.body.removeChild(element);
return width+50;
},
imeiiconClick(){
this.imeipopover=!this.imeipopover;
},
imeiclose(){
this.imeipopover=false;
},
cleartext(){
this.value[1]=[];
this.$set(this.value,1,[]);
},
search(){
this.imeipopover=false;
if(this.$listeners.onSrarch){
this.$emit("onSrarch", this.value);
}
},
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;
},
}, },
}; cleartext(){
</script> this.value[1]=[];
<style lang="scss"> this.$set(this.value,1,[]);
.popperOptions { },
min-width: 200px !important; search(){
padding: 0px !important; this.imeipopover=false;
if(this.$listeners.onSrarch){
this.$emit("onSrarch", this.value);
}
},
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 lang="scss">
.popperOptions {
min-width: 200px !important;
padding: 0px !important;
}
</style>
<style scoped lang='scss'>
.ag-MultifunctionSearch {
display: flex;
align-items: center;
}
.imeiicondefault {
padding: 5px;
border-radius: 4px;
background: #f0f2f5;
cursor: pointer;
}
.imeiiconActive {
cursor: pointer;
color: #409eff;
background: #e9f1fc;
}
.divider {
margin: 0;
} }
</style> .btnbox {
<style scoped lang='scss'>
.ag-MultifunctionSearch {
display: flex;
align-items: center;
}
.imeiicondefault {
padding: 5px; padding: 5px;
border-radius: 4px; display: flex;
background: #f0f2f5; justify-content: space-between;
cursor: pointer; }
}
.imeiiconActive { ::v-deep{
cursor: pointer;
color: #409eff; .ag_select_group{
background: #e9f1fc; .el-input__inner{
} border:1px solid #e5e5e5;
.divider { border-top-right-radius: 0;
margin: 0; border-bottom-right-radius: 0;
outline:none;
&:focus{
border-color:#e5e5e5;
}
}
} }
.ag_input_group{
.btnbox { .el-input__inner{
padding: 5px; border:1px solid #e5e5e5;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left:none;
outline:none;
&:focus{
border-color:#e5e5e5;
}
}
}
.el-select{
.el-input{
&.is-focus{
.el-input__inner{
border-color:#e5e5e5;
}
}
}
&:hover{
.el-input__inner{
border-color:#e5e5e5;
}
}
}
.el-textarea__inner{
border:none;
}
.el-input__suffix-inner{
height:100%;
display: flex; display: flex;
justify-content: space-between; align-items: center;
justify-content: center;
} }
}
::v-deep{ </style>
.ag_select_group{
.el-input__inner{
border:1px solid #e5e5e5;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
outline:none;
&:focus{
border-color:#e5e5e5;
}
}
}
.ag_input_group{
.el-input__inner{
border:1px solid #e5e5e5;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left:none;
outline:none;
&:focus{
border-color:#e5e5e5;
}
}
}
.el-select{
.el-input{
&.is-focus{
.el-input__inner{
border-color:#e5e5e5;
}
}
}
&:hover{
.el-input__inner{
border-color:#e5e5e5;
}
}
}
.el-textarea__inner{
border:none;
}
.el-input__suffix-inner{
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>