@mpxjs/webpack-plugin 2.8.25-alpha.13 → 2.8.25-alpha.15

package/lib/runtime/components/tenon/getInnerListeners.js

@@ -61,9 +61,9 @@ function createTouch (context, hasLongTap, __mpxTapInfo) {
   })
 }
 
-function processOriginEvent (listeners) {
+function processOriginEvent (listeners, context, _input) {
   // 给event添加_originEvent属性
-  const ignoreEvents = ['onTap', 'onFocus', 'onChange', 'onBlur', 'onConfirm']
+  const ignoreEvents = ['onTap', 'onFocus', 'onChange', 'onBlur', 'onConfirm', 'onInput']
   Object.keys(listeners).forEach((key) => {
     if (!ignoreEvents.includes(key)) {
       const listener = listeners[key]
@@ -75,14 +75,32 @@ function processOriginEvent (listeners) {
       }
     }
   })
+
+  // 处理input输入框事件
+  if (listeners.onInput && _input) {
+    delete listeners.onInput
+    listeners.onInput = function (e) {
+      let _type
+      const { state } = e || {}
+      if (state === 1) {
+        _type = 'focus'
+      } else if (state === 2) {
+        _type = 'focus'
+      } else if (state === 3) {
+        _type = 'blur'
+      } else {
+        _type = 'confirm'
+      }
+      context.$emit(_type, { ...e, detail: e })
+    }
+  }
 }
 
-function processModel (listeners, context) {
+function processModel (listeners, context, _input = false) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
   // 该函数必须在产生merge前执行
   // todo 此处对于$attrs的访问会导致父组件更新时子组件必然更新，暂时用短路效应避免影响，待优化
   // todo 访问$listeners也会导致上述现象，但是为了事件代理还必须访问$listeners，待后续思考处理
-
   const modelEvent = context.$attrs.mpxModelEvent
   const modelEventId = context.$attrs.mpxModelEventId
   if (modelEvent && modelEventId) {
@@ -278,11 +296,13 @@ export default function getInnerListeners (context, options = {}) {
     mergeBefore = {},
     mergeAfter = {},
     defaultListeners = [],
-    ignoredListeners = []
+    ignoredListeners = [],
+    _input = false
   } = options
   const __mpxTapInfo = {}
   // 从attrs里面拿到以on开头的所有绑定的事件
   const listeners = Object.assign({}, getListeners(context))
+
   defaultListeners.forEach((key) => {
     if (!listeners[key]) listeners[key] = noop
   })
@@ -302,8 +322,8 @@ export default function getInnerListeners (context, options = {}) {
     mergeAfterOptions.force = mergeAfter.force
     mergeAfter = mergeAfter.listeners
   }
-  processOriginEvent(listeners)
-  processModel(listeners, context)
+  processOriginEvent(listeners, context, _input)
+  processModel(listeners, context, _input)
   processTouchAndLtap(listeners, context, __mpxTapInfo)
   mergeListeners(listeners, mergeBefore, mergeBeforeOptions, context, __mpxTapInfo)
   mergeListeners(listeners, mergeAfter, mergeAfterOptions, context, __mpxTapInfo)

package/lib/runtime/components/tenon/tenon-input.vue

@@ -37,15 +37,76 @@ export default {
       type: Number,
       default: -1,
     },
+    style: {
+      type: String,
+      default: '',
+    },
+    placeholderStyle: {
+      type: String,
+      default: '',
+    },
+    confirmType: {
+      type: String,
+      default: 'done',
+    }
   },
   computed: {
     originRef() {
       return this.$refs["mpx-input"]
-    }
+    },
+    computedStyle() {
+      let _inputWrapStyleObj = {
+        "font-size": "33hm",
+        height: "80hm",
+        "line-height": "80hm",
+        color: "#000000",
+        border: "1hm solid #999999",
+        "border-radius": "8hm",
+        "text-align": "left",
+        "background-color": "#ffffff"
+      };
+
+      if (typeof this.style !== 'string') {
+        console.warn('Runtime warning: PROPS style must be string')
+      }
+
+      let _styleObj = {};
+
+      if (typeof this.style === 'string') {
+        let _style = this.style;
+
+        if (_style[_style.length - 1] !== ";") {
+          _style += ";";
+        }
+
+        _style.split(";").map(item => {
+          if (item) {
+            let itemArray = item.split(":");
+            _styleObj[itemArray[0]] = itemArray[1];
+          }
+        });
+      }
+      
+      //HACK: tenon会存在读到this.style为封装标签的样式 @曹恩泽
+      if (typeof this.style === 'object') {
+        _styleObj = Object.assign({}, _styleObj, this.style)
+      }
+
+      let styleObj = Object.assign({}, _inputWrapStyleObj, _styleObj);
+      let style = Object.keys(styleObj)
+        .map(k => `${k}:${styleObj[k]}`)
+        .join(";");
+
+      //Tenon变更placeholderColor
+      const regex = /color/i
+      style += this.placeholderStyle.replace(regex, 'placeholderColor');
+      return style;
+    },
   },
   watch: {
-    value: function(newVal, oldVal) {
-      if(this.originRef && newVal !== this.originRef.value){
+    value: function (newVal, oldVal) {
+      console.log(newVal)
+      if (this.originRef && newVal !== this.originRef.value) {
         this.originRef.value = newVal;
       }
     }
@@ -62,6 +123,9 @@ export default {
         case "number":
           inputType = "number";
           break;
+        case "tel":
+          inputType = "tel";
+          break;
         default:
           inputType = "text";
       }
@@ -69,13 +133,15 @@ export default {
 
     const data = {
       class: "mpx-input",
-      focus: this.focus,
+      focused: this.focus,
       ref: "mpx-input",
       placeholder: this.placeholder,
-      maxLength: this.maxLength,
+      maxLength: this.maxlength,
       type: inputType,
       disabled: this.disabled,
-      ...getInnerListeners(this),
+      style: this.computedStyle,
+      returnKeyType: this.confirmType,
+      ...getInnerListeners(this, { _input: true }),
     };
     return h("input", data, []);
   },

package/lib/runtime/components/tenon/tenon-textarea.vue

@@ -31,6 +31,14 @@ export default {
       type: Number,
       default: -1,
     },
+    placeholderStyle: {
+      type: String,
+      default: '',
+    },
+    confirmType: {
+      type: String,
+      default: 'return',
+    }
   },
   computed: {
     originRef() {
@@ -50,9 +58,11 @@ export default {
       class: "mpx-textarea",
       ref: "mpx-textarea",
       focus: this.focus,
+      value: this.value,
       placeholder: this.placeholder,
-      maxLength: this.maxLength,
+      maxLength: this.maxlength,
       disabled: this.disabled,
+      returnKeyType: this.confirmType,
       ...getInnerListeners(this),
     };
     return h("textarea", data);

package/lib/utils/check-core-version-match.js

@@ -4,7 +4,8 @@ const coreVersion = require('@mpxjs/core/package.json').version
 const packageName = require('../../package.json').name
 const packageVersion = require('../../package.json').version
 
-if (packageVersion.slice(0, 3) !== coreVersion.slice(0, 3)) {
+// skip check prerelease version
+if (!/-\w+$/.test(packageVersion) && packageVersion.slice(0, 3) !== coreVersion.slice(0, 3)) {
   const corePath = require.resolve('@mpxjs/core')
   const packagePath = require.resolve('../../package.json')
   throw new Error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.25-alpha.13",
+  "version": "2.8.25-alpha.15",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -85,5 +85,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "4abac47aa595e0bd62d808362c21cc56b3002641"
+  "gitHead": "76f3ab2ed024078afc89c48e9e009426ba866156"
 }