VUE的页面用ElementUI实现按钮的二次确认功能
云平台增加后台遥控功能,为避免误触,在控制前加入遥控按钮,实现二次确认遥控这个按钮用的是Popover 弹出框,取消事件设置visible为false,使弹出框消失,确认事件changeButton()改变状态。<el-popoverplacement="top"width="160"v-model="visible"><p>确定开始操作机器人吗?</p><
·
云平台增加后台遥控功能,为避免误触,在控制前加入遥控按钮,实现二次确认
遥控这个按钮用的是Popover 弹出框,取消事件设置visible为false,使弹出框消失,确认事件changeButton()改变状态。
<el-popover
placement="top"
width="160"
v-model="visible">
<p>确定开始操作机器人吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="changeButton()">确定</el-button>
</div>
<el-button plain slot="reference">遥控</el-button>
</el-popover>
后面的按钮:
<el-button
:disabled="changeBtn"
plain
@click="handleSwitch(0)"
:class="pixelType == 0 ? 'btnin' : ''"
>前进</el-button
>
按钮的disabled是控制是否可点击,默认是false,这里我用changeBtn这个变量来控制它
在data里面加入changeBtn设置默认按钮不可用,visible设置遥控按钮点完确认取消以后消失:
在methods:里面加入changeButton(),
点击事件,把changeBtn状态改为false,此时后面按钮可用
更多推荐
已为社区贡献12条内容
所有评论(0)