DatePicker.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <!-- 组件使用时 需要传入属性 openOptions:true|false 控制是否打开
  3. left :string|0 left为侧边的按钮的定位 0 表示不改变 或者传入字符串 如-100px 表示css中left:-100px
  4. -->
  5. <div class="datePicker">
  6. <a-range-picker
  7. v-model="dateValue"
  8. style="width:250px;height:150px"
  9. :open='openOptions'
  10. :disabled-date="disabledDate"
  11. :openChange='openChange'
  12. @change="onChange" />
  13. <div class="pickOptions" v-show='openOptions' ref="pickOptions">
  14. <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import moment from 'moment';
  20. let pickOptions=[
  21. {
  22. title:'今天',
  23. key:'1',
  24. value:1,
  25. dateValue:[moment(),moment()]
  26. },
  27. {
  28. title:'昨天',
  29. key:'2',
  30. value:2,
  31. dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')]
  32. },
  33. {
  34. title:'一周',
  35. key:'3',
  36. value:3,
  37. dateValue:[moment().subtract(7,'days'),moment().subtract(1,'days')]
  38. },
  39. {
  40. title:'一个月',
  41. key:'5',
  42. value:5,
  43. dateValue:[moment().subtract(1,'days').subtract(1,'months'),moment().subtract(1,'days')]
  44. },
  45. {
  46. title:'三个月',
  47. key:'6',
  48. value:6,
  49. dateValue:[moment().subtract(1,'days').subtract(3,'months'),moment().subtract(1,'days')]
  50. },
  51. {
  52. title:'六个月',
  53. key:'7',
  54. value:7,
  55. dateValue:[moment().subtract(1,'days').subtract(6,'months'),moment().subtract(1,'days')]
  56. },
  57. {
  58. title:'一年',
  59. key:'8',
  60. value:8,
  61. dateValue:[moment().subtract(1,'days').subtract(1,'years'),moment().subtract(1,'days')]
  62. },
  63. ]
  64. export default {
  65. props:['openOptions','left'],
  66. data() {
  67. return {
  68. moment,
  69. dateValue:[],
  70. type:0,
  71. pickOptions
  72. // pickOptions:JSON.parse(JSON.stringify(pickOptions))
  73. }
  74. },
  75. methods: {
  76. //日期改变事件
  77. onChange(date,dateString){
  78. this.dateValue=date;
  79. // console.log(this.dateValue)
  80. if(dateString.length==2){
  81. this.$parent.opendate();
  82. this.$parent.type=9
  83. this.$parent.dateValue=date
  84. };
  85. },
  86. //侧边的按钮点击事件
  87. changeDate(val){
  88. this.type=val.value
  89. this.dateValue=val.dateValue;
  90. // console.log(this.dateValue)
  91. this.$parent.type=val.value
  92. this.$parent.dateValue=val.dateValue
  93. },
  94. disabledDate(current) {
  95. // console.log(current)
  96. return current && current > moment().subtract(1, 'day')
  97. },
  98. openChange(open){
  99. // console.log(open)
  100. },
  101. },
  102. mounted() {
  103. this.dateValue=[moment(),moment()]
  104. if(this.left){
  105. this.$refs.pickOptions.style.left=this.left
  106. }
  107. // console.log(this.$refs.pickOptions.style.left)
  108. },
  109. }
  110. </script>
  111. <style lang="scss" scoped>
  112. .datePicker{
  113. position: relative;
  114. .pickOptions{
  115. width: 100px;
  116. background-color: #FFF;
  117. height: 302px;
  118. position: absolute;
  119. top: -2px;
  120. left: -402px;
  121. border-right: 1px solid #999;
  122. box-shadow: 0 0 15px rgba(0,0,0,0.1);
  123. cursor: pointer;
  124. div{
  125. height: 43px;
  126. padding: 10px 15px;
  127. box-sizing: border-box;
  128. }
  129. }
  130. }
  131. </style>