feat: showModal 支持 editable 配置输入框

src/platforms/app-plus/service/api/ui/popup.js

@@ -121,24 +121,35 @@ export function showModal ({
   cancelText,
   cancelColor,
   confirmText,
-  confirmColor
+  confirmColor,
+  editable = false,
+  placeholderText	= ''
 } = {}, callbackId) {
+  // TODO 在 editable 为 true 时，content 应该是输入框中可修改内容。后续找客户端商量。
+  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) {
-      invoke(callbackId, {
+      const isConfirm = e.index === 1
+      const res = {
         errMsg: 'showModal:ok',
-        confirm: e.index === 1,
+        confirm: isConfirm,
         cancel: e.index === 0 || e.index === -1
-      })
+      }
+      isConfirm && editable && (res.content = e.value)
+      invoke(callbackId, res)
     } else {
-      invoke(callbackId, {
+      const res = {
         errMsg: 'showModal:ok',
         confirm: e.index === 0,
         cancel: false
-      })
+      }
+      editable && (res.content = e.value)
+      invoke(callbackId, res)
     }
-  }, title, showCancel ? [cancelText, confirmText] : [confirmText])
+  }, title, tip, buttons)
 }
 export function showActionSheet ({
   itemList = [],

src/platforms/h5/components/app/popup/mixins/modal.js

@@ -21,9 +21,9 @@ export default {
   },
   methods: {
     // 处理 modal close 回调
-    _onModalClose (type) {
+    _onModalClose (res) {
       this.showModal.visible = false
-      isFn(this.onModalCloseCallback) && this.onModalCloseCallback(type)
+      isFn(this.onModalCloseCallback) && this.onModalCloseCallback(res)
     }
   }
-}
+}

src/platforms/h5/components/app/popup/modal.vue

@@ -15,7 +15,16 @@
             v-text="title"
           />
         </div>
+        <textarea
+          v-if="editable"
+          ref="editContent"
+          class="uni-modal__textarea"
+          rows="1"
+          :placeholder="placeholderText"
+          :value="content"
+        />
         <div
+          v-else
           class="uni-modal__bd"
           @touchmove.stop
           v-text="content"
@@ -41,7 +50,7 @@
       <keypress
         :disable="!visible"
         @esc="_close('cancel')"
-        @enter="_close('confirm')"
+        @enter="!editable && _close('confirm')"
       />
     </uni-modal>
   </transition>
@@ -86,11 +95,25 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    placeholderText: {
+      type: String,
+      default: ''
     }
   },
   methods: {
     _close (type) {
-      this.$emit('close', type)
+      const res = {
+        [type]: true
+      }
+      if (this.editable && type === 'confirm') {
+        res.content = this.$refs.editContent.value
+      }
+      this.$emit('close', res)
     }
   }
 }
@@ -156,6 +179,19 @@ export default {
 		overflow-y: auto;
 	}
 
+	uni-modal .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 .uni-modal__ft {
 		position: relative;
 		line-height: 48px;

src/platforms/h5/service/api/ui/popup.js

@@ -4,10 +4,8 @@ const {
 } = UniServiceJSBridge
 
 export function showModal (args, callbackId) {
-  emit('onShowModal', args, function (type) {
-    invoke(callbackId, {
-      [type]: true
-    })
+  emit('onShowModal', args, function (res) {
+    invoke(callbackId, res)
   })
 }
 
@@ -43,4 +41,4 @@ export function showActionSheet (args, callbackId) {
       })
     }
   })
-}
+}