edit [b-modal]

Author: ChanMenglin

package.json

@@ -28,7 +28,6 @@
     "howler": "^2.2.1",
     "jquery": "^3.6.0",
     "moment": "^2.29.1",
-    "popper.js": "^1.16.1",
     "print-js": "^1.6.0",
     "province-city-china": "^7.1.3",
     "register-service-worker": "^1.7.2",

src/components/base/Modal/b-modal.vue

@@ -4,38 +4,32 @@
     :class="ObjClass"
     tabindex="-1"
     role="dialog"
-    :aria-labelledby="labelledby"
+    :data-bs-keyboard="!backdrop && keyboard"
+    :data-bs-backdrop="backdrop ? 'static' : true"
     :aria-modal="show"
-    aria-hidden="false"
+    :aria-hidden="!show"
   >
     <div
       class="modal-dialog my-0"
       :class="documentClass"
-      :style="documentStyle"
       role="document"
     >
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title">
-            <slot
-              v-if="$slots.icon || showIcon"
-              name="icon"
-            >
-              <i
-                class="me-2"
-                :class="iconClass"
-              />
-            </slot>
-            {{ dataTitle }}
+            <basic-label
+              :label="dataTitle"
+              :icon="dataIcon"
+              :info="info"
+              :iconColor="dataColor"
+            />
           </h5>
           <button
             type="button"
-            class="close"
-            data-dismiss="modal"
+            class="btn-close"
+            data-bs-dismiss="modal"
             aria-label="Close"
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
+          />
         </div>
         <div class="modal-body">
           <slot>{{ content }}</slot>
@@ -45,11 +39,10 @@
           class="modal-footer"
         >
           <slot name="footer">
-            <!-- TODO: 关闭方式存在问题 -->
             <button
               type="button"
               class="btn btn-secondary"
-              data-dismiss="modal"
+              data-bs-dismiss="modal"
             >
               Close
             </button>
@@ -69,29 +62,27 @@
 <script>
 import util from "@/components/util/index.js";
 
+import BasicLabel from '@/components/basic/basic-label.vue'
+
 export default {
   name: "BModal",
+  components: { BasicLabel, },
   mixins: [ util.mixins.status.message, ],
   props: {
+    info: util.props.String,
     content: util.props.String,
-    scrol: util.props.Boolean, //modal-dialog-scrollable
+    backdrop: util.props.Boolean,//
+    keyboard: util.props.Boolean,
+    scrol: util.props.Boolean, // modal-dialog-scrollable
+    center: util.props.Boolean,// modal-dialog-centered
     hideFooter: util.props.Boolean,
-    drawer: util.props.Boolean,
     size: {
       type: String,
       default: "",
       validator: function(val) {
         return ["", "xl", "lg", "sm"].includes(val);
       }
     }, // modal-xl modal-lg modal-sm
-    set: {
-      ...util.props.set,
-      default: 'up',
-    },
-    labelledby: {
-      ...util.props.String,
-      default: "Modal Dialog"
-    },
   },
   data() {
     return {
@@ -103,46 +94,11 @@ export default {
       return this.show ? "show" : "";
     },
     documentClass: function() {
-      let scrol = this.scrol ? "modal-dialog-scrollable" : "";
       let size = this.size ? `modal-${this.size}` : "";
-      let set = ''
-      switch (this.set) {
-        case 'left':
-          set = 'w-25 ms-0 d-flex align-items-right'
-          break;
-        case 'right':
-          set = 'w-25 me-0 d-flex align-items-right'
-          break;
-        case 'center':
-          set = 'd-flex align-items-center'
-          break;
-        case 'down':
-          set = 'd-flex align-items-end'
-          break;
-        default:
-          set = ''
-      }
-      return `${scrol} ${set} ${size}`;
-    },
-    documentStyle: function() {
-      let set = ''
-      switch (this.set) {
-        case 'left':
-          set = this.drawer ? 'min-height: 100%' : ''
-          break;
-        case 'right':
-          set = this.drawer ? 'min-height: 100%' : ''
-          break;
-        case 'center':
-          set = this.drawer ? 'min-height: 100%; min-width: 100%' : 'min-height: 100%;'
-          break;
-        case 'down':
-          set = this.drawer ? 'min-height: 100%; min-width: 100%' : 'min-height: 100%'
-          break;
-        default:
-          set = this.drawer ? 'min-width: 100%' : ''
-      }
-      return set
+      let scrol = this.scrol ? "modal-dialog-scrollable" : "";
+      let center = this.center ? 'modal-dialog-centered' : ''
+
+      return `${scrol} ${size} ${center}`;
     },
   },
   methods: {

src/components/util/directives/modal.js

@@ -6,8 +6,8 @@ import tools from '@/tools/index.js'
 const name = 'modal'
 const func = (el, binding) => {
   tools.dom.addAttrs(el, {
-    'data-toggle': 'modal',
-    'data-target': binding.value
+    'data-bs-toggle': 'modal',
+    'data-bs-target': binding.value
   })
 }
 

src/config/status.js

@@ -1,16 +1,16 @@
 const base = {
-    default: { title: 'Default', color: 'primary', icon: 'far fa-dot-circle' },
-    success: { title: 'Success', color: 'success', icon: 'far fa-check-circle' },
-    warning: { title: 'Warning', color: 'warning', icon: 'far fa-exclamation-triangle'},
-    error: { title: 'Error', color: 'danger', icon: 'far fa-times-circle'},
-    danger: { title: 'Danger', color: 'danger', icon: 'far fa-exclamation-circle'},
+    default: { title: 'Default', color: 'primary', icon: 'record-circle-fill' },
+    success: { title: 'Success', color: 'success', icon: 'check-circle-fill' },
+    warning: { title: 'Warning', color: 'warning', icon: 'exclamation-triangle-fill'},
+    error: { title: 'Error', color: 'danger', icon: 'x-circle-fill'},
+    danger: { title: 'Danger', color: 'danger', icon: 'exclamation-circle-fill'},
 }
 
 const message = {
   ...base,
-  system: { title: 'System Info', color: 'info', icon: 'far fa-cog' },
-  info: { title: 'Info', color: 'info', icon: 'far fa-info-circle' },
-  issue: { title: 'Issue', color: 'secondary', icon: 'far fa-question-circle' },
+  system: { title: 'System Info', color: 'info', icon: 'info-lg' },
+  info: { title: 'Info', color: 'info', icon: 'info-circle-fill' },
+  issue: { title: 'Issue', color: 'secondary', icon: 'question-circle-fill' },
 }
 
 const method = {