【Vue】el-button按钮显示/隐藏
路由跳转不同页面,显示相应的按钮,在这里,小编介绍一下如何设置el-button的隐藏和显示,仅做笔记,请多指教!实现效果:添加/编辑页面 显示取消、发布、保存;详情页,如果是已发布状态,显示下线:实现代码如下:定义四个按钮:<el-button @click="visible = false" :style="{ display: visibleCancel }">取消...
·
路由跳转不同页面,显示相应的按钮,在这里,小编介绍一下如何设置el-button的隐藏和显示,仅做笔记,请多指教!
实现效果:
添加/编辑页面 显示取消、发布、保存;详情页,如果是已发布状态,显示下线:
实现代码如下:
定义四个按钮:
<el-button @click="visible = false" :style="{ display: visibleCancel }">取消</el-button>
<el-button type="primary" @click="dataPublish()" :style="{ display: visiblePublish }">发布</el-button>
<el-button type="primary" @click="dataFormSubmit()" :style="{ display: visibleSubmit }">保存</el-button>
<el-button type="primary" @click="handleStatus()" :style="{ display: visibleLine }">下线</el-button>
定义显示状态:
data () {
return {
visibleCancel: '', //显示
visiblePublish: '', //显示
visibleSubmit: '', //显示
visibleLine: 'none' //隐藏
}
}
初始化init状态:
init (id,state,flag) {
this.dataForm.id = id || 0
//如果点详情
if (flag === 1) {
this.disable = true
//如果已发布状态,显示按钮:下线
if (state === 1) {
this.visiblePublish = 'none'
this.visibleSubmit = 'none'
this.visibleLine = ''
this.visibleCancel = 'none'
}else {
this.visiblePublish = 'none'
this.visibleSubmit = 'none'
this.visibleLine = 'none'
this.visibleCancel = 'none'
}
}
}
总结:
每一个小细节,都能给用户很好的体验,致敬伟大的计算机科学!
计算机的美妙想法来自生活,感恩伟大的奠基者!
更多推荐
已为社区贡献1条内容
所有评论(0)