问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何以编程方式在 bootstrap-vue 模态主体和页脚中注入内容？

社区维基
1
新手上路，请多包涵

我想使用 bootstrap vue modal 组件 在 vuejs 应用程序中实现此功能：

当用户点击页面 UI 上的删除按钮时：

  • 它显示了主体中带有动态内容的模态：“您确定要删除客户：customer_name_here”

  • 如果用户点击“取消”按钮：模态消失。

  • 如果用户点击“确定”按钮：

  • 它将模态正文内容更改为：’Deleting customer ‘customer_name_here’ …，禁用取消和确定按钮，并调用 API 来删除客户。

当从 API 收到成功响应时：

  • 它将模态正文内容更改为：“成功删除客户‘customer_name_here’
  • 仅在模态页脚中显示确定按钮，如果单击模态，该按钮就会消失。

这是到目前为止的代码：

  <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>

VueJS 代码：

 deleteCustomer(evt) {

      evt.preventDefault()
      this.$refs.modal.hide()

      CustomerApi.deleteCustomer(this.customer.id).then(response => {
          // successful response
        })

原文由 ace 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译vue.jsvuejs2bootstrap-vue
阅读 560
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果我没理解错的话，你想显示基于不同状态组合的模态内容。

根据您的描述，应该有两种状态：

  1. deletingState：表示是否开始删除

  2. loadingState：表示是否正在等待服务器响应

查看 Bootstrap Vue Modal Guide ，然后搜索 keyword= Disabling built-in buttons ，你会看到我们可以使用 cancel-disabled 和 ok-disabled 道具来控制默认 取消 和 确定 按钮的禁用状态（或者你可以使用 slot= modal-footer ，或 modal-ok ， modal-cancel 。）。

您可以使用的其他道具： ok-only , cancel-only , busy 。

最后绑定 v-if 和 props 与状态组合以显示内容。

像下面的演示：

 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>

原文由 Sphinx 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

您可能更喜欢使用单独的模式，逻辑变得更清晰，您可以轻松添加更多路径，例如重试 API 错误。

 console.clear()
const CustomerApi = {
  deleteCustomer: (id) => {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        if (id !== 1) {
          reject(new Error('Delete has failed'))
        } else {
          resolve('Deleted')
        }
      }, 3000);
    });
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      customer: {id: 1, name: 'myCustomer'},
      id: 1,
      error: null
    }
  },
  methods: {
    deleteCustomer(e) {
      e.preventDefault()

      this.$refs.modalDeleting.show()
      this.$refs.modalDelete.hide()

      CustomerApi.deleteCustomer(this.id)
        .then(response => {
          this.$refs.modalDeleting.hide()
          this.$refs.modalDeleted.show()
        })
        .catch(error => {
          this.error = error.message
          this.id = 1  // For demo, api success 2nd try
          this.$refs.modalError.show()
        })
    }
  }
})

 <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>
<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.modal-delete variant="danger">Delete</b-button>

<input type="test" id="custId" v-model="id">
<label for="custId">Enter 2 to make it fail</label>

<b-modal
  id="modal-delete"
  ref="modalDelete"
  title="Delete Customer"
  @ok="deleteCustomer"
  centered no-close-on-backdrop close-on-esc>
  <p class="my-4">Are you sure, you want to delete customer: {{customer.name}}</p>
</b-modal>

<b-modal
  ref="modalDeleting"
  title="Deleting Customer"
  centered no-close-on-backdrop no-close-on-esc
  no-fade
  :busy="true">
  <p class="my-4">Deleting customer: {{customer.name}}</p>
</b-modal>

<b-modal
  ref="modalDeleted"
  title="Customer Deleted"
  centered no-close-on-backdrop close-on-esc
  no-fade
	:ok-only="true">
  <p class="my-4">Customer '{{customer.name}}' has been deleted</p>
</b-modal>

<b-modal
  ref="modalError"
  title="Error Deleting Customer"
  centered no-close-on-backdrop close-on-esc
  no-fade
  :ok-title="'Retry'"
  @ok="deleteCustomer">
  <p class="my-4">An error occured deleting customer: {{customer.name}}</p>
  <p>Error message: {{error}}</p>
</b-modal>

</div>

原文由 Richard Matsen 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题