index.vue 875 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view class="jnpf-time-range">
  3. <JnpfDateRange v-model="value" :placeholder="placeholder" :format='format' :disabled="disabled" :type="type" />
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'jnpf-time-range',
  9. props: {
  10. modelValue: {
  11. type: Array,
  12. default: () => []
  13. },
  14. placeholder: {
  15. type: String,
  16. default: '请选择时间范围'
  17. },
  18. disabled: {
  19. type: Boolean,
  20. default: false
  21. },
  22. format: {
  23. type: String,
  24. default: 'yyyy-MM-dd HH:mm:ss'
  25. },
  26. type: {
  27. type: String,
  28. default: 'time'
  29. }
  30. },
  31. data() {
  32. return {
  33. value: ""
  34. }
  35. },
  36. watch: {
  37. modelValue: {
  38. handler(val) {
  39. this.value = val
  40. },
  41. immediate: true
  42. },
  43. value(val) {
  44. this.$emit('update:modelValue', val)
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. .jnpf-time-range {
  51. width: 100%;
  52. }
  53. </style>