qiaopengfei
This commit is contained in:
qiaopengfei
parent
4971a5637c
commit
ab88c7e1fc
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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
57
src/App.vue
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue