@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

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

@@ -0,0 +1,317 @@
+import { isEmptyObject } from './util'
+
+const tapEvents = [
+  'onTouchstart',
+  'onTouchmove',
+  'onTouchcancel',
+  'onTouchend',
+  'onLongtap'
+]
+
+function createTouch (context, hasLongTap, __mpxTapInfo) {
+  return ({
+    onTouch (e) {
+      // 用touch模拟longtap
+      switch (e.state) {
+        case 1:
+          context.$emit('touchstart', e)
+          __mpxTapInfo.detail = {
+            x: e.position.x,
+            y: e.position.y
+          }
+          __mpxTapInfo.startTimer = null
+
+          if (hasLongTap) {
+            __mpxTapInfo.startTimer = setTimeout(() => {
+              if (hasLongTap) {
+                const re = inheritEvent(
+                  'longtap',
+                  e,
+                  __mpxTapInfo.detail
+                )
+                context.$emit('longtap', re)
+                __mpxTapInfo.startTimer = null
+              }
+            }, 350)
+          }
+
+          break
+        case 2:
+          context.$emit('touchmove', e)
+          const tapDetailInfo = __mpxTapInfo.detail || {}
+          const currentPageX = e.position.x
+          const currentPageY = e.position.y
+          if (
+            Math.abs(currentPageX - tapDetailInfo.x) > 1 ||
+            Math.abs(currentPageY - tapDetailInfo.y) > 1
+          ) {
+            __mpxTapInfo.startTimer &&
+              clearTimeout(__mpxTapInfo.startTimer)
+            __mpxTapInfo.startTimer = null
+          }
+          break
+        case 3:
+          context.$emit('touchend', e)
+          __mpxTapInfo.startTimer &&
+            clearTimeout(__mpxTapInfo.startTimer)
+          __mpxTapInfo.startTimer = null
+          break
+        case 4:
+          context.$emit('touchcancel', e)
+          break
+      }
+    }
+  })
+}
+
+function processOriginEvent (listeners) {
+  // 给event添加_originEvent属性
+  const ignoreEvents = ['onTap', 'onFocus', 'onChange', 'onBlur', 'onConfirm']
+  Object.keys(listeners).forEach((key) => {
+    if (!ignoreEvents.includes(key)) {
+      const listener = listeners[key]
+      listeners[key] = function (e) {
+        if (e) {
+          e._originEvent = { ...e }
+        }
+        listener.call(this, e)
+      }
+    }
+  })
+}
+
+function processModel (listeners, context) {
+  // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
+  // 该函数必须在产生merge前执行
+  // todo 此处对于$attrs的访问会导致父组件更新时子组件必然更新，暂时用短路效应避免影响，待优化
+  // todo 访问$listeners也会导致上述现象，但是为了事件代理还必须访问$listeners，待后续思考处理
+
+  const modelEvent = context.$attrs.mpxModelEvent
+  const modelEventId = context.$attrs.mpxModelEventId
+  if (modelEvent && modelEventId) {
+    // 对于modelEvent，内部获得时间后向外部转发，触发外部listener的同时转发为mpxModel事件
+
+    const listener = listeners['onInput']
+
+    listeners['onInput'] = function (e) {
+      Hummer.notifyCenter.triggerEvent(modelEventId, {
+        detail: e
+      })
+      context.$emit('mpxModel', {
+        detail: e
+      })
+      listener && listener.call(this, e)
+    }
+    // 内部listener不需要mpxModel
+    delete listeners.mpxModel
+  }
+}
+
+function mergeListeners (listeners, otherListeners, options = {}, context, __mpxTapInfo) {
+  if (!otherListeners) {
+    return
+  }
+  // "onTouchstart",
+  // "onTouchmove",
+  // "onTouchcancel",
+  // "onTouchend",
+  // "onLongtap",
+
+  // 都依赖touch事件 如果listener没有touch事件 如果是force需要强行添加一个touch事件 longTap需要根据context
+  // 特殊处理
+  const listenerMap = {}
+  tapEvents.forEach((eventName) => {
+    if (listeners[eventName]) {
+      listenerMap[eventName] = true
+      delete listeners[eventName]
+    }
+  })
+  // const otherListenerKeys = Object.keys(otherListeners)
+  // for (let key of otherListenerKeys) {
+
+  // }
+
+  Object.keys(otherListeners).forEach((key) => {
+    const listener = otherListeners[key]
+    let rawListener
+    if (tapEvents.includes(key)) {
+      // 判断onTouch是否存在 若存在 则直接处理
+      rawListener = listeners['onTouch']
+
+      if (!rawListener && !options.force) {
+        return
+      } else if (!rawListener && options.force) {
+        // 创建一个touh事件 并赋值
+        listeners['onTouch'] = createTouch(context, listenerMap.onLongtap, __mpxTapInfo).onTouch
+        rawListener = listeners['onTouch']
+      }
+      // 事件处理 onTouchstart 1 onTouchmove 2 onTouchend 3 onTouchcancel 4
+      listeners['onTouch'] = function (e) {
+        // const thatKey = key
+        let timer = null
+        if (key === 'onLongtap') {
+          if (e.state === 1) {
+            // start
+            timer = setTimeout(
+              () => {
+                listener.call(this, e)
+              },
+              options.before ? 340 : 360
+            )
+          } else if (e.state === 3) {
+            timer && clearTimeout(timer)
+            timer = null
+          }
+        } else {
+          if (options.before) {
+            if (key === 'onTouchstart' && e.state === 1) {
+              listener.call(this, e)
+            } else if (key === 'onTouchmove' && e.state === 2) {
+              listener.call(this, e)
+            } else if (key === 'onTouchend' && e.state === 3) {
+              listener.call(this, e)
+            } else if (key === 'onTouchcancel' && e.state === 4) {
+              listener.call(this, e)
+            }
+            rawListener.call(this, e)
+          } else {
+            rawListener.call(this, e)
+            if (key === 'onTouchstart' && e.state === 1) {
+              listener.call(this, e)
+            } else if (key === 'onTouchmove' && e.state === 2) {
+              listener.call(this, e)
+            } else if (key === 'onTouchend' && e.state === 3) {
+              listener.call(this, e)
+            } else if (key === 'onTouchcancel' && e.state === 4) {
+              listener.call(this, e)
+            }
+          }
+        }
+      }
+    } else {
+      rawListener = listeners[key]
+      if (!rawListener) {
+        if (options.force) {
+          listeners[key] = listener
+        }
+      } else {
+        listeners[key] = function (e) {
+          if (options.before) {
+            listener.call(this, e)
+            rawListener.call(this, e)
+          } else {
+            rawListener.call(this, e)
+            listener.call(this, e)
+          }
+        }
+      }
+    }
+  })
+}
+// 没有tap 用touch模拟 touchstart touchmove touchcancel touchend tap longpress langtap
+function processTouchAndLtap (listeners, context, __mpxTapInfo) {
+  const listenerMap = {}
+  tapEvents.forEach((eventName) => {
+    if (listeners[eventName]) {
+      listenerMap[eventName] = true
+      delete listeners[eventName]
+    }
+  })
+  if (isEmptyObject(listenerMap)) return
+  let events = createTouch(context, listenerMap.onLongtap, __mpxTapInfo)
+  mergeListeners(
+    listeners,
+    events,
+    {
+      force: true
+    },
+    context,
+    __mpxTapInfo
+  )
+}
+
+export function extendEvent (e, extendObj = {}) {
+  Object.keys(extendObj).forEach((key) => {
+    Object.defineProperty(e, key, {
+      value: extendObj[key],
+      enumerable: true,
+      configurable: true,
+      writable: true
+    })
+  })
+}
+
+export function inheritEvent (type, oe, detail = {}) {
+  detail = Object.assign({}, oe.detail, detail)
+  const ne = getCustomEvent(type, detail)
+  extendEvent(ne, {
+    timeStamp: oe.timeStamp,
+    target: oe.target,
+    currentTarget: oe.currentTarget,
+    stopPropagation: oe.stopPropagation.bind(oe),
+    preventDefault: oe.preventDefault.bind(oe)
+  })
+  return ne
+}
+
+export function getCustomEvent (type, detail = {}, target = null) {
+  return {
+    type,
+    detail,
+    target,
+    timeStamp: new Date().valueOf()
+  }
+}
+
+function noop () {}
+
+function getListeners (context) {
+  let attrs = context.$attrs
+  let listeners = {}
+  Object.keys(attrs).forEach((v) => {
+    if (/^on[A-Z]/.test(v)) {
+      listeners[v] = attrs[v]
+    }
+  })
+  return listeners
+}
+
+export default function getInnerListeners (context, options = {}) {
+  let {
+    mergeBefore = {},
+    mergeAfter = {},
+    defaultListeners = [],
+    ignoredListeners = []
+  } = options
+  let __mpxTapInfo = {}
+  // 从attrs里面拿到以on开头的所有绑定的事件
+  const listeners = Object.assign({}, getListeners(context))
+  defaultListeners.forEach((key) => {
+    if (!listeners[key]) listeners[key] = noop
+  })
+  const mergeBeforeOptions = {
+    before: true
+  }
+  const mergeAfterOptions = {
+    before: false
+  }
+
+  if (mergeBefore.listeners) {
+    mergeBeforeOptions.force = mergeBefore.force
+    mergeBefore = mergeBefore.listeners
+  }
+
+  if (mergeAfter.listeners) {
+    mergeAfterOptions.force = mergeAfter.force
+    mergeAfter = mergeAfter.listeners
+  }
+  processOriginEvent(listeners)
+  processModel(listeners, context)
+  processTouchAndLtap(listeners, context, __mpxTapInfo)
+  mergeListeners(listeners, mergeBefore, mergeBeforeOptions, context, __mpxTapInfo)
+  mergeListeners(listeners, mergeAfter, mergeAfterOptions, context, __mpxTapInfo)
+  ignoredListeners.forEach((key) => {
+    delete listeners[key]
+  })
+  return listeners
+}

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

@@ -0,0 +1,305 @@
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+// 获取当前小程序样式版本配置
+const styleVersion = global.__style || "";
+const sizeClassMap = {
+  default: "",
+  mini: "mpx-button-size-mini",
+};
+const typeClassMap = {
+  primary: "mpx-button-type-primary",
+  warn: "mpx-button-type-warn",
+};
+const plainClassMap = {
+  false: "",
+  true: "mpx-button-plain",
+};
+const disabledClassMap = {
+  false: "",
+  true: "mpx-button-disabled",
+};
+const clickDisabledClassMap = {
+  false: "",
+  true: "mpx-button-click-disabled",
+};
+export default (function(){
+  return {
+    name: "mpx-button",
+    data() {
+      return {
+        hover: false,
+      };
+    },
+    props: {
+      name: String,
+      size: {
+        type: String,
+        default: "default",
+      },
+      type: {
+        type: String,
+        default: "default",
+      },
+      plain: Boolean,
+      disabled: Boolean,
+      loading: Boolean,
+      formType: String,
+      hoverClass: {
+        type: String,
+        default: "button-hover",
+      },
+      hoverStopPropagation: {
+        type: Boolean,
+        default: false,
+      },
+      hoverStartTime: {
+        type: Number,
+        default: 20,
+      },
+      hoverStayTime: {
+        type: Number,
+        default: 70,
+      },
+    },
+    computed: {
+      className() {
+        if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
+          return this.hoverClass;
+        }
+        return "";
+      },
+      classNameList() {
+        let classArr = [];
+        if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
+          classArr.push(this.hoverClass);
+        }
+        if (styleVersion === "v2") {
+          classArr.push(`${sizeClassMap[this.size]}${styleVersion}`);
+          classArr.push(`${typeClassMap[this.type]}${styleVersion}`);
+          classArr.push(`mpx-button-version${styleVersion}`);
+        } else {
+          classArr.push(sizeClassMap[this.size]);
+          classArr.push(typeClassMap[this.type]);
+          classArr.push(`mpx-button-version`);
+        }
+        classArr.push(plainClassMap[this.plain]);
+        classArr.push(disabledClassMap["" + !!this.disabled]);
+        // 禁用click
+        classArr.push(clickDisabledClassMap["" + !!this.disabled]);
+        return classArr;
+      },
+    },
+    render() {
+      let mergeAfter;
+      if (this.hoverClass && this.hoverClass !== "none") {
+        mergeAfter = {
+          listeners: {
+            onTouchstart: this.handleTouchstart,
+            onTouchend: this.handleTouchend,
+          },
+          force: true,
+        };
+      }
+      const domProps = {
+        disabled: this.disabled,
+        plain: this.plain,
+        type: this.type,
+      };
+      const data = {
+        class: ["mpx-button", ...this.classNameList],
+        ...domProps,
+        ...getInnerListeners(this, {
+          mergeAfter,
+          // 由于当前机制下tap事件只有存在tap监听才会触发，为了确保该组件能够触发tap，传递一个包含tap的defaultListeners用于模拟存在tap监听
+          defaultListeners: ["onTap"],
+        }),
+      };
+
+      let text = "";
+      const nodes = this.$slots.default();
+      nodes.forEach((item) => {
+        if (item.shapeFlag === 8 && item.children) {
+          text += item.children;
+        }
+      });
+      return h("button", data, text);
+    },
+    methods: {
+      handleTouchstart(e) {
+        if (e.__hoverStopPropagation) {
+          return;
+        }
+        e.__hoverStopPropagation = this.hoverStopPropagation;
+        clearTimeout(this.startTimer);
+        this.startTimer = setTimeout(() => {
+          this.hover = true;
+        }, this.hoverStartTime);
+      },
+      handleTouchend() {
+        clearTimeout(this.endTimer);
+        this.endTimer = setTimeout(() => {
+          this.hover = false;
+        }, this.hoverStayTime);
+      },
+    },
+  }
+})()
+</script>
+
+
+
+<style lang="stylus" scoped>
+.mpx-button-versionv2
+    width: 184px
+    line-height 1.41176471
+    font-weight: 700;
+    padding-top 8px
+    padding-bottom 8px
+  .mpx-button-version
+    width: 100%
+    line-height 2.55555556
+    cursor: pointer
+    &:after
+      border 1px solid rgba(0,0,0,.2)
+
+  .mpx-button
+    padding-left: 14px
+    padding-right: 14px
+    border none
+    outline: none
+    position relative
+    display block
+    margin-left auto
+    margin-right auto
+    margin-bottom 10px
+    box-sizing border-box
+    font-size 18px
+    text-align center
+    text-decoration none
+    border-radius 5px
+    -webkit-tap-highlight-color transparent
+    overflow hidden
+    color #000
+    background-color #f8f8f8
+    &:after
+      content " "
+      width 200%
+      height 200%
+      position absolute
+      top 0
+      left 0
+      -webkit-transform scale(.5)
+      transform scale(.5)
+      -webkit-transform-origin 0 0
+      transform-origin 0 0
+      box-sizing border-box
+      border-radius 10px
+
+    &.button-hover
+      background-color #dedede
+
+    /* 默认版本 size=mini style */
+    &.mpx-button-size-mini
+      display inline-block
+      line-height 2.3
+      font-size 13px
+      padding 0 1.34em
+      width auto
+    /* v2 size=mini style */
+    &.mpx-button-size-miniv2
+      width auto
+      padding 0 0.75em
+      line-height 2
+      font-size 16px
+      display inline-block
+    &.mpx-button-plain
+      color #353535
+      border 1px solid #353535
+      background-color transparent
+      &.mpx-button-plain.button-hover
+        background-color rgba(0, 0, 0, 0)
+        color #828282
+        border 1px solid #828282
+
+    /* 默认版本 type=primary style */
+    &.mpx-button-type-primary
+      background-color #1aad19
+      color #fff
+      &.mpx-button-type-primary.mpx-button-plain
+        color #1aad19
+        border-color #1aad19
+        background-color #fff
+    /* v2 type=primary style */
+    &.mpx-button-type-primaryv2
+      background-color #07c160
+      color #fff
+      &.mpx-button-type-primaryv2.button-hover
+        color #fff
+        background-color #06ad56
+      &.mpx-button-type-primaryv2.mpx-button-plain
+        color #06ae56
+        border-color #179c16
+        background-color #fff
+      &.mpx-button-type-primaryv2.button-hover.mpx-button-plain
+        color #06ae56
+        background-color rgba(0, 0, 0, .1)
+
+    /* 默认版本 type=warn style */
+    &.mpx-button-type-warn
+      color #fff
+      background-color #e64340
+      &.mpx-button-type-warn.mpx-button-plain
+        color #e64340
+        background-color transparent
+        border 1px solid #e64340
+    /* v2 type=warn style */
+    &.mpx-button-type-warnv2
+      color #fa5151
+      background-color #f2f2f2
+      &.mpx-button-type-warnv2.button-hover
+        background-color #d9d9d9
+      &.mpx-button-type-warnv2.mpx-button-plain
+        color #fa5151
+        background-color #fff
+        border 1px solid #e64340
+      &.mpx-button-type-warnv2.button-hover.mpx-button-plain
+        color: #f58c8d
+        border 1px solid #f58a8b
+        background-color #fff
+
+    &.mpx-button-disabled
+      color rgba(0, 0, 0, 0.18) !important
+      background-color #fafafa !important
+      border 1px solid rgba(0, 0, 0, .2) !important
+    &.mpx-button-click-disabled
+      pointer-events none
+    &.mpx-button-loading
+      &.mpx-button-type-warn
+        color rgba(255,255,255,.6)
+        background-color #ce3c39
+      &.mpx-button-type-warnv2
+        background-color #d9d9d9
+        color #fa5151
+      &.mpx-button-type-primary
+        color: rgba(255,255,255,.6);
+        background-color: #179b16;
+      &:before
+        content: " "
+        display: inline-block
+        width: 18px
+        height: 18px
+        vertical-align: middle
+        -webkit-animation: mpxButton 1s steps(12,end) infinite
+        animation: mpxButton 1s steps(12,end) infinite
+        background transparent url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=') no-repeat
+        background-size: 100%
+        margin -0.2em 0.34em 0 0
+
+  @keyframes mpxButton
+    0%
+      transform: rotate3d(0, 0, 1, 0deg)
+    100%
+      transform: rotate3d(0, 0, 1, 360deg)
+</style>

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

@@ -0,0 +1,61 @@
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-image",
+  props: {
+    src: {
+      type: String,
+    },
+    mode: {
+      type: String,
+      default: "scaleToFill",
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: false,
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  render() {
+    let resize = "";
+    switch (this.mode) {
+      case "scaleToFill":
+        resize = "stretch";
+        break;
+      case "aspectFit":
+        resize = "contain";
+        break;
+      case "aspectFill":
+        resize = "cover";
+        break;
+      default:
+        resize = "stretch";
+    }
+    return h("image", {
+      class: "mpx-image",
+      src: this.src,
+      resize,
+      ...getInnerListeners(this)
+    });
+  },
+  data() {
+    return {};
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="stylus" scoped>
+.mpx-image
+  width 300px
+  height 225px
+  display inline-block
+</style>