feat(confirm): change icon postion to title

demo/components/confirmDemo/async.demo.vue

@@ -31,6 +31,9 @@ export default {
       const confirmInstance = this.$NModal.confirm({
         title: 'Confirm',
         content: 'Are u sure to ...?',
+        okText: 'Yes', // 自定义ok按钮文字 error和success也可以使用
+        cancelText: 'No', // 自定义取消按钮文字
+
         onOk: () => {
           console.log('click on ok', confirmInstance)
           this.$NMessage.info('will be ok in 3 seconds')

packages/common/Confirm/src/confirm.vue

@@ -8,6 +8,12 @@
       <!-- <slot name="title"> -->
       <div class="n-confirm__title">
         <span class="n-confirm__title__text">
+          <n-icon
+            class="n-confirm__content__icon"
+            :type="iconType.type"
+            size="28"
+            :color="iconType.color"
+          />
           {{ title }}
         </span>
 
@@ -21,12 +27,6 @@
       <!-- </slot> -->
       <!-- <slot> -->
       <div class="n-confirm__content">
-        <n-icon
-          class="n-confirm__content__icon"
-          :type="iconType.type"
-          size="28"
-          :color="iconType.color"
-        />
         <div
           class="n-confirm__content__text"
           v-html="content"
@@ -53,7 +53,7 @@
           auto-text-color
           @click="handleOk"
         >
-          {{ loading === true ? "loading" : okText }}
+          {{ loading === true ? "Loading" : okText }}
         </n-button>
       </div>
       <!-- </slot> -->

styles/Confirm.scss

@@ -38,9 +38,10 @@
     margin-left: 12px;
   }
   .n-confirm__content__icon {
-    position: absolute;
+    // position: absolute;
     vertical-align: middle;
-    left: 0;
+    margin-right: 8px;
+    // left: 0;
     /* top: 50%;
     transform: translateY(-50%); */
   }