DatePicker.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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 v-clickoutside="handleClose"
  7. v-model="dateValue"
  8. style="width:250px;"
  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(8, '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','parentDate'],
  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. watch: {
  121. parentDate(n,o){
  122. if(n[0].format('YYYY-MM-DD')!=this.dateValue[0].format('YYYY-MM-DD')){
  123. this.dateValue=n
  124. }
  125. }
  126. },
  127. methods: {
  128. //日期改变事件
  129. onChange(date, dateString) {
  130. this.dateValue = date
  131. // console.log(this.dateValue)
  132. if (dateString.length == 2) {
  133. this.$parent.opendate()
  134. this.$parent.type = 9
  135. this.$parent.dateValue = date
  136. }
  137. },
  138. //侧边的按钮点击事件
  139. changeDate(val) {
  140. this.type = val.value
  141. this.dateValue = val.dateValue
  142. // console.log(this.dateValue)
  143. this.$parent.type = val.value
  144. this.$parent.dateValue = val.dateValue
  145. },
  146. handleClose(e) {
  147. // console.log(e)
  148. if(e.target.className){
  149. if(e.target.className.indexOf('ant-calendar')==-1){
  150. this.$parent.opendateClose()
  151. }
  152. }
  153. },
  154. disabledDate(current) {
  155. // console.log(current)
  156. return current && current > moment().subtract(1, 'day')
  157. },
  158. openChange(open) {
  159. // console.log(open)
  160. }
  161. },
  162. mounted() {
  163. this.dateValue = [moment(), moment()]
  164. if (this.left) {
  165. this.$refs.pickOptions.style.left = this.left
  166. }
  167. // console.log(this.$refs.pickOptions.style.left)
  168. }
  169. }
  170. </script>
  171. <style lang="scss" scoped>
  172. .datePicker {
  173. position: relative;
  174. .pickOptions {
  175. width: 100px;
  176. background-color: #fff;
  177. height: 302px;
  178. position: absolute;
  179. top: -2px;
  180. left: -402px;
  181. border-right: 1px solid #999;
  182. box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  183. cursor: pointer;
  184. z-index: 3;
  185. div {
  186. height: 43px;
  187. padding: 10px 15px;
  188. box-sizing: border-box;
  189. }
  190. .btn:hover{
  191. color: #1890ff;
  192. }
  193. }
  194. }
  195. </style>