123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
-
- <div class="datePicker" >
- <p
- :style="active == item.value ? 'color:cornflowerblue;background:#f2f2f2' : ''"
- v-for="(item, index) of pickOptions"
- :key="index"
- @click="changeDate(item)"
- >
- {{ item.title }}
- </p>
-
- <a-range-picker v-clickoutside="handleClose"
- v-model="mydateValue"
- style="width:250px;"
- :allowClear=false
- :disabled-date="disabledDate"
- :openChange="openChange"
- @change="onChange"
- />
-
- </div>
- </template>
- <script>
- 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: ['dateValue','type'],
- data() {
- return {
- moment,
- mydateValue: [moment(),moment()],
- pickOptions,
- active:1
- // pickOptions:JSON.parse(JSON.stringify(pickOptions))
- }
- },
- directives: { clickoutside },
- watch: {
- parentDate(n,o){
- if(n[0].format('YYYY-MM-DD')!=this.mydateValue[0].format('YYYY-MM-DD')){
- this.mydateValue=n
- }
- }
- },
- methods: {
- //日期改变事件
- onChange(date, dateString) {
- this.mydateValue = date
- this.active=9;
- console.log(this.mydateValue)
- if (dateString.length == 2) {
- this.$emit('update:dateValue', this.mydateValue)
- this.$emit('update:type', 9)
- }
- },
- //侧边的按钮点击事件
- changeDate(val) {
- console.log(val);
- this.active=val.value;
- this.mydateValue = val.dateValue
-
- this.$emit('update:dateValue', this.mydateValue)
- this.$emit('update:type', val.value)
- },
- handleClose(e) {
- // console.log(e)
- if(e.target.className){
- if(e.target.className.indexOf('ant-calendar')==-1){
- // this.$parent.opendateClose()
- }
- }
-
-
- },
- disabledDate(current) {
- // console.log(current)
- return current && current > moment().subtract(1, 'day')
- },
- openChange(open) {
- // console.log(open)
- }
- },
- mounted() {
- this.mydateValue = [moment(), moment()]
- // console.log(this.$refs.pickOptions.style.left)
- }
- }
- </script>
- <style lang="scss" scoped>
- .datePicker {
- position: relative;
- p{
- margin-bottom: 0;
- }
- .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;
- z-index: 3;
- div {
- height: 43px;
- padding: 10px 15px;
- box-sizing: border-box;
- }
- .btn:hover{
- color: #1890ff;
- }
- }
- }
- </style>
|