Compare commits
5 Commits
e527e59750
...
b6cd1c207b
Author | SHA1 | Date |
---|---|---|
|
b6cd1c207b | |
|
e07b7df8da | |
|
a93cd35f95 | |
|
4faad22f48 | |
|
52eef81368 |
|
@ -5,6 +5,8 @@ import App from '../src/App.vue'
|
|||
//基于element组件封装,引入element组件库
|
||||
import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import '../src/styles/element-variables.scss'//element 组件样式文件
|
||||
|
||||
Vue.use(Input);
|
||||
Vue.use(Select);
|
||||
Vue.use(OptionGroup);
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<el-date-picker
|
||||
:style="{ width }"
|
||||
class="ag-date-picker"
|
||||
:prefix-icon="iconClass"
|
||||
v-model="dateArr"
|
||||
v-bind="attrs"
|
||||
v-on="inputListeners"
|
||||
@mouseenter.native="mousetrue = true"
|
||||
@mouseleave.native="mousetrue = false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
@ -26,6 +28,8 @@ export default {
|
|||
return {
|
||||
width: "160px",
|
||||
dateArr: [null, null],
|
||||
date_picker: false,
|
||||
mousetrue: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -38,7 +42,7 @@ export default {
|
|||
"start-placeholder": "开始日期",
|
||||
"end-placeholder": "结束日期",
|
||||
"range-separator": "-",
|
||||
"prefix-icon": " ag-el-icon-prefix",
|
||||
|
||||
"picker-options": {
|
||||
disabledDate(time) {
|
||||
return (
|
||||
|
@ -121,6 +125,11 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
iconClass() {
|
||||
return this.date_picker && this.mousetrue
|
||||
? "ag-icon-prefix-hide"
|
||||
: "ag-icon-prefix-show";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
|
@ -128,12 +137,6 @@ 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 || ""];
|
||||
|
@ -145,14 +148,40 @@ export default {
|
|||
immediate: 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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
[class*="el-icon-"] {
|
||||
[class*="ag-icon-"] {
|
||||
font-family: element-icons !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
|
@ -165,32 +194,33 @@ export default {
|
|||
-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;
|
||||
.ag-datePicker {
|
||||
color: red;
|
||||
&:hover {
|
||||
border-radius: 50%;
|
||||
color: #c0c4cc;
|
||||
background: #ecedee;
|
||||
.ag-el-icon-prefix-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .el-input__icon,
|
||||
// .el-range__close-icon {
|
||||
// }
|
||||
|
||||
.ag-el-icon-prefix {
|
||||
.ag-icon-prefix-show {
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
margin-left: -5px;
|
||||
line-height: 38px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
top: 1px;
|
||||
&:before {
|
||||
content: "\e78e";
|
||||
}
|
||||
}
|
||||
.ag-icon-prefix-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-icon-circle-close:before {
|
||||
content: "\e6db";
|
||||
|
|
24
src/App.vue
24
src/App.vue
|
@ -1,20 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <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> -->
|
||||
<el-button type="success" @click="abb = true">点击打开 Dialog</el-button>
|
||||
<ag-dialog :visible.sync="abb"> </ag-dialog>
|
||||
<ag-datePicker :value="values"> </ag-datePicker>
|
||||
<ag-input :visible.sync="abb"> </ag-input>
|
||||
<ag-select :visible.sync="abb" :options="a_options" v-model="value">
|
||||
</ag-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import agTabs from "../packages/agDatePicker/src/index.vue";
|
||||
import agDialog from "../packages/agDialog/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 {
|
||||
components: { agTabs },
|
||||
components: { agDialog, agDatePicker, agInput, agSelect },
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
value: "",
|
||||
values: [],
|
||||
options: [
|
||||
{
|
||||
label: "热门城市",
|
||||
|
@ -122,7 +127,7 @@ export default {
|
|||
],
|
||||
abb: false,
|
||||
innerVisible: false,
|
||||
options: [
|
||||
a_options: [
|
||||
{
|
||||
value: "选项1",
|
||||
label: "黄金糕",
|
||||
|
@ -167,5 +172,4 @@ body {
|
|||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
/**
|
||||
* 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;
|
||||
}
|
Loading…
Reference in New Issue