fix(App): element support $getComponentDescriptor

src/core/view/plugins/index.js

@@ -61,18 +61,18 @@ export default {
     Vue.prototype.$handleWxsEvent = function ($event) {
       if ($event instanceof Event) { // 未处理的 event 对象 需要对 target 校正及包装
         const currentTarget = $event.currentTarget
-        const instance = currentTarget &&
-          currentTarget.__vue__ &&
-          currentTarget.__vue__.$getComponentDescriptor(currentTarget.__vue__, false)
+        // vue component / web component
+        const component = currentTarget && (currentTarget.__vue__ || currentTarget)
+        const instance = currentTarget && component.$getComponentDescriptor && component.$getComponentDescriptor(component, false)
         const $origEvent = $event
         $event = processEvent.call(this, $origEvent.type, $origEvent, {}, findUniTarget($origEvent, this.$el) || $origEvent.target,
           $origEvent.currentTarget)
-        $event.instance = instance
-        $event.preventDefault = function () {
-          return $origEvent.preventDefault()
-        }
-        $event.stopPropagation = function () {
-          return $origEvent.stopPropagation()
+        $event.instance = instance
+        $event.preventDefault = function () {
+          return $origEvent.preventDefault()
+        }
+        $event.stopPropagation = function () {
+          return $origEvent.stopPropagation()
         }
       }
       return $event

src/core/view/plugins/wxs/component-descriptor.js

@@ -28,7 +28,7 @@ function getWxsClsArr (clsArr, classList, isAdd) {
   return wxsClsArr
 }
 
-function parseStyleText (cssText) {
+export function parseStyleText (cssText) {
   const res = {}
   const listDelimiter = /;(?![^(]*\))/g
   const propertyDelimiter = /:(.+)/
@@ -41,7 +41,7 @@ function parseStyleText (cssText) {
   return res
 }
 
-class ComponentDescriptor {
+export class ComponentDescriptor {
   constructor (vm) {
     this.$vm = vm
     Object.defineProperty(this, '$el', {
@@ -56,7 +56,9 @@ class ComponentDescriptor {
       return
     }
     const el = this.$el.querySelector(selector)
-    return el && el.__vue__ && createComponentDescriptor(el.__vue__, false)
+    // vue component / web component
+    const component = el.__vue__ || el
+    return component.$getComponentDescriptor && component.$getComponentDescriptor(component, false)
   }
 
   selectAllComponents (selector) {
@@ -67,7 +69,9 @@ class ComponentDescriptor {
     const els = this.$el.querySelectorAll(selector)
     for (let i = 0; i < els.length; i++) {
       const el = els[i]
-      el.__vue__ && descriptors.push(createComponentDescriptor(el.__vue__, false))
+      // vue component / web component
+      const component = el.__vue__ || el
+      component.$getComponentDescriptor && descriptors.push(component.$getComponentDescriptor(component, false))
     }
     return descriptors
   }

src/platforms/app-plus/view/elements/element.js

 import {
-  camelize
+  camelize,
+  isPlainObject
 } from 'uni-shared'
+import {
+  ComponentDescriptor as ComponentDescriptorClass,
+  parseStyleText
+} from 'uni-core/view/plugins/wxs/component-descriptor'
+
+// upx,rpx 正则匹配
+const unitRE = /\b([+-]?\d+(\.\d+)?)[r|u]px\b/g
+
+const transformUnit = (val) => {
+  if (typeof val === 'string') {
+    return val.replace(unitRE, (a, b) => {
+      /* eslint-disable no-undef */
+      return uni.upx2px(b) + 'px'
+    })
+  }
+  return val
+}
+
+class ComponentDescriptor extends ComponentDescriptorClass {
+  setStyle (style) {
+    if (!this.$el || !style) {
+      return this
+    }
+    if (typeof style === 'string') {
+      style = parseStyleText(style)
+    }
+    if (isPlainObject(style)) {
+      for (const key in style) {
+        this.$el.style[key] = transformUnit(style[key])
+      }
+    }
+    return this
+  }
+
+  addClass (...clsArr) {
+    if (!this.$el || !clsArr.length) {
+      return this
+    }
+    this.$el.classList.add(...clsArr)
+    return this
+  }
+
+  removeClass (...clsArr) {
+    if (!this.$el || !clsArr.length) {
+      return this
+    }
+    this.$el.classList.remove(...clsArr)
+    return this
+  }
+
+  callMethod () {
+
+  }
+
+  triggerEvent () {
+
+  }
+}
 
 function formatKey (key) {
   return camelize(key.substring(5))
@@ -21,4 +80,13 @@ export default class UniElement extends HTMLElement {
     }
     super.removeAttribute(key)
   }
+
+  $getComponentDescriptor () {
+    if (!('__wxsComponentDescriptor' in this)) {
+      this.__wxsComponentDescriptor = new ComponentDescriptor({
+        $el: this
+      })
+    }
+    return this.__wxsComponentDescriptor
+  }
 }