1b0c9061994d1cc804d1373728538919db40d9b6.svn-base 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <a-date-picker
  3. dropdownClassName="j-date-picker"
  4. :disabled="disabled || readOnly"
  5. :placeholder="placeholder"
  6. @change="handleDateChange"
  7. :value="momVal"
  8. :showTime="showTime"
  9. :format="dateFormat"
  10. :getCalendarContainer="getCalendarContainer"
  11. v-bind="$attrs"/>
  12. </template>
  13. <script>
  14. import moment from 'moment'
  15. export default {
  16. name: 'JDate',
  17. props: {
  18. placeholder:{
  19. type: String,
  20. default: '',
  21. required: false
  22. },
  23. value:{
  24. type: String,
  25. required: false
  26. },
  27. dateFormat:{
  28. type: String,
  29. default: 'YYYY-MM-DD',
  30. required: false
  31. },
  32. //此属性可以被废弃了
  33. triggerChange:{
  34. type: Boolean,
  35. required: false,
  36. default: false
  37. },
  38. readOnly:{
  39. type: Boolean,
  40. required: false,
  41. default: false
  42. },
  43. disabled:{
  44. type: Boolean,
  45. required: false,
  46. default: false
  47. },
  48. showTime:{
  49. type: Boolean,
  50. required: false,
  51. default: false
  52. },
  53. getCalendarContainer: {
  54. type: Function,
  55. default: (node) => node.parentNode
  56. }
  57. },
  58. data () {
  59. let dateStr = this.value;
  60. return {
  61. decorator:"",
  62. momVal:!dateStr?null:moment(dateStr,this.dateFormat)
  63. }
  64. },
  65. watch: {
  66. value (val) {
  67. if(!val){
  68. this.momVal = null
  69. }else{
  70. this.momVal = moment(val,this.dateFormat)
  71. }
  72. }
  73. },
  74. methods: {
  75. moment,
  76. handleDateChange(mom,dateStr){
  77. this.$emit('change', dateStr);
  78. }
  79. },
  80. //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  81. model: {
  82. prop: 'value',
  83. event: 'change'
  84. }
  85. }
  86. </script>