DatePicker.vue 4.7 KB

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