DatePicker.vue 4.3 KB

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