uni-oaview 1.9.2 → 1.9.3

package/components/oa-confirm-new/oa-confirm-new.vue

@@ -5,9 +5,13 @@
       <p class="subtitle">{{ state.subtitle }}</p>
       <view class="divider" />
       <view class="submit-buttons">
-        <view class="cancel-button" @click="submitClick('cancel')">{{ state.cancelText }}</view>
+        <view class="cancel-button" :style="{ color: state.cancelTextColor }" @click="submitClick('cancel')">
+          {{ state.cancelText }}
+        </view>
         <view class="divider-vertical" />
-        <view class="confirm-button" @click="submitClick('confirm')">{{ state.confirmText }}</view>
+        <view class="confirm-button" :style="{ color: state.confirmTextColor }" @click="submitClick('confirm')">
+          {{ state.confirmText }}
+        </view>
       </view>
     </view>
   </uni-popup>
@@ -27,6 +31,8 @@
     subtitle: '',
     confirmText: '确定',
     cancelText: '取消',
+    confirmTextColor: '#3d73ff',
+    cancelTextColor: '#1c202b',
   });
 
   let innerCallback: any = null;
@@ -48,12 +54,14 @@
     if (!isPageAlive.value) return;
     isShow.value = true;
     setTimeout(() => {
-      const { title, subtitle, confirmText, cancelText, callback } = params;
+      const { title, subtitle, confirmText, cancelText, confirmTextColor, cancelTextColor, callback } = params;
       innerCallback = callback;
       state.title = title || '';
       state.subtitle = subtitle || '';
       state.confirmText = confirmText || '确定';
       state.cancelText = cancelText || '取消';
+      state.confirmTextColor = confirmTextColor || '#3d73ff';
+      state.cancelTextColor = cancelTextColor || '#1c202b';
       popupRef.value?.open('center');
     });
   });

package/dist/index.d.ts

@@ -192,6 +192,27 @@ declare function createModal<E extends ModalBaseEvents = ModalBaseEvents>(compon
  */
 declare function closeAllModals(): void;
 
+/**
+ * 新版确认弹窗的按钮配置。
+ */
+interface MessageBoxConfirmOptions {
+    /**
+     * 确认按钮的展示文案。
+     */
+    confirmText?: string;
+    /**
+     * 取消按钮的展示文案。
+     */
+    cancelText?: string;
+    /**
+     * 确认按钮文案颜色，未传时使用组件默认颜色。
+     */
+    confirmTextColor?: string;
+    /**
+     * 取消按钮文案颜色，未传时使用组件默认颜色。
+     */
+    cancelTextColor?: string;
+}
 /**
  * 新版确认弹窗（按Figma设计）
  *
@@ -205,6 +226,12 @@ declare function closeAllModals(): void;
  * import { MessageBox } from '@/uni-oaview/src/utils/message-box'
  *
  * MessageBox.confirm('删除音频', '删除后将不可恢复', '删除', '取消')
+ * MessageBox.confirm('删除音频', '删除后将不可恢复', {
+ *   confirmText: '删除',
+ *   confirmTextColor: '#ff4d4f',
+ *   cancelText: '再想想',
+ *   cancelTextColor: '#86909c',
+ * })
  *   .then(() => {
  *     console.log('用户点击了确定')
  *   })
@@ -218,11 +245,11 @@ declare const MessageBox: {
      * 新版确认弹窗
      * @param title 标题
      * @param subtitle 副标题
-     * @param confirmText 确定按钮文本，默认'确定'
+     * @param confirmTextOrOptions 确定按钮文本，或按钮配置
      * @param cancelText 取消按钮文本，默认'取消'
      * @returns Promise<string> 确定时resolve，取消时reject
      */
-    confirm(title: string, subtitle: string, confirmText?: string, cancelText?: string): Promise<unknown>;
+    confirm(title: string, subtitle: string, confirmTextOrOptions?: string | MessageBoxConfirmOptions, cancelText?: string): Promise<unknown>;
 };
 
 /**

package/dist/index.esm.js

@@ -823,6 +823,14 @@ function closeAllModals() {
   });
 }
 
+/**
+ * 判断传入值是否为新版确认弹窗配置对象。
+ *
+ * 这里仅接受普通对象，避免把异常 truthy 值误判为配置对象。
+ */
+var isConfirmOptions = function isConfirmOptions(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+};
 /**
  * 新版确认弹窗（按Figma设计）
  *
@@ -836,6 +844,12 @@ function closeAllModals() {
  * import { MessageBox } from '@/uni-oaview/src/utils/message-box'
  *
  * MessageBox.confirm('删除音频', '删除后将不可恢复', '删除', '取消')
+ * MessageBox.confirm('删除音频', '删除后将不可恢复', {
+ *   confirmText: '删除',
+ *   confirmTextColor: '#ff4d4f',
+ *   cancelText: '再想想',
+ *   cancelTextColor: '#86909c',
+ * })
  *   .then(() => {
  *     console.log('用户点击了确定')
  *   })
@@ -849,12 +863,22 @@ var MessageBox = {
    * 新版确认弹窗
    * @param title 标题
    * @param subtitle 副标题
-   * @param confirmText 确定按钮文本，默认'确定'
+   * @param confirmTextOrOptions 确定按钮文本，或按钮配置
    * @param cancelText 取消按钮文本，默认'取消'
    * @returns Promise<string> 确定时resolve，取消时reject
    */
-  confirm: function confirm(title, subtitle, confirmText, cancelText) {
+  confirm: function confirm(title, subtitle, confirmTextOrOptions, cancelText) {
     return new Promise(function (res, rej) {
+      /**
+       * 统一兼容旧版字符串参数和新版对象参数，减少调用方迁移成本。
+       */
+      var options = typeof confirmTextOrOptions === 'string' ? {
+        confirmText: confirmTextOrOptions,
+        cancelText: cancelText
+      } : isConfirmOptions(confirmTextOrOptions) ? confirmTextOrOptions : {};
+      /**
+       * 弹框关闭后通过回调通知调用方点击结果。
+       */
       var callback = function callback(type) {
         if (type === 'confirm') {
           res('');
@@ -865,8 +889,10 @@ var MessageBox = {
       uni.$emit(OPEN_CONFIRM_BOX_NEW, {
         title: title,
         subtitle: subtitle,
-        confirmText: confirmText,
-        cancelText: cancelText,
+        confirmText: options.confirmText,
+        cancelText: options.cancelText,
+        confirmTextColor: options.confirmTextColor,
+        cancelTextColor: options.cancelTextColor,
         callback: callback
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-oaview",
-  "version": "1.9.02",
+  "version": "1.9.03",
   "description": "uniapp小程序组件库",
   "main": "dist/index.esm.js",
   "typings": "dist/index.d.ts",

package/src/utils/message-box.ts

@@ -1,5 +1,39 @@
 import { OPEN_CONFIRM_BOX_NEW } from '../../constants';
 
+/**
+ * 新版确认弹窗的按钮配置。
+ */
+interface MessageBoxConfirmOptions {
+  /**
+   * 确认按钮的展示文案。
+   */
+  confirmText?: string;
+
+  /**
+   * 取消按钮的展示文案。
+   */
+  cancelText?: string;
+
+  /**
+   * 确认按钮文案颜色，未传时使用组件默认颜色。
+   */
+  confirmTextColor?: string;
+
+  /**
+   * 取消按钮文案颜色，未传时使用组件默认颜色。
+   */
+  cancelTextColor?: string;
+}
+
+/**
+ * 判断传入值是否为新版确认弹窗配置对象。
+ *
+ * 这里仅接受普通对象，避免把异常 truthy 值误判为配置对象。
+ */
+const isConfirmOptions = (value: unknown): value is MessageBoxConfirmOptions => {
+  return Object.prototype.toString.call(value) === '[object Object]';
+};
+
 /**
  * 新版确认弹窗（按Figma设计）
  *
@@ -13,6 +47,12 @@ import { OPEN_CONFIRM_BOX_NEW } from '../../constants';
  * import { MessageBox } from '@/uni-oaview/src/utils/message-box'
  *
  * MessageBox.confirm('删除音频', '删除后将不可恢复', '删除', '取消')
+ * MessageBox.confirm('删除音频', '删除后将不可恢复', {
+ *   confirmText: '删除',
+ *   confirmTextColor: '#ff4d4f',
+ *   cancelText: '再想想',
+ *   cancelTextColor: '#86909c',
+ * })
  *   .then(() => {
  *     console.log('用户点击了确定')
  *   })
@@ -26,12 +66,33 @@ export const MessageBox = {
    * 新版确认弹窗
    * @param title 标题
    * @param subtitle 副标题
-   * @param confirmText 确定按钮文本，默认'确定'
+   * @param confirmTextOrOptions 确定按钮文本，或按钮配置
    * @param cancelText 取消按钮文本，默认'取消'
    * @returns Promise<string> 确定时resolve，取消时reject
    */
-  confirm(title: string, subtitle: string, confirmText?: string, cancelText?: string) {
+  confirm(
+    title: string,
+    subtitle: string,
+    confirmTextOrOptions?: string | MessageBoxConfirmOptions,
+    cancelText?: string,
+  ) {
     return new Promise((res, rej) => {
+      /**
+       * 统一兼容旧版字符串参数和新版对象参数，减少调用方迁移成本。
+       */
+      const options: MessageBoxConfirmOptions =
+        typeof confirmTextOrOptions === 'string'
+          ? {
+              confirmText: confirmTextOrOptions,
+              cancelText,
+            }
+          : isConfirmOptions(confirmTextOrOptions)
+          ? confirmTextOrOptions
+          : {};
+
+      /**
+       * 弹框关闭后通过回调通知调用方点击结果。
+       */
       const callback = (type: 'confirm' | 'cancel') => {
         if (type === 'confirm') {
           res('');
@@ -42,8 +103,10 @@ export const MessageBox = {
       uni.$emit(OPEN_CONFIRM_BOX_NEW, {
         title,
         subtitle,
-        confirmText,
-        cancelText,
+        confirmText: options.confirmText,
+        cancelText: options.cancelText,
+        confirmTextColor: options.confirmTextColor,
+        cancelTextColor: options.cancelTextColor,
         callback,
       });
     });