<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="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
}
}