Compare commits

..

No commits in common. "b6cd1c207b0e9f6a2450c40679a96dee560d1f26" and "e527e59750705262c29880cf9760e6d93a0f2393" have entirely different histories.

4 changed files with 32 additions and 99 deletions

View File

@ -5,8 +5,6 @@ import App from '../src/App.vue'
//基于element组件封装引入element组件库 //基于element组件封装引入element组件库
import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui'; import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import '../src/styles/element-variables.scss'//element 组件样式文件
Vue.use(Input); Vue.use(Input);
Vue.use(Select); Vue.use(Select);
Vue.use(OptionGroup); Vue.use(OptionGroup);

View File

@ -1,12 +1,10 @@
<template> <template>
<el-date-picker <el-date-picker
:style="{ width }" :style="{ width }"
:prefix-icon="iconClass" class="ag-date-picker"
v-model="dateArr" v-model="dateArr"
v-bind="attrs" v-bind="attrs"
v-on="inputListeners" v-on="inputListeners"
@mouseenter.native="mousetrue = true"
@mouseleave.native="mousetrue = false"
/> />
</template> </template>
@ -28,8 +26,6 @@ export default {
return { return {
width: "160px", width: "160px",
dateArr: [null, null], dateArr: [null, null],
date_picker: false,
mousetrue: true,
}; };
}, },
computed: { computed: {
@ -42,7 +38,7 @@ export default {
"start-placeholder": "开始日期", "start-placeholder": "开始日期",
"end-placeholder": "结束日期", "end-placeholder": "结束日期",
"range-separator": "-", "range-separator": "-",
"prefix-icon": " ag-el-icon-prefix",
"picker-options": { "picker-options": {
disabledDate(time) { disabledDate(time) {
return ( return (
@ -125,11 +121,6 @@ export default {
}, },
}); });
}, },
iconClass() {
return this.date_picker && this.mousetrue
? "ag-icon-prefix-hide"
: "ag-icon-prefix-show";
},
}, },
watch: { watch: {
value: { value: {
@ -137,6 +128,12 @@ export default {
if (!Array.isArray(newVal)) { if (!Array.isArray(newVal)) {
throw new Error("agDatePicker date请传入数组"); 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; let [date1, date2] = newVal;
if (!this.dateArr) { if (!this.dateArr) {
this.dateArr = [date1 || "", date2 || ""]; this.dateArr = [date1 || "", date2 || ""];
@ -148,40 +145,14 @@ export default {
immediate: true, immediate: true,
deep: true, deep: true,
}, },
dateArr: {
handler(newVal) {
if (
newVal &&
newVal.length > 0 &&
newVal.some(
(item) => item !== null && item !== undefined && item !== ""
)
) {
this.width = "205px";
this.date_picker = true;
} else {
this.width = "160px";
this.date_picker = false;
}
},
immediate: true,
deep: true,
},
},
methods: {
mouseleave() {
console.log(999);
},
mousemove() {
console.log(888);
},
}, },
methods: {},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
[class*="ag-icon-"] { [class*="el-icon-"] {
font-family: element-icons !important; font-family: element-icons !important;
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -194,33 +165,32 @@ export default {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.ag-datePicker { .el-input__icon.el-range__close-icon {
color: red; position: absolute;
font-size: 12px;
width: 14px;
height: 14px;
line-height: 14px;
right: 5px;
&:hover { &:hover {
.ag-el-icon-prefix-hide { border-radius: 50%;
display: none; color: #c0c4cc;
} background: #ecedee;
} }
} }
// .el-input__icon,
// .el-range__close-icon {
// }
.ag-icon-prefix-show { .ag-el-icon-prefix {
width: 16px; width: 16px;
font-size: 16px; font-size: 16px;
margin-left: -5px; margin-left: -5px;
line-height: 38px; line-height: 38px;
position: absolute; position: absolute;
right: 8px; right: 8px;
top: 1px; top: 0;
&:before { &:before {
content: "\e78e"; content: "\e78e";
} }
} }
.ag-icon-prefix-hide {
display: none;
}
.el-icon-circle-close:before { .el-icon-circle-close:before {
content: "\e6db"; content: "\e6db";

View File

@ -1,25 +1,20 @@
<template> <template>
<div> <div>
<el-button type="success" @click="abb = true">点击打开 Dialog</el-button> <!-- <el-button type="text" @click="abb = true">点击打开 Dialog</el-button> -->
<ag-dialog :visible.sync="abb"> </ag-dialog> <agTabs ref="ref_Pedestal" v-model="value" size="mini" :options="options">
<ag-datePicker :value="values"> </ag-datePicker> <!-- <span slot="footer">房价大降分类数据</span> -->
<ag-input :visible.sync="abb"> </ag-input> </agTabs>
<ag-select :visible.sync="abb" :options="a_options" v-model="value"> <!-- <div class="div"><span>888</span></div> -->
</ag-select>
</div> </div>
</template> </template>
<script> <script>
import agDialog from "../packages/agDialog/src/index.vue"; import agTabs from "../packages/agDatePicker/src/index.vue";
import agDatePicker from "../packages/agDatePicker/src/index.vue";
import agInput from "../packages/agInput/src/index.vue";
import agSelect from "../packages/agSelect/src/index.vue";
export default { export default {
components: { agDialog, agDatePicker, agInput, agSelect }, components: { agTabs },
data() { data() {
return { return {
value: "", value: [],
values: [],
options: [ options: [
{ {
label: "热门城市", label: "热门城市",
@ -127,7 +122,7 @@ export default {
], ],
abb: false, abb: false,
innerVisible: false, innerVisible: false,
a_options: [ options: [
{ {
value: "选项1", value: "选项1",
label: "黄金糕", label: "黄金糕",
@ -172,4 +167,5 @@ body {
width: 50px; width: 50px;
} }
} }
</style> </style>

View File

@ -1,31 +0,0 @@
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
// $--color-text-regular: #1f2d3d;
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
$--table-border: 1px solid #dfe6ec;
/* icon font path, required */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
}