<i-button type="primary" icon="ios-add" @click="addNodeModal = true">添加节点</i-button>
<Modal v-model="addNodeModal" title="添加节点">
节点名称:<input type="text" class="form-control bg-light border-0 small"
placeholder="输入nodeNmae" v-model="nodeName"/>
<div slot="footer">
<i-button type="text" size="large" @click="addNodeModal=false">取消</i-button>
<i-button type="primary" size="large" @click="addNodeOk">确定</i-button>
</div>
</Modal>
var vm = new Vue({
el: '#app',
data:{
addNodeModal:false,
nodeName:"",
},
methods: {
addNodeOk(){
let nodeName = this.nodeName;
if (nodeName == "") {
this.$Message.error('请输入节点名称!');
return; // modal不会关闭
}else{
$.ajax({
type: "POST",
url: ctxPath + "/addNode",
data: {"nodeName":nodeName},
dataType: "json",
success: function(result){
if (result) {
this.$Message.success('添加节点成功!');
}else{
this.$Message.error('添加节点失败,请检查!');
}
}
});
}
},
}
});
效果图:
自定义确定取消按钮,点”确定“按钮根据条件关闭modal:
<div slot="footer">
<i-button type="text" size="large" @click="addNodeModal=false">取消</i-button>
<i-button type="primary" size="large" @click="addNodeOk">确定</i-button>
</div>