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

qiaopengfei #3

Merged
qiaopengfei merged 1 commits from qiaopengfei into master 2024-07-08 13:55:42 +08:00
Conversation 0 Commits 1 Files Changed 5 +135 -58
5 changed files with 135 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ab88c7e1fc - Show all commits

58
packages/agDatePicker/src/index.vue
View File

@ -1,5 +1,6 @@
<template>
<el-date-picker
:style="{ width }"
class="ag-date-picker"
v-model="dateArr"
v-bind="attrs"
@ -23,6 +24,7 @@ export default {
},
data() {
return {
width: "160px",
dateArr: [null, null],
};
},
@ -36,6 +38,7 @@ export default {
"start-placeholder": "开始日期",
"end-placeholder": "结束日期",
"range-separator": "-",
"prefix-icon": " ag-el-icon-prefix",
"picker-options": {
disabledDate(time) {
return (
@ -125,7 +128,12 @@ export default {
if (!Array.isArray(newVal)) {
throw new Error("agDatePicker date请传入数组");
}
newVal.length > 0 &&
newVal.some(
(item) => item !== null && item !== undefined && item !== ""
)
? (this.width = "205px")
: (this.width = "160px");
let [date1, date2] = newVal;
if (!this.dateArr) {
this.dateArr = [date1 || "", date2 || ""];
@ -142,4 +150,50 @@ export default {
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
::v-deep {
[class*="el-icon-"] {
font-family: element-icons !important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-input__icon.el-range__close-icon {
position: absolute;
font-size: 12px;
width: 14px;
height: 14px;
line-height: 14px;
right: 5px;
&:hover {
border-radius: 50%;
color: #c0c4cc;
background: #ecedee;
}
}
.ag-el-icon-prefix {
width: 16px;
font-size: 16px;
margin-left: -5px;
line-height: 38px;
position: absolute;
right: 8px;
top: 0;
&:before {
content: "\e78e";
}
}
.el-icon-circle-close:before {
content: "\e6db";
}
}
</style>

25
packages/agInput/src/index.vue
View File

@ -69,6 +69,29 @@ export default {
</script>
<style lang="scss" scoped>
@import url("~@/static/index.scss");
@import "../../../src/static/index.scss";
::v-deep {
.el-input__suffix {
@include sjf;
.el-input__suffix-inner {
.el-input__icon {
font-size: 12px;
width: 14px;
height: 14px;
line-height: 14px;
@include cj1;
right: 5px;
&:hover {
border-radius: 50%;
color: #c0c4cc;
background: #ecedee;
}
}
}
}
.el-icon-circle-close:before {
content: "\e6db";
}
}
</style>

27
packages/agSelect/src/index.vue
View File

@ -75,4 +75,29 @@ export default {
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
::v-deep {
.el-input__inner {
width: none;
}
.el-input__suffix {
.el-input__suffix-inner {
.el-input__icon {
font-size: 12px;
width: 14px;
height: 14px;
line-height: 14px;
right: 5px;
&:hover {
border-radius: 50%;
color: #c0c4cc;
background: #ecedee;
}
}
}
}
.el-icon-circle-close:before {
content: "\e6db";
}
}
</style>

57
src/App.vue
View File

@ -1,20 +1,20 @@
<template>
<div>
<el-button type="text" @click="abb = true">点击打开 Dialog</el-button>
<agTabs ref="ref_Pedestal" :visible.sync="abb">
<!-- <el-button type="text" @click="abb = true">点击打开 Dialog</el-button> -->
<agTabs ref="ref_Pedestal" v-model="value" size="mini" :options="options">
<!-- <span slot="footer">房价大降分类数据</span> -->
</agTabs>
<div class="div"><span>888</span></div>
<!-- <div class="div"><span>888</span></div> -->
</div>
</template>
<script>
import agTabs from "../packages/agDialog/src/index.vue";
import agTabs from "../packages/agDatePicker/src/index.vue";
export default {
components: { agTabs },
data() {
return {
value: "",
value: [],
options: [
{
label: "热门城市",
@ -122,28 +122,28 @@ export default {
],
abb: false,
innerVisible: false,
// options: [
// {
// value: "选项1",
// label: "黄金糕",
// },
// {
// value: "选项2",
// label: "双皮奶",
// },
// {
// value: "选项3",
// label: "蚵仔煎",
// },
// {
// value: "选项4",
// label: "龙须面",
// },
// {
// value: "选项5",
// label: "北京烤鸭",
// },
// ],
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
};
},
methods: {
@ -158,7 +158,7 @@ export default {
</script>
<style lang="scss">
@import '../src/static/index.scss';
// @import '../src/static/index.scss';
body {
background: #918d8d;
}
@ -168,4 +168,5 @@ body {
width: 50px;
}
}
</style>

26
src/static/index.scss
View File

@ -1,29 +1,3 @@
// 当超过宽度时，显示省略号
@mixin ell() {
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
// 当超过n行时，显示省略号
@mixin elln($n) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $n;
}
// 清除浮动
.clearfix {
& after {
display: table;
clear: both;
content: "";
}
}
@mixin cj1 {
position: absolute;