TimeExample.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <div>
  3. <h1>时间控件</h1>
  4. <h2>基本表单</h2>
  5. <div>
  6. <div class="form-group">
  7. <label for="datetime">时间</label>
  8. <Time v-model="dateValue1"
  9. class="form-control"></Time>
  10. </div>
  11. </div>
  12. {{ dateValue1 }}
  13. <h2>内联表单</h2>
  14. <div class="form-inline">
  15. <div class="form-group">
  16. <label class="control-label"
  17. for="inputGroupSuccess3">时间</label>
  18. <Time v-model="dateValue2"
  19. class="form-control"
  20. style="width: 200px;"></Time>
  21. </div>
  22. </div>
  23. {{ dateValue2 }}
  24. <h2>只读</h2>
  25. <div class="form-inline">
  26. <div class="form-group">
  27. <label class="control-label"
  28. for="inputGroupSuccess3">时间</label>
  29. <Time v-model="dateValue3"
  30. :readonly="true"
  31. class="form-control"
  32. style="width: 200px;"></Time>
  33. </div>
  34. </div>
  35. {{ dateValue3 }}
  36. </div>
  37. </template>
  38. <script>
  39. import Time from "@/time/index.js";
  40. export default {
  41. name: 'date-example',
  42. data: function () {
  43. return {
  44. dateValue1: '12:00:01',
  45. dateValue2: '14:02:00',
  46. dateValue3: '14:02:00',
  47. }
  48. },
  49. components: {
  50. Time,
  51. },
  52. methods: {
  53. }
  54. }
  55. </script>
  56. <style>
  57. </style>