datePick.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <div class="datePicker" >
  3. <p
  4. :style="active == item.value ? 'color:cornflowerblue;background:#f2f2f2' : ''"
  5. v-for="(item, index) of pickOptions"
  6. :key="index"
  7. @click="changeDate(item)"
  8. >
  9. {{ item.title }}
  10. </p>
  11. <a-range-picker v-clickoutside="handleClose"
  12. v-model="mydateValue"
  13. style="width:250px;"
  14. :allowClear=false
  15. :disabled-date="disabledDate"
  16. :openChange="openChange"
  17. @change="onChange"
  18. />
  19. </div>
  20. </template>
  21. <script>
  22. const clickoutside = {
  23. // 初始化指令
  24. bind(el, binding, vnode) {
  25. function documentHandler(e) {
  26. // 这里判断点击的元素是否是本身,是本身,则返回
  27. if (el.contains(e.target)) {
  28. return false
  29. }
  30. // 判断指令中是否绑定了函数
  31. if (binding.expression) {
  32. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  33. binding.value(e)
  34. }
  35. }
  36. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  37. el.__vueClickOutside__ = documentHandler
  38. document.addEventListener('click', documentHandler)
  39. },
  40. update() {},
  41. unbind(el, binding) {
  42. // 解除事件监听
  43. document.removeEventListener('click', el.__vueClickOutside__)
  44. delete el.__vueClickOutside__
  45. }
  46. }
  47. import moment from 'moment'
  48. let pickOptions = [
  49. {
  50. title: '今天',
  51. key: '1',
  52. value: 1,
  53. dateValue: [moment(), moment()]
  54. },
  55. {
  56. title: '昨天',
  57. key: '2',
  58. value: 2,
  59. dateValue: [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
  60. },
  61. {
  62. title: '一周',
  63. key: '3',
  64. value: 3,
  65. dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')]
  66. },
  67. {
  68. title: '一个月',
  69. key: '5',
  70. value: 5,
  71. dateValue: [
  72. moment()
  73. .subtract(1, 'days')
  74. .subtract(1, 'months'),
  75. moment().subtract(1, 'days')
  76. ]
  77. },
  78. {
  79. title: '三个月',
  80. key: '6',
  81. value: 6,
  82. dateValue: [
  83. moment()
  84. .subtract(1, 'days')
  85. .subtract(3, 'months'),
  86. moment().subtract(1, 'days')
  87. ]
  88. },
  89. {
  90. title: '六个月',
  91. key: '7',
  92. value: 7,
  93. dateValue: [
  94. moment()
  95. .subtract(1, 'days')
  96. .subtract(6, 'months'),
  97. moment().subtract(1, 'days')
  98. ]
  99. },
  100. {
  101. title: '一年',
  102. key: '8',
  103. value: 8,
  104. dateValue: [
  105. moment().subtract(1, 'days').subtract(1, 'years'),
  106. moment().subtract(1, 'days')
  107. ]
  108. }
  109. ]
  110. export default {
  111. props: ['dateValue','type'],
  112. data() {
  113. return {
  114. moment,
  115. mydateValue: [moment(),moment()],
  116. pickOptions,
  117. active:1
  118. // pickOptions:JSON.parse(JSON.stringify(pickOptions))
  119. }
  120. },
  121. directives: { clickoutside },
  122. watch: {
  123. parentDate(n,o){
  124. if(n[0].format('YYYY-MM-DD')!=this.mydateValue[0].format('YYYY-MM-DD')){
  125. this.mydateValue=n
  126. }
  127. }
  128. },
  129. methods: {
  130. //日期改变事件
  131. onChange(date, dateString) {
  132. this.mydateValue = date
  133. this.active=9;
  134. console.log(this.mydateValue)
  135. if (dateString.length == 2) {
  136. this.$emit('update:dateValue', this.mydateValue)
  137. this.$emit('update:type', 9)
  138. }
  139. },
  140. //侧边的按钮点击事件
  141. changeDate(val) {
  142. console.log(val);
  143. this.active=val.value;
  144. this.mydateValue = val.dateValue
  145. this.$emit('update:dateValue', this.mydateValue)
  146. this.$emit('update:type', val.value)
  147. },
  148. handleClose(e) {
  149. // console.log(e)
  150. if(e.target.className){
  151. if(e.target.className.indexOf('ant-calendar')==-1){
  152. // this.$parent.opendateClose()
  153. }
  154. }
  155. },
  156. disabledDate(current) {
  157. // console.log(current)
  158. return current && current > moment().subtract(1, 'day')
  159. },
  160. openChange(open) {
  161. // console.log(open)
  162. }
  163. },
  164. mounted() {
  165. this.mydateValue = [moment(), moment()]
  166. // console.log(this.$refs.pickOptions.style.left)
  167. }
  168. }
  169. </script>
  170. <style lang="scss" scoped>
  171. .datePicker {
  172. position: relative;
  173. p{
  174. margin-bottom: 0;
  175. }
  176. .pickOptions {
  177. width: 100px;
  178. background-color: #fff;
  179. height: 302px;
  180. position: absolute;
  181. top: -2px;
  182. left: -402px;
  183. border-right: 1px solid #999;
  184. box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  185. cursor: pointer;
  186. z-index: 3;
  187. div {
  188. height: 43px;
  189. padding: 10px 15px;
  190. box-sizing: border-box;
  191. }
  192. .btn:hover{
  193. color: #1890ff;
  194. }
  195. }
  196. }
  197. </style>