ace*_*ace 9 vue.js vuejs2 bootstrap-vue
我想使用bootstrap vue模式组件在vuejs app中实现此功能:
当用户单击页面UI上的"删除"按钮时:
它显示了其正文中包含动态内容的模式:"您确定要删除客户:customer_name_here"
如果用户点击"取消"按钮:模态消失.
如果用户点击"确定"按钮:
它将模态正文内容更改为:'删除客户'customer_name_here'...,它会禁用"取消"和"确定"按钮,并调用API来删除客户.
从API收到成功响应时:
这个代码到目前为止:
<b-button v-b-modal.modal1 variant="danger">Delete</b-button>
<b-modal id="modal1" title="Delete Customer"
@ok="deleteCustomer" centered no-close-on-backdrop -close-on-esc ref="modal">
<p class="my-4">Are you sure, you want to delete customer:</p>
<p>{{customer.name}}</p>
</b-modal>
Vue JS代码:
deleteCustomer(evt) {
evt.preventDefault()
this.$refs.modal.hide()
CustomerApi.deleteCustomer(this.customer.id).then(response => {
// successful response
})
如果我理解正确，则您希望根据不同的状态组合显示模式内容。
如您的描述，应该有2种状态：
deleteState：指示是否开始删除
loadingState：指示是否正在等待服务器的响应
查看Bootstrap Vue Modal Guide，然后搜索keyword = 禁用内置按钮，您将看到我们可以使用cancel-disabled和ok-disabledprops控制默认的Cancel和OK按钮的禁用状态（或者您可以使用slot = modal-footer或modal-好的，模态取消。）。
其他道具你可以使用：ok-only，cancel-only，busy。
最后v-if用状态组合绑定和道具以显示内容。
像下面的演示：
Vue.config.productionTip = false
new Vue({
el: '#app',
data() {
return {
customer: {name: 'demo'},
deletingState: false, // init=false, if pop up modal, change it to true
loadingState: false // when waiting for server respond, it will be true, otherwise, false
}
},
methods: {
deleteCustomer: function() {
this.deletingState = false
this.loadingState = false
this.$refs.myModalRef.show()
},
proceedReq: function (bvEvt) {
if(!this.deletingState) {
bvEvt.preventDefault() //if deletingState is false, doesn't close the modal
this.deletingState = true
this.loadingState = true
setTimeout(()=>{
console.log('simulate to wait for server respond...')
this.loadingState = false
this.deletingState = true
}, 1500)
} else {
console.log('confirm to delete...')
}
},
cancelReq: function () {
console.log('cancelled')
}
}
}).customer-name {
background-color:green;
font-weight:bold;
}<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button v-b-modal.modal1 variant="danger" @click="deleteCustomer()">Delete</b-button>
<b-modal title="Delete Customer" centered no-close-on-backdrop no-close-on-esc ref="myModalRef"
@ok="proceedReq($event)" @cancel="cancelReq()" :cancel-disabled="deletingState" :ok-disabled="loadingState" :ok-only="deletingState && !loadingState">
<div v-if="!deletingState">
<p class="my-4">Are you sure, you want to delete customer:<span class="customer-name">{{customer.name}}</span></p>
</div>
<div v-else>
<p v-if="loadingState">
Deleting customer <span class="customer-name">{{customer.name}}</span>
</p>
<p v-else>
Successfully deleted customer <span class="customer-name">{{customer.name}}</span>
</p>
</div>
</b-modal>
</div>