DaterSmaller.vue 6.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div>
  3. <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
  4. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateYear" class="input-number" size="small" v-model="date.year" :min="0" @keypress.enter.native.exact="$refs.dateMonth.focus" @keypress.shift.enter.native.exact="$refs.anotherDateSecond.focus" @focus="()=>$refs.dateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
  5. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMonth" class="input-number" size="small" v-model="date.month" :min="0" :max="11" @keypress.enter.native.exact="$refs.dateDay.focus" @keypress.shift.enter.native.exact="$refs.dateYear.focus" @focus="()=>$refs.dateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
  6. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateDay" class="input-number" size="small" v-model="date.day" :min="0" :max="30" @keypress.enter.native.exact="$refs.dateHour.focus" @keypress.shift.enter.native.exact="$refs.dateMonth.focus" @focus="()=>$refs.dateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
  7. </el-row>
  8. <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
  9. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateHour" class="input-number" size="small" v-model="date.hour" :min="0" :max="23" @keypress.enter.native.exact="$refs.dateMinute.focus" @keypress.shift.enter.native.exact="$refs.dateDay.focus" @focus="()=>$refs.dateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
  10. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMinute" class="input-number" size="small" v-model="date.minute" :min="0" :max="59" @keypress.enter.native.exact="$refs.dateSecond.focus" @keypress.shift.enter.native.exact="$refs.dateHour.focus" @focus="()=>$refs.dateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
  11. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateSecond" class="input-number" size="small" v-model="date.second" :min="0" :max="59" @keypress.enter.native.exact="$refs.option.focus" @keypress.shift.enter.native.exact="$refs.dateMinute.focus" @focus="()=>$refs.dateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
  12. </el-row>
  13. <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
  14. <el-col :span="7">
  15. <el-select v-model="option" placeholder="操作" ref="option" @visible-change="setOption">
  16. <el-option
  17. v-for="item in options"
  18. :key="item.value"
  19. :label="item.label"
  20. :value="item.value">
  21. </el-option>
  22. </el-select>
  23. </el-col>
  24. </el-row>
  25. <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
  26. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateYear" class="input-number" size="small" v-model="anotherDate.year" :min="0" @keypress.enter.native.exact="$refs.anotherDateMonth.focus" @keypress.shift.enter.native.exact="$refs.dateSecond.focus" @focus="()=>$refs.anotherDateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
  27. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMonth" class="input-number" size="small" v-model="anotherDate.month" :min="0" :max="11" @keypress.enter.native.exact="$refs.anotherDateDay.focus" @keypress.shift.enter.native.exact="$refs.anotherDateYear.focus" @focus="()=>$refs.anotherDateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
  28. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateDay" class="input-number" size="small" v-model="anotherDate.day" :min="0" :max="30" @keypress.enter.native.exact="$refs.anotherDateHour.focus" @keypress.shift.enter.native.exact="$refs.anotherDateMonth.focus" @focus="()=>$refs.anotherDateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
  29. </el-row>
  30. <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
  31. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateHour" class="input-number" size="small" v-model="anotherDate.hour" :min="0" :max="23" @keypress.enter.native.exact="$refs.anotherDateMinute.focus" @keypress.shift.enter.native.exact="$refs.anotherDateDay.focus" @focus="()=>$refs.anotherDateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
  32. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMinute" class="input-number" size="small" v-model="anotherDate.minute" :min="0" :max="59" @keypress.enter.native.exact="$refs.anotherDateSecond.focus" @keypress.shift.enter.native.exact="$refs.anotherDateHour.focus" @focus="()=>$refs.anotherDateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
  33. <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateSecond" class="input-number" size="small" v-model="anotherDate.second" :min="0" :max="59" @keypress.enter.native.exact="calculate" @keypress.shift.enter.native.exact="$refs.anotherDateMinute.focus" @focus="()=>$refs.anotherDateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
  34. </el-row>
  35. <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
  36. <el-col :span="6" style="text-align: center;">
  37. <el-button type="primary" @click="calculateAsync">计算</el-button>
  38. </el-col>
  39. </el-row>
  40. </div>
  41. </template>
  42. <script>
  43. import dater from './Dater.js';
  44. export default {
  45. ...dater
  46. }
  47. </script>
  48. <style scoped>
  49. @import url('./Dater.css');
  50. </style>