vue3 原生方法 实现bootstrap5 模态框modal 新增和编辑

vue3 原生实现bootstrap5 模态框modal 新增和编辑

用习惯bootstrap5了，最近使用vue3时，有的同学会遇到不知道怎么调用 bootstrap5模态框的问题，本文就简单的讲一下逻辑，顺便把bootstrap5模态框封装成一个子组件，这样就可以很方便的使用了。
一、安装bootstrap5

//带popper 一些下拉 弹出、提示组件可以直接使用
npm i --save bootstrap @popperjs/core
//安装图标库
npm i bootstrap-icons

二、mian.js 引入

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icons.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

三、在用到的地方引入(暂用js，可转化成ts)

//import Alert from 'bootstrap/js/dist/alert';
import { Modal,Tooltip, Toast, Popover } from 'bootstrap';
//用几个引几个就可以，比如只用modal 就引入一个就可以

四、vue3页面引入子组件模态框组件

<template>
	<!--写两个事件按钮-->
	<a role="button" @click="onOpenModal('add')" class="link-success"><span class="bi bi-plus-circle-fill me-3"></span>新增</a>
	
	<a role="button" @click="onOpenModal('edit',item)" class="link-success"><span class="bi bi-pencil-fill me-3"></span>修改</a>
	
	<!--引入模态框组件-->
   	<MyModal ref="myModal" />
</template>

<script setup>
    import MyModal from '@/views/components/myModal.vue';
    import {ref} from 'vue'
    const myModal = ref()
    
    // 打开菜单弹窗
    const onOpenModal = (type,row) => {
        myModal.value.onShowModal(type,row);
    };

    // 生命周期 首次打开页面时加载
    onMounted(() => {
      
    })

</script>

<style scoped>

</style>

四、子组件 bootstrap5 模态框代码

<!-- myModal.vue -->
<template>
  <!-- Modal -->
  <div class="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title text-muted fw-bold" id="exampleModalLabel" v-html="rowForm.modal.title"></div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <form id="foodForm" method="post">

            <div class="mb-3">
              <label for="food-name" class="form-label"><small>名称</small></label>
              <input id="food-name" type="text" name="food_name" class="form-control"
                v-model="rowForm.data.food_name" placeholder="输入食物名称" />
            </div>

            <div class="mb-3">
              <label for="food-remark" class="form-label"><small>产地</small></label>
              <input id="food-remark" type="text" name="food_remark" class="form-control"
                v-model="rowForm.data.food_remark" placeholder="输入食物产地" />
            </div>

          </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ rowForm.modal.closeText }}</button>
          <button type="button" class="btn btn-success" @click="onSubmit">{{ rowForm.modal.confirmText }}</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {Modal} from 'bootstrap'
//  const props = defineProps(['rowForm','onShowModal'])

const rowForm = reactive({
  data: {
    title: '',
    food_name: '',
    food_remark: ''
  },
  modal: {
    isShowModal: false,
    type: '',
    title: '',
    confirmText: '',
    closeText: '取消'
  }

})

const initForm = rowForm.data
const title = ref()
// 方法一：使用 Bootstrap 原生方法
const onShowModal = (type, row = {}) => {

  // console.log(type,row)
  rowForm.modal.type = type
  rowForm.data = initForm

  if (type == 'edit') {

    rowForm.modal.title = '<span class="bi bi-pencil me-1"></span>编辑'
    rowForm.modal.confirmText = '修改'
    rowForm.data = row

  } else {

    // console.log('000')
    rowForm.modal.title = '<span class="bi bi-plus me-1"></span>新增'
    rowForm.modal.confirmText = '保存'

  }

  const myModal = document.getElementById('myModal');
  const modal = new Modal(myModal);
  modal.show();

  //   console.log(rowData)
  //  setTimeout(() => {
  //     modal.hide();
  //     console.log('www')
  //  }, 3000);
};



const onSubmit = () => {
  console.log('rowNewData', rowForm.data)
}

defineExpose({
  onShowModal
})
</script>

<style scoped>
/* 这里可以添加局部样式，但通常Bootstrap的样式已经足够 */
</style>

现在，可以使用了，在父页面数据行中 加上点击事件，新增或编辑，可以唤起模态框，进行数据操作，其它如父页面接口获取数据，子页面编辑保存更新数据，方法没有写，自己补吧，主要是讲一下模态框的使用。。。。