feat: showModal 支持 editable 配置输入框

package.json

@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.14.7",
-    "@dcloudio/types": "2.5.9",
+    "@dcloudio/types": "2.5.10",
     "@jest/types": "^27.0.2",
     "@microsoft/api-extractor": "^7.13.2",
     "@rollup/plugin-alias": "^3.1.1",

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -10,79 +10,79 @@ const __uniRoutes = instanceContext.__uniRoutes;
 var serviceContext = (function (vue) {
   'use strict';
 
-  /*
-   * base64-arraybuffer
-   * https://github.com/niklasvh/base64-arraybuffer
-   *
-   * Copyright (c) 2012 Niklas von Hertzen
-   * Licensed under the MIT license.
-   */
-
-  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-
-  // Use a lookup table to find the index.
-  var lookup = /*#__PURE__*/ (function () {
-    const lookup = new Uint8Array(256);
-    for (var i = 0; i < chars.length; i++) {
-      lookup[chars.charCodeAt(i)] = i;
-    }
-    return lookup
-  })();
-
-  function encode$3(arraybuffer) {
-    var bytes = new Uint8Array(arraybuffer),
-      i,
-      len = bytes.length,
-      base64 = '';
-
-    for (i = 0; i < len; i += 3) {
-      base64 += chars[bytes[i] >> 2];
-      base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
-      base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
-      base64 += chars[bytes[i + 2] & 63];
-    }
-
-    if (len % 3 === 2) {
-      base64 = base64.substring(0, base64.length - 1) + '=';
-    } else if (len % 3 === 1) {
-      base64 = base64.substring(0, base64.length - 2) + '==';
-    }
-
-    return base64
-  }
-
-  function decode$1(base64) {
-    var bufferLength = base64.length * 0.75,
-      len = base64.length,
-      i,
-      p = 0,
-      encoded1,
-      encoded2,
-      encoded3,
-      encoded4;
-
-    if (base64[base64.length - 1] === '=') {
-      bufferLength--;
-      if (base64[base64.length - 2] === '=') {
-        bufferLength--;
-      }
-    }
-
-    var arraybuffer = new ArrayBuffer(bufferLength),
-      bytes = new Uint8Array(arraybuffer);
-
-    for (i = 0; i < len; i += 4) {
-      encoded1 = lookup[base64.charCodeAt(i)];
-      encoded2 = lookup[base64.charCodeAt(i + 1)];
-      encoded3 = lookup[base64.charCodeAt(i + 2)];
-      encoded4 = lookup[base64.charCodeAt(i + 3)];
-
-      bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
-      bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
-      bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
-    }
-
-    return arraybuffer
+  /*
+   * base64-arraybuffer
+   * https://github.com/niklasvh/base64-arraybuffer
+   *
+   * Copyright (c) 2012 Niklas von Hertzen
+   * Licensed under the MIT license.
+   */
+
+  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+  // Use a lookup table to find the index.
+  var lookup = /*#__PURE__*/ (function () {
+    const lookup = new Uint8Array(256);
+    for (var i = 0; i < chars.length; i++) {
+      lookup[chars.charCodeAt(i)] = i;
+    }
+    return lookup
+  })();
+
+  function encode$3(arraybuffer) {
+    var bytes = new Uint8Array(arraybuffer),
+      i,
+      len = bytes.length,
+      base64 = '';
+
+    for (i = 0; i < len; i += 3) {
+      base64 += chars[bytes[i] >> 2];
+      base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
+      base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
+      base64 += chars[bytes[i + 2] & 63];
+    }
+
+    if (len % 3 === 2) {
+      base64 = base64.substring(0, base64.length - 1) + '=';
+    } else if (len % 3 === 1) {
+      base64 = base64.substring(0, base64.length - 2) + '==';
+    }
+
+    return base64
+  }
+
+  function decode$1(base64) {
+    var bufferLength = base64.length * 0.75,
+      len = base64.length,
+      i,
+      p = 0,
+      encoded1,
+      encoded2,
+      encoded3,
+      encoded4;
+
+    if (base64[base64.length - 1] === '=') {
+      bufferLength--;
+      if (base64[base64.length - 2] === '=') {
+        bufferLength--;
+      }
+    }
+
+    var arraybuffer = new ArrayBuffer(bufferLength),
+      bytes = new Uint8Array(arraybuffer);
+
+    for (i = 0; i < len; i += 4) {
+      encoded1 = lookup[base64.charCodeAt(i)];
+      encoded2 = lookup[base64.charCodeAt(i + 1)];
+      encoded3 = lookup[base64.charCodeAt(i + 2)];
+      encoded4 = lookup[base64.charCodeAt(i + 3)];
+
+      bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
+      bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
+      bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
+    }
+
+    return arraybuffer
   }
 
   /**
@@ -9058,22 +9058,29 @@ var serviceContext = (function (vue) {
       return resolve();
   }, OpenLocationProtocol, OpenLocationOptions);
 
-  const showModal = defineAsyncApi(API_SHOW_MODAL, ({ title = '', content = '', showCancel = true, cancelText, cancelColor, confirmText, confirmColor, } = {}, { resolve }) => {
+  const showModal = defineAsyncApi(API_SHOW_MODAL, ({ title = '', content = '', showCancel = true, cancelText, cancelColor, confirmText, confirmColor, editable = false, placeholderText = '', } = {}, { resolve }) => {
+      const buttons = showCancel ? [cancelText, confirmText] : [confirmText];
+      const tip = editable ? placeholderText : buttons;
       content = content || ' ';
-      plus.nativeUI.confirm(content, (e) => {
+      plus.nativeUI[editable ? 'prompt' : 'confirm'](content, (e) => {
           if (showCancel) {
-              resolve({
-                  confirm: e.index === 1,
+              const isConfirm = e.index === 1;
+              const res = {
+                  confirm: isConfirm,
                   cancel: e.index === 0 || e.index === -1,
-              });
+              };
+              isConfirm && editable && (res.content = e.value);
+              resolve(res);
           }
           else {
-              resolve({
+              const res = {
                   confirm: e.index === 0,
                   cancel: false,
-              });
+              };
+              editable && (res.content = e.value);
+              resolve(res);
           }
-      }, title, showCancel ? [cancelText, confirmText] : [confirmText]);
+      }, title, tip, buttons);
   }, ShowModalProtocol, ShowModalOptions);
 
   const showActionSheet = defineAsyncApi(API_SHOW_ACTION_SHEET, ({ itemList = [], itemColor = '#000000', title = '', alertText = '', popover, }, { resolve, reject }) => {

packages/uni-app-plus/src/service/api/ui/popup/showModal.ts

@@ -17,27 +17,37 @@ export const showModal = defineAsyncApi<API_TYPE_SHOW_MODAL>(
       cancelColor,
       confirmText,
       confirmColor,
+      editable = false,
+      placeholderText = '',
     } = {},
     { resolve }
   ) => {
+    const buttons = showCancel ? [cancelText, confirmText] : [confirmText]
+    const tip = editable ? placeholderText : buttons
     content = content || ' '
-    plus.nativeUI.confirm(
+    plus.nativeUI[editable ? 'prompt' : 'confirm'](
       content,
       (e) => {
         if (showCancel) {
-          resolve({
-            confirm: e.index === 1,
+          const isConfirm = e.index === 1
+          const res: UniApp.ShowModalRes = {
+            confirm: isConfirm,
             cancel: e.index === 0 || e.index === -1,
-          })
+          }
+          isConfirm && editable && (res.content = e.value)
+          resolve(res)
         } else {
-          resolve({
+          const res: UniApp.ShowModalRes = {
             confirm: e.index === 0,
             cancel: false,
-          })
+          }
+          editable && (res.content = e.value)
+          resolve(res)
         }
       },
-      title as PlusNativeUIConfirmStyles,
-      showCancel ? [cancelText!, confirmText!] : [confirmText!]
+      title,
+      <string & string[]>tip,
+      <string[]>buttons
     )
   },
   ShowModalProtocol,

packages/uni-h5/dist/uni-h5.es.js

@@ -17910,6 +17910,14 @@ const props$5 = {
   },
   visible: {
     type: Boolean
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  placeholderText: {
+    type: String,
+    default: ""
   }
 };
 var modal = /* @__PURE__ */ defineComponent({
@@ -17917,12 +17925,15 @@ var modal = /* @__PURE__ */ defineComponent({
   setup(props2, {
     emit: emit2
   }) {
+    const editContent = ref("");
     const close = () => visible.value = false;
     const cancel = () => (close(), emit2("close", "cancel"));
-    const confirm = () => (close(), emit2("close", "confirm"));
+    const confirm = () => (close(), emit2("close", "confirm", editContent.value));
     const visible = usePopup(props2, {
       onEsc: cancel,
-      onEnter: confirm
+      onEnter: () => {
+        !props2.editable && confirm();
+      }
     });
     return () => {
       const {
@@ -17930,8 +17941,11 @@ var modal = /* @__PURE__ */ defineComponent({
         content,
         showCancel,
         confirmText,
-        confirmColor
+        confirmColor,
+        editable,
+        placeholderText
       } = props2;
+      editContent.value = content;
       return createVNode(Transition, {
         "name": "uni-fade"
       }, {
@@ -17944,7 +17958,13 @@ var modal = /* @__PURE__ */ defineComponent({
         }, [createVNode("strong", {
           "class": "uni-modal__title",
           "textContent": title
-        }, null, 8, ["textContent"])]), createVNode("div", {
+        }, null, 8, ["textContent"])]), editable ? createVNode("textarea", {
+          "class": "uni-modal__textarea",
+          "rows": "1",
+          "placeholder": placeholderText,
+          "value": content,
+          "onInput": (e2) => editContent.value = e2.target.value
+        }, null, 40, ["placeholder", "value", "onInput"]) : createVNode("div", {
           "class": "uni-modal__bd",
           "onTouchmovePassive": onEventStop,
           "textContent": content
@@ -17972,11 +17992,14 @@ const onHidePopupOnce$1 = /* @__PURE__ */ once(() => {
   UniServiceJSBridge.on("onHidePopup", () => showModalState.visible = false);
 });
 let currentShowModalResolve;
-function onModalClose(type) {
-  currentShowModalResolve && currentShowModalResolve({
-    confirm: type === "confirm",
+function onModalClose(type, content) {
+  const isConfirm = type === "confirm";
+  const res = {
+    confirm: isConfirm,
     cancel: type === "cancel"
-  });
+  };
+  isConfirm && showModalState.editable && (res.content = content);
+  currentShowModalResolve && currentShowModalResolve(res);
 }
 const showModal = /* @__PURE__ */ defineAsyncApi(API_SHOW_MODAL, (args, { resolve }) => {
   onHidePopupOnce$1();

packages/uni-h5/src/service/api/ui/popup/modal.tsx

 import { onEventPrevent, onEventStop } from '@dcloudio/uni-core'
-import { Transition, defineComponent, ExtractPropTypes } from 'vue'
+import { Transition, defineComponent, ExtractPropTypes, ref } from 'vue'
 import { usePopup, VNODE_MASK } from './utils'
 
 const props = {
@@ -34,21 +34,41 @@ const props = {
   visible: {
     type: Boolean,
   },
+  editable: {
+    type: Boolean,
+    default: false,
+  },
+  placeholderText: {
+    type: String,
+    default: '',
+  },
 }
 export type ModalProps = ExtractPropTypes<typeof props>
 
 export default /*#__PURE__*/ defineComponent({
   props,
   setup(props, { emit }) {
+    const editContent = ref('')
     const close = () => (visible.value = false)
     const cancel = () => (close(), emit('close', 'cancel'))
-    const confirm = () => (close(), emit('close', 'confirm'))
+    const confirm = () => (close(), emit('close', 'confirm', editContent.value))
     const visible = usePopup(props, {
       onEsc: cancel,
-      onEnter: confirm,
+      onEnter: () => {
+        !props.editable && confirm()
+      },
     })
     return () => {
-      const { title, content, showCancel, confirmText, confirmColor } = props
+      const {
+        title,
+        content,
+        showCancel,
+        confirmText,
+        confirmColor,
+        editable,
+        placeholderText,
+      } = props
+      editContent.value = content
       // TODO vue3 似乎有bug，不指定passive时，应该默认加上passive:false，否则浏览器会报警告，先看看vue3 会不会修复，若不修复，可以考虑手动addEventListener
       return (
         <Transition name="uni-fade">
@@ -60,12 +80,24 @@ export default /*#__PURE__*/ defineComponent({
                   <strong class="uni-modal__title" v-text={title}></strong>
                 </div>
               )}
-              <div
-                class="uni-modal__bd"
-                // @ts-ignore
-                onTouchmovePassive={onEventStop}
-                v-text={content}
-              ></div>
+              {editable ? (
+                <textarea
+                  class="uni-modal__textarea"
+                  rows="1"
+                  placeholder={placeholderText}
+                  value={content}
+                  onInput={(e: Event) =>
+                    (editContent.value = (e.target! as any).value)
+                  }
+                />
+              ) : (
+                <div
+                  class="uni-modal__bd"
+                  // @ts-ignore
+                  onTouchmovePassive={onEventStop}
+                  v-text={content}
+                ></div>
+              )}
               <div class="uni-modal__ft">
                 {showCancel && (
                   <div

packages/uni-h5/src/service/api/ui/popup/showModal.ts

@@ -21,12 +21,14 @@ const onHidePopupOnce = /*#__PURE__*/ once(() => {
 
 let currentShowModalResolve: UniApp.ShowModalOptions['success']
 
-function onModalClose(type: 'cancel' | 'confirm') {
-  currentShowModalResolve &&
-    currentShowModalResolve!({
-      confirm: type === 'confirm',
-      cancel: type === 'cancel',
-    })
+function onModalClose(type: 'cancel' | 'confirm', content: string) {
+  const isConfirm = type === 'confirm'
+  const res: UniApp.ShowModalRes = {
+    confirm: isConfirm,
+    cancel: type === 'cancel',
+  }
+  isConfirm && showModalState.editable && (res.content = content)
+  currentShowModalResolve && currentShowModalResolve!(res)
 }
 
 export const showModal = defineAsyncApi<API_TYPE_SHOW_MODAL>(

packages/uni-h5/style/api/modal.css

@@ -58,6 +58,19 @@ uni-modal {
   overflow-y: auto;
 }
 
+.uni-modal__textarea {
+  resize: none;
+  border: 0;
+  margin: 0;
+  width: 90%;
+  padding: 10px;
+  font-size: 20px;
+  outline: none;
+  border: none;
+  background-color: #eee;
+  text-decoration: inherit;
+}
+
 .uni-modal__ft {
   position: relative;
   line-height: 48px;

yarn.lock

@@ -922,10 +922,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@dcloudio/types@2.5.9":
-  version "2.5.9"
-  resolved "https://registry.yarnpkg.com/@dcloudio/types/-/types-2.5.9.tgz#06365a3406b02006c76870474314e5c20f24137e"
-  integrity sha512-dLyZChtY7oZ+34MgWBCU/qAJufszn1XvVN9GXL5Yk2wk/s3vl4kbrB2YDG0pVCUn7cDPmmyRoknp38x/vSAKpQ==
+"@dcloudio/types@2.5.10":
+  version "2.5.10"
+  resolved "https://registry.yarnpkg.com/@dcloudio/types/-/types-2.5.10.tgz#fb5ced15061dabcb3410efafeee188576dd3f20b"
+  integrity sha512-wrZVZIsF9xmOCKVZjXhtv8PBRcOahZVuNhfyf3xKhqs4zj6pHwegAzxIPTFvLNtUxKqEpG9azVPcfFZCOGIjYA==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"