1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- <template>
- <div>
- <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateYear" class="input-number" size="small" v-model="date.year" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMonth" class="input-number" size="small" v-model="date.month" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateDay" class="input-number" size="small" v-model="date.day" @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>
- <el-col :span="1"><span class="label">-</span></el-col>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateHour" class="input-number" size="small" v-model="date.hour" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMinute" class="input-number" size="small" v-model="date.minute" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateSecond" class="input-number" size="small" v-model="date.second" @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>
- </el-row>
- <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
- <el-col :lg="{span:2}" :span="3">
- <el-select v-model="option" placeholder="操作" ref="option" @visible-change="setOption">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-col>
- </el-row>
- <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateYear" class="input-number" size="small" v-model="anotherDate.year" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMonth" class="input-number" size="small" v-model="anotherDate.month" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateDay" class="input-number" size="small" v-model="anotherDate.day" @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>
- <el-col :span="1"><span class="label">-</span></el-col>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateHour" class="input-number" size="small" v-model="anotherDate.hour" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMinute" class="input-number" size="small" v-model="anotherDate.minute" @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>
- <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateSecond" class="input-number" size="small" v-model="anotherDate.second" @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>
- </el-row>
- <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
- <el-col :span="3" style="text-align: center;">
- <el-button type="primary" @click="calculateAsync">计算</el-button>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import dater from './Dater.js'
- export default {
- ...dater
- }
- </script>
- <style scoped>
- @import url('./Dater.css');
- </style>
|