|
@@ -1,148 +1,187 @@
|
|
|
<template>
|
|
|
-<!-- 组件使用时 需要传入属性 openOptions:true|false 控制是否打开
|
|
|
+ <!-- 组件使用时 需要传入属性 openOptions:true|false 控制是否打开
|
|
|
left :string|0 left为侧边的按钮的定位 0 表示不改变 或者传入字符串 如-100px 表示css中left:-100px
|
|
|
- -->
|
|
|
- <div class="datePicker">
|
|
|
- <a-range-picker
|
|
|
- v-model="dateValue"
|
|
|
- style="width:250px;height:150px"
|
|
|
- :open='openOptions'
|
|
|
- :disabled-date="disabledDate"
|
|
|
- :openChange='openChange'
|
|
|
- @change="onChange" />
|
|
|
- <div class="pickOptions" v-show='openOptions' ref="pickOptions">
|
|
|
- <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
|
|
|
- </div>
|
|
|
+ -->
|
|
|
+ <div class="datePicker" v-clickoutside="handleClose">
|
|
|
+ <a-range-picker
|
|
|
+ v-model="dateValue"
|
|
|
+ style="width:250px;height:150px"
|
|
|
+ :open="openOptions"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ :openChange="openChange"
|
|
|
+ @change="onChange"
|
|
|
+ />
|
|
|
+ <div class="pickOptions" v-show="openOptions" ref="pickOptions">
|
|
|
+ <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-import moment from 'moment';
|
|
|
-let pickOptions=[
|
|
|
- {
|
|
|
- title:'今天',
|
|
|
- key:'1',
|
|
|
- value:1,
|
|
|
- dateValue:[moment(),moment()]
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- title:'昨天',
|
|
|
- key:'2',
|
|
|
- value:2,
|
|
|
- dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')]
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- title:'一周',
|
|
|
- key:'3',
|
|
|
- value:3,
|
|
|
- dateValue:[moment().subtract(7,'days'),moment().subtract(1,'days')]
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- title:'一个月',
|
|
|
- key:'5',
|
|
|
- value:5,
|
|
|
- dateValue:[moment().subtract(1,'days').subtract(1,'months'),moment().subtract(1,'days')]
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- title:'三个月',
|
|
|
- key:'6',
|
|
|
- value:6,
|
|
|
- dateValue:[moment().subtract(1,'days').subtract(3,'months'),moment().subtract(1,'days')]
|
|
|
-
|
|
|
+const clickoutside = {
|
|
|
+ // 初始化指令
|
|
|
+ bind(el, binding, vnode) {
|
|
|
+ function documentHandler(e) {
|
|
|
+ // 这里判断点击的元素是否是本身,是本身,则返回
|
|
|
+ if (el.contains(e.target)) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 判断指令中是否绑定了函数
|
|
|
+ if (binding.expression) {
|
|
|
+ // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
|
|
|
+ binding.value(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
|
|
|
+ el.__vueClickOutside__ = documentHandler
|
|
|
+ document.addEventListener('click', documentHandler)
|
|
|
+ },
|
|
|
+ update() {},
|
|
|
+ unbind(el, binding) {
|
|
|
+ // 解除事件监听
|
|
|
+ document.removeEventListener('click', el.__vueClickOutside__)
|
|
|
+ delete el.__vueClickOutside__
|
|
|
+ }
|
|
|
+}
|
|
|
+import moment from 'moment'
|
|
|
+let pickOptions = [
|
|
|
+ {
|
|
|
+ title: '今天',
|
|
|
+ key: '1',
|
|
|
+ value: 1,
|
|
|
+ dateValue: [moment(), moment()]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '昨天',
|
|
|
+ key: '2',
|
|
|
+ value: 2,
|
|
|
+ dateValue: [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '一周',
|
|
|
+ key: '3',
|
|
|
+ value: 3,
|
|
|
+ dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '一个月',
|
|
|
+ key: '5',
|
|
|
+ value: 5,
|
|
|
+ dateValue: [
|
|
|
+ moment()
|
|
|
+ .subtract(1, 'days')
|
|
|
+ .subtract(1, 'months'),
|
|
|
+ moment().subtract(1, 'days')
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '三个月',
|
|
|
+ key: '6',
|
|
|
+ value: 6,
|
|
|
+ dateValue: [
|
|
|
+ moment()
|
|
|
+ .subtract(1, 'days')
|
|
|
+ .subtract(3, 'months'),
|
|
|
+ moment().subtract(1, 'days')
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '六个月',
|
|
|
+ key: '7',
|
|
|
+ value: 7,
|
|
|
+ dateValue: [
|
|
|
+ moment()
|
|
|
+ .subtract(1, 'days')
|
|
|
+ .subtract(6, 'months'),
|
|
|
+ moment().subtract(1, 'days')
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '一年',
|
|
|
+ key: '8',
|
|
|
+ value: 8,
|
|
|
+ dateValue: [
|
|
|
+ moment()
|
|
|
+ .subtract(1, 'days')
|
|
|
+ .subtract(1, 'years'),
|
|
|
+ moment().subtract(1, 'days')
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: ['openOptions', 'left'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ moment,
|
|
|
+ dateValue: [],
|
|
|
+ type: 0,
|
|
|
+ pickOptions
|
|
|
+ // pickOptions:JSON.parse(JSON.stringify(pickOptions))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ directives: { clickoutside },
|
|
|
+ methods: {
|
|
|
+ //日期改变事件
|
|
|
+ onChange(date, dateString) {
|
|
|
+ this.dateValue = date
|
|
|
+ // console.log(this.dateValue)
|
|
|
+ if (dateString.length == 2) {
|
|
|
+ this.$parent.opendate()
|
|
|
+ this.$parent.type = 9
|
|
|
+ this.$parent.dateValue = date
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- title:'六个月',
|
|
|
- key:'7',
|
|
|
- value:7,
|
|
|
- dateValue:[moment().subtract(1,'days').subtract(6,'months'),moment().subtract(1,'days')]
|
|
|
-
|
|
|
+ //侧边的按钮点击事件
|
|
|
+ changeDate(val) {
|
|
|
+ this.type = val.value
|
|
|
+ this.dateValue = val.dateValue
|
|
|
+ // console.log(this.dateValue)
|
|
|
+ this.$parent.type = val.value
|
|
|
+ this.$parent.dateValue = val.dateValue
|
|
|
},
|
|
|
- {
|
|
|
- title:'一年',
|
|
|
- key:'8',
|
|
|
- value:8,
|
|
|
- dateValue:[moment().subtract(1,'days').subtract(1,'years'),moment().subtract(1,'days')]
|
|
|
+ handleClose() {
|
|
|
+ this.$parent.opendate()
|
|
|
},
|
|
|
-]
|
|
|
-
|
|
|
- export default {
|
|
|
- props:['openOptions','left'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- moment,
|
|
|
- dateValue:[],
|
|
|
- type:0,
|
|
|
- pickOptions
|
|
|
- // pickOptions:JSON.parse(JSON.stringify(pickOptions))
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- //日期改变事件
|
|
|
- onChange(date,dateString){
|
|
|
- this.dateValue=date;
|
|
|
- // console.log(this.dateValue)
|
|
|
- if(dateString.length==2){
|
|
|
- this.$parent.opendate();
|
|
|
- this.$parent.type=9
|
|
|
- this.$parent.dateValue=date
|
|
|
- };
|
|
|
-
|
|
|
- },
|
|
|
- //侧边的按钮点击事件
|
|
|
- changeDate(val){
|
|
|
- this.type=val.value
|
|
|
- this.dateValue=val.dateValue;
|
|
|
- // console.log(this.dateValue)
|
|
|
- this.$parent.type=val.value
|
|
|
- this.$parent.dateValue=val.dateValue
|
|
|
- },
|
|
|
-
|
|
|
- disabledDate(current) {
|
|
|
- // console.log(current)
|
|
|
-
|
|
|
- return current && current > moment().subtract(1, 'day')
|
|
|
- },
|
|
|
- openChange(open){
|
|
|
- // console.log(open)
|
|
|
- },
|
|
|
+ disabledDate(current) {
|
|
|
+ // console.log(current)
|
|
|
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.dateValue=[moment(),moment()]
|
|
|
- if(this.left){
|
|
|
- this.$refs.pickOptions.style.left=this.left
|
|
|
- }
|
|
|
-
|
|
|
- // console.log(this.$refs.pickOptions.style.left)
|
|
|
- },
|
|
|
+ return current && current > moment().subtract(1, 'day')
|
|
|
+ },
|
|
|
+ openChange(open) {
|
|
|
+ // console.log(open)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.dateValue = [moment(), moment()]
|
|
|
+ if (this.left) {
|
|
|
+ this.$refs.pickOptions.style.left = this.left
|
|
|
}
|
|
|
+
|
|
|
+ // console.log(this.$refs.pickOptions.style.left)
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.datePicker{
|
|
|
- position: relative;
|
|
|
- .pickOptions{
|
|
|
- width: 100px;
|
|
|
- background-color: #FFF;
|
|
|
- height: 302px;
|
|
|
- position: absolute;
|
|
|
- top: -2px;
|
|
|
- left: -402px;
|
|
|
- border-right: 1px solid #999;
|
|
|
- box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
|
|
- cursor: pointer;
|
|
|
- div{
|
|
|
- height: 43px;
|
|
|
- padding: 10px 15px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- }
|
|
|
+.datePicker {
|
|
|
+ position: relative;
|
|
|
+ .pickOptions {
|
|
|
+ width: 100px;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 302px;
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;
|
|
|
+ left: -402px;
|
|
|
+ border-right: 1px solid #999;
|
|
|
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
|
|
+ cursor: pointer;
|
|
|
+ div {
|
|
|
+ height: 43px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|