|
|
@@ -1,89 +1,97 @@
|
|
|
<template>
|
|
|
- <el-date-picker
|
|
|
- v-model="value"
|
|
|
- type="daterange"
|
|
|
- :clearable="clearable"
|
|
|
- :picker-options="pickerOptions"
|
|
|
- @change="onSelect"
|
|
|
- v-bind="$attrs"
|
|
|
- />
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value"
|
|
|
+ type="daterange"
|
|
|
+ :clearable="clearable"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ @change="onSelect"
|
|
|
+ v-bind="$attrs"
|
|
|
+ class="customDatePicker"
|
|
|
+ />
|
|
|
</template>
|
|
|
<script>
|
|
|
// import sync from '@/components/computed.sync.ts'
|
|
|
// import { set } from 'vue/types/umd';
|
|
|
export default {
|
|
|
- inheritAttrs: false,
|
|
|
- data() {
|
|
|
- return {};
|
|
|
+ inheritAttrs: false,
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // pv: sync("value"),
|
|
|
+
|
|
|
+ // val:{
|
|
|
+ // get(){return this.value},
|
|
|
+ // set(v){
|
|
|
+ // this.$emit("input",v)
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ pickerOptions() {
|
|
|
+ return {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: "今天",
|
|
|
+ onClick: (picker) => {
|
|
|
+ let date = this.$dateRange.before(0);
|
|
|
+ date[1] = date[0];
|
|
|
+ console.log(date);
|
|
|
+ picker.$emit("pick", date);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "昨天",
|
|
|
+ onClick: (picker) => {
|
|
|
+ let date = this.$dateRange.yesterday(-1);
|
|
|
+ date[1] = date[0];
|
|
|
+ console.log(date);
|
|
|
+ picker.$emit("pick", date);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近一周",
|
|
|
+ onClick: (picker) => {
|
|
|
+ picker.$emit("pick", this.$dateRange.before(-6));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近一个月",
|
|
|
+ onClick: (picker) => {
|
|
|
+ picker.$emit("pick", this.$dateRange.before(-29));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近三个月",
|
|
|
+ onClick: (picker) => {
|
|
|
+ picker.$emit("pick", this.$dateRange.before(-90));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
- computed: { // pv: sync("value"),
|
|
|
-
|
|
|
- // val:{
|
|
|
- // get(){return this.value},
|
|
|
- // set(v){
|
|
|
- // this.$emit("input",v)
|
|
|
- // }
|
|
|
- // },
|
|
|
- pickerOptions() {
|
|
|
- return {
|
|
|
- shortcuts: [
|
|
|
- {
|
|
|
- text: "今天",
|
|
|
- onClick: (picker) => {
|
|
|
- let date = this.$dateRange.before(0);
|
|
|
- date[1] = date[0];
|
|
|
- console.log(date);
|
|
|
- picker.$emit("pick", date);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "昨天",
|
|
|
- onClick: (picker) => {
|
|
|
- let date = this.$dateRange.yesterday(-1);
|
|
|
- date[1] = date[0];
|
|
|
- console.log(date);
|
|
|
- picker.$emit("pick", date);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "最近一周",
|
|
|
- onClick: (picker) => {
|
|
|
- picker.$emit("pick", this.$dateRange.before(-6));
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "最近一个月",
|
|
|
- onClick: (picker) => {
|
|
|
- picker.$emit("pick", this.$dateRange.before(-29));
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "最近三个月",
|
|
|
- onClick: (picker) => {
|
|
|
- picker.$emit("pick", this.$dateRange.before(-90));
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ props: {
|
|
|
+ value: {},
|
|
|
+ clearable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
},
|
|
|
- watch: {},
|
|
|
- props: {
|
|
|
- value: {},
|
|
|
- clearable:{
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSelect(v) {
|
|
|
+ this.$emit("input", v);
|
|
|
},
|
|
|
- methods: {
|
|
|
- onSelect(v) {
|
|
|
- this.$emit("input",v);
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="scss">
|
|
|
-.k-date-range {
|
|
|
+<style lang="scss" scoped>
|
|
|
+.customDatePicker {
|
|
|
+ ::v-deep .el-date-editor--daterange {
|
|
|
+ width: 250px !important;
|
|
|
+ }
|
|
|
+ ::v-deep .el-range-editor--small .el-range-input {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|