<el-button
@click="handleAntiClick"
type="primary"
size="small"
>彈框
</el-button>
<el-dialog
title="注射"
:visible.sync="AntiDialogVisible"
width="30%"
class="schDialog"
center
>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="護工工號">
<el-input
v-model="form.jobNum"
placeholder="請輸入或者掃描工號"
autofocus
v-focus
clearable
style="width:250px;"
ref="inputNum"
@keyup.enter.native="handleAntiOk"
></el-input>
</el-form-item>
<el-form-item label="注射時間">
<!-- <el-input v-model="form.rejTime"></el-input> -->
<el-date-picker
v-model="form.rejTime"
type="datetime"
placeholder="選擇日期時間"
:clearable="false"
></el-date-picker>
<i style="color:red;font-size:12px;">抗生素有效期為30分鍾</i>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="AntiDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleAntiOk">確 定</el-button>
</span>
</el-dialog>
data(){
return{
AntiDialogVisible: false,
form: {
jobNum: '',
rejTime: new Date(2020, 2, 2, 2, 2, 2),
apply_id: ''
}
}
}
// 自定義v-focus指令
directives: {
focus: {
// 指令的定義
inserted: (el) => {
// 聚焦元素
el.querySelector('input').focus()
// el.focus()
}
}
},
// 使用witch進行監聽，從而賦予狀態
watch: {
AntiDialogVisible(newVal, oldVal) {
// console.log(newVal)
if (newVal === true) {
this.$nextTick(() => {
// 自動獲取焦點 element組件autofocus失效
this.$refs.inputNum.focus()
this.$refs.inputNum.$el.querySelector('input').focus()
})
}
}
}，
methods:{
handleAntiOk(){
this.AntiDialogVisible = false
}
}