dolphin-weex-ui 2.1.8 → 2.2.0

package/dist/index.web.js

@@ -2022,7 +2022,7 @@ var _dofCatalog = __webpack_require__(21);
 
 var _dofCatalog2 = _interopRequireDefault(_dofCatalog);
 
-var _dofCell = __webpack_require__(14);
+var _dofCell = __webpack_require__(13);
 
 var _dofCell2 = _interopRequireDefault(_dofCell);
 
@@ -2118,7 +2118,7 @@ var _dofIconfont = __webpack_require__(5);
 
 var _dofIconfont2 = _interopRequireDefault(_dofIconfont);
 
-var _dofImage = __webpack_require__(15);
+var _dofImage = __webpack_require__(14);
 
 var _dofImage2 = _interopRequireDefault(_dofImage);
 
@@ -2154,7 +2154,7 @@ var _dofMarquee = __webpack_require__(25);
 
 var _dofMarquee2 = _interopRequireDefault(_dofMarquee);
 
-var _dofMask = __webpack_require__(16);
+var _dofMask = __webpack_require__(15);
 
 var _dofMask2 = _interopRequireDefault(_dofMask);
 
@@ -2501,32 +2501,17 @@ exports.Utils = _utils2.default; /**
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBoundingClientRectBase = getBoundingClientRectBase;
-exports.getBoundingClientRect = getBoundingClientRect;
-exports.getBoundingClientRectAsync = getBoundingClientRectAsync;
-var dom = weex.requireModule('dom');
-
-function getBoundingClientRectBase(element, func) {
-  dom && dom.getComponentRect(element, func);
-}
 
-function getBoundingClientRect(element, func) {
-  var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+var _index = __webpack_require__(447);
 
-  setTimeout(function () {
-    return dom && dom.getComponentRect(element, func);
-  }, delay);
-}
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_index).default;
+  }
+});
 
-function getBoundingClientRectAsync(element) {
-  return new Promise(function (resolve) {
-    setTimeout(function () {
-      return dom && dom.getComponentRect(element, function (res) {
-        return res.result && resolve(res.size);
-      });
-    }, 0);
-  });
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /***/ }),
 /* 14 */
@@ -2539,7 +2524,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _index = __webpack_require__(447);
+var _index = __webpack_require__(473);
 
 Object.defineProperty(exports, 'default', {
   enumerable: true,
@@ -2561,7 +2546,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _index = __webpack_require__(473);
+var _index = __webpack_require__(483);
 
 Object.defineProperty(exports, 'default', {
   enumerable: true,
@@ -2582,17 +2567,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getBoundingClientRectBase = getBoundingClientRectBase;
+exports.getBoundingClientRect = getBoundingClientRect;
+exports.getBoundingClientRectAsync = getBoundingClientRectAsync;
+var dom = weex.requireModule('dom');
 
-var _index = __webpack_require__(483);
+function getBoundingClientRectBase(element, func) {
+  dom && dom.getComponentRect(element, func);
+}
 
-Object.defineProperty(exports, 'default', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_index).default;
-  }
-});
+function getBoundingClientRect(element, func) {
+  var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  setTimeout(function () {
+    return dom && dom.getComponentRect(element, func);
+  }, delay);
+}
+
+function getBoundingClientRectAsync(element) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      return dom && dom.getComponentRect(element, function (res) {
+        return res.result && resolve(res.size);
+      });
+    }, 0);
+  });
+}
 
 /***/ }),
 /* 17 */
@@ -8373,7 +8373,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.dof-card[data-v-3f24858b] {\n  /* border-radius: 32px; */\n  overflow: hidden;\n  position: relative;\n  /* background-color: #ffffff; */\n}\n.dof-card--active[data-v-3f24858b] {\n  background-color: #f2f2f2;\n}\n.dof-card-header[data-v-3f24858b] {\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* padding-left: 32px;\n  padding-right: 32px;\n  padding-top: 32px;\n  padding-bottom: 32px; */\n  overflow: hidden;\n}\n.dof-card-header-tag[data-v-3f24858b] {\n  position: absolute;\n  width: 1.2rem;\n  height: 1.2rem;\n  right: -0.6rem;\n  top: -0.6rem;\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-transform: rotateZ(45deg);\n          transform: rotateZ(45deg);\n}\n.dof-card-header-tag-confirm[data-v-3f24858b] {\n  position: absolute;\n  width: 0.24rem;\n  height: 0.24rem;\n  left: 0.46667rem;\n  top: 0.88rem;\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-transform: rotateZ(-45deg);\n          transform: rotateZ(-45deg);\n}\n.dof-card-header-stamp[data-v-3f24858b] {\n  position: absolute;\n  top: 0px;\n  width: 0.64rem;\n  height: 0.64rem;\n  overflow: hidden;\n  z-index: 100;\n}\n.dof-card-header-stamp--left[data-v-3f24858b] {\n  left: 0px;\n  border-top-left-radius: 0.42667rem;\n}\n.dof-card-header-stamp--right[data-v-3f24858b] {\n  right: 0px;\n  border-top-right-radius: 0.42667rem;\n}\n.dof-card-header-content[data-v-3f24858b] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n}\n.dof-card-header-arrow-wrapper[data-v-3f24858b] {\n  margin-right: 0.05333rem;\n}\n.dof-card-header-arrow[data-v-3f24858b] {\n  width: 0.32rem;\n  height: 0.32rem;\n  margin-left: 0.16rem;\n  margin-right: 0.16rem;\n  margin-top: 0.16rem;\n  margin-bottom: 0.16rem;\n}\n.dof-card-body[data-v-3f24858b] {\n  position: relative;\n  overflow: hidden;\n}\n.dof-card-dot[data-v-3f24858b] {\n  position: absolute;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  right: 0.21333rem;\n  top: 0.21333rem;\n  border-radius: 0.10667rem;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-card/index.vue?e463fd0e"],"names":[],"mappings":";AA8MA;EACA,0BAAA;EACA,iBAAA;EACA,mBAAA;EACA,gCAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA;;;0BAGA;EACA,iBAAA;CACA;AAEA;EACA,mBAAA;EACA,cAAA;EACA,eAAA;EACA,eAAA;EACA,aAAA;EACA,iCAAA;UAAA,yBAAA;EACA,kCAAA;UAAA,0BAAA;CACA;AACA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;EACA,iCAAA;UAAA,yBAAA;EACA,mCAAA;UAAA,2BAAA;CACA;AAEA;EACA,mBAAA;EACA,SAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;CACA;AAEA;EACA,UAAA;EACA,mCAAA;CACA;AAEA;EACA,WAAA;EACA,oCAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;CACA;AAEA;EACA,yBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,oBAAA;EACA,uBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"dof-card\" :style=\"_cardStyle\">\n    <div class=\"dof-card-header\" @click=\"onSelect\" :style=\"_cardWrapperStyle\">\n      <div v-if=\"isActive\" class=\"dof-card-header-tag\" :style=\"{ backgroundColor: _tagBg }\">\n        <image class=\"dof-card-header-tag-confirm\" :src=\"confirm\"></image>\n      </div>\n      <div class=\"dof-card-header-content\">\n        <slot></slot>\n      </div>\n      <div class=\"dof-card-header-arrow-wrapper\" v-if=\"collapsable\" @click=\"onCollapse\">\n        <dof-switch v-if=\"_isColmo\" :checked=\"!collapsed_\" @dof-change=\"onCollapse\"> </dof-switch>\n        <image v-else ref=\"arrow\" class=\"dof-card-header-arrow\" :src=\"arrowUp\"></image>\n      </div>\n    </div>\n    <div v-if=\"collapsable\" ref=\"body\" class=\"dof-card-body\">\n      <slot name=\"body\"></slot>\n    </div>\n    <div\n      v-if=\"dotConfig.normalColor && dotConfig.clickedColor\"\n      :style=\"{ backgroundColor: clicked_ ? dotConfig.clickedColor : dotConfig.normalColor }\"\n      class=\"dof-card-dot\"\n    ></div>\n  </div>\n</template>\n\n<script>\nimport { mixSelectableChild } from '../utils/mix-selectable-child.js'\nimport { Transition } from '../utils/transition.js'\nimport { getBoundingClientRect } from '../utils/dom.js'\nimport arrowUp from './imgs/arrow_up'\nimport confirm from './imgs/confirm'\nimport ColmoMixin from '../../mixins/colmo'\nimport { STYLE_MAP } from './style'\nimport DofSwitch from '../dof-switch/index'\nexport default {\n  components: { DofSwitch },\n  mixins: [mixSelectableChild('dof-card-group'), ColmoMixin],\n  props: {\n    collapsable: {\n      type: Boolean,\n      default: false\n    },\n    selectable: {\n      type: Boolean,\n      default: false\n    },\n    selected: {\n      type: Boolean,\n      default: false\n    },\n    collapsed: {\n      type: Boolean,\n      default: false\n    },\n    tag: {\n      type: String,\n      default: 'right'\n    },\n    // 标签背景色\n    tagBg: {\n      type: String,\n      default: ''\n    },\n    // 卡片样式\n    cardStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // 右上角标记配置，normalColor常态颜色，clickedColor选中态颜色\n    dotConfig: {\n      type: Object,\n      default: () => ({})\n    },\n    // 是否选中态\n    clicked: {\n      type: Boolean,\n      default: false\n    },\n    // 点击颜色\n    touchColor: {\n      type: String,\n      required: false,\n      default: ''\n    },\n    cardWrapperStyle: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  model: {\n    prop: 'selected',\n    event: 'select'\n  },\n  data() {\n    return {\n      active_: false,\n      collapsed_: this.collapsed,\n      clicked_: this.clicked,\n      bodyHeight: 0,\n      arrowUp,\n      confirm,\n      isTouching: false\n    }\n  },\n  computed: {\n    themeStyle() {\n      const _theme = this._theme || 'default'\n      return STYLE_MAP[_theme] || {}\n    },\n    isActive() {\n      return (this.selectable && this.selected) || this.isSelected\n    },\n    _cardStyle() {\n      let tmp = { borderRadius: this.themeStyle.borderRadius }\n      let style = {\n        backgroundColor: this._isColmo ? '#1c1e21' : '#fff',\n        ...tmp,\n        ...this.cardStyle\n      }\n      if (this.touchColor && this.isTouching) style.backgroundColor = this.touchColor\n      return style\n    },\n    _cardWrapperStyle() {\n      let style = {\n        'backgroundColor:active': this.touchColor ? this.touchColor : '',\n        paddingLeft: '32px',\n        paddingRight: '32px',\n        paddingTop: '32px',\n        paddingBottom: '32px',\n        ...this.cardWrapperStyle\n      }\n      return style\n    },\n    _tagBg() {\n      if (this.tagBg) return this.tagBg\n      return this._isColmo ? '#B35336' : '#3c7cf6'\n    }\n  },\n  mounted() {\n    this.initCollapsable()\n  },\n  methods: {\n    initCollapsable() {\n      if (!this.collapsable) {\n        return\n      }\n      this.$nextTick(() => {\n        getBoundingClientRect(this.$refs.body, res => {\n          this.bodyHeight = res.size.height\n          if (this.collapsed_) {\n            this.collapseBody(0)\n          }\n        })\n      })\n      if (this.collapsed_) {\n        this.collapseArrow()\n      }\n    },\n    onSelect() {\n      this.$emit('select', !this.selected)\n      this.triggerSelect()\n\n      this.$emit('clicked', (this.clicked_ = !this.clicked_))\n    },\n    onCollapse() {\n      this.collapsed_ = !this.collapsed_\n      this.$emit('collapse', this.collapsed_)\n      if (this.collapsed_) {\n        this.collapseBody()\n        this.collapseArrow()\n      } else {\n        this.expandeBody()\n        this.expandeArrow()\n      }\n    },\n    collapseBody(duration = 360) {\n      Transition.Default()\n        .duration(duration)\n        .height(0)\n        .needLayout(true)\n        .run(this.$refs.body)\n    },\n    collapseArrow() {\n      Transition.Default()\n        .rotateZ(-180)\n        .transformOrigin('center')\n        .run(this.$refs.arrow)\n    },\n    expandeBody(duration = 360) {\n      Transition.Default()\n        .duration(duration)\n        .height(this.bodyHeight)\n        .needLayout(true)\n        .run(this.$refs.body)\n    },\n    expandeArrow() {\n      Transition.Default()\n        .rotateZ(0)\n        .transformOrigin('center')\n        .run(this.$refs.arrow)\n    }\n  }\n}\n</script>\n\n<style scoped>\n.dof-card {\n  /* border-radius: 32px; */\n  overflow: hidden;\n  position: relative;\n  /* background-color: #ffffff; */\n}\n\n.dof-card--active {\n  background-color: #f2f2f2;\n}\n\n.dof-card-header {\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  /* padding-left: 32px;\n  padding-right: 32px;\n  padding-top: 32px;\n  padding-bottom: 32px; */\n  overflow: hidden;\n}\n\n.dof-card-header-tag {\n  position: absolute;\n  width: 90px;\n  height: 90px;\n  right: -45px;\n  top: -45px;\n  transform-origin: center;\n  transform: rotateZ(45deg);\n}\n.dof-card-header-tag-confirm {\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  left: 35px;\n  top: 66px;\n  transform-origin: center;\n  transform: rotateZ(-45deg);\n}\n\n.dof-card-header-stamp {\n  position: absolute;\n  top: 0px;\n  width: 48px;\n  height: 48px;\n  overflow: hidden;\n  z-index: 100;\n}\n\n.dof-card-header-stamp--left {\n  left: 0px;\n  border-top-left-radius: 32px;\n}\n\n.dof-card-header-stamp--right {\n  right: 0px;\n  border-top-right-radius: 32px;\n}\n\n.dof-card-header-content {\n  flex: 1;\n  flex-direction: column;\n}\n\n.dof-card-header-arrow-wrapper {\n  margin-right: 4px;\n}\n\n.dof-card-header-arrow {\n  width: 24px;\n  height: 24px;\n  margin-left: 12px;\n  margin-right: 12px;\n  margin-top: 12px;\n  margin-bottom: 12px;\n}\n\n.dof-card-body {\n  position: relative;\n  overflow: hidden;\n}\n.dof-card-dot {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  right: 16px;\n  top: 16px;\n  border-radius: 8px;\n}\n</style>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.dof-card[data-v-3f24858b] {\n  /* border-radius: 32px; */\n  overflow: hidden;\n  position: relative;\n  /* background-color: #ffffff; */\n}\n.dof-card--active[data-v-3f24858b] {\n  background-color: #f2f2f2;\n}\n.dof-card-header[data-v-3f24858b] {\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* padding-left: 32px;\n  padding-right: 32px;\n  padding-top: 32px;\n  padding-bottom: 32px; */\n  overflow: hidden;\n}\n.dof-card-header-tag[data-v-3f24858b] {\n  position: absolute;\n  width: 1.2rem;\n  height: 1.2rem;\n  right: -0.6rem;\n  top: -0.6rem;\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-transform: rotateZ(45deg);\n          transform: rotateZ(45deg);\n}\n.dof-card-header-tag-confirm[data-v-3f24858b] {\n  position: absolute;\n  width: 0.24rem;\n  height: 0.24rem;\n  left: 0.46667rem;\n  top: 0.88rem;\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-transform: rotateZ(-45deg);\n          transform: rotateZ(-45deg);\n}\n.dof-card-header-stamp[data-v-3f24858b] {\n  position: absolute;\n  top: 0px;\n  width: 0.64rem;\n  height: 0.64rem;\n  overflow: hidden;\n  z-index: 100;\n}\n.dof-card-header-stamp--left[data-v-3f24858b] {\n  left: 0px;\n  border-top-left-radius: 0.42667rem;\n}\n.dof-card-header-stamp--right[data-v-3f24858b] {\n  right: 0px;\n  border-top-right-radius: 0.42667rem;\n}\n.dof-card-header-content[data-v-3f24858b] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n}\n.dof-card-header-arrow-wrapper[data-v-3f24858b] {\n  margin-right: 0.05333rem;\n}\n.dof-card-header-arrow[data-v-3f24858b] {\n  width: 0.32rem;\n  height: 0.32rem;\n  margin-left: 0.16rem;\n  margin-right: 0.16rem;\n  margin-top: 0.16rem;\n  margin-bottom: 0.16rem;\n}\n.dof-card-body[data-v-3f24858b] {\n  position: relative;\n  overflow: hidden;\n}\n.dof-card-dot[data-v-3f24858b] {\n  position: absolute;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  right: 0.21333rem;\n  top: 0.21333rem;\n  border-radius: 0.10667rem;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-card/index.vue?980c43ce"],"names":[],"mappings":";AAgNA;EACA,0BAAA;EACA,iBAAA;EACA,mBAAA;EACA,gCAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA;;;0BAGA;EACA,iBAAA;CACA;AAEA;EACA,mBAAA;EACA,cAAA;EACA,eAAA;EACA,eAAA;EACA,aAAA;EACA,iCAAA;UAAA,yBAAA;EACA,kCAAA;UAAA,0BAAA;CACA;AACA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;EACA,iCAAA;UAAA,yBAAA;EACA,mCAAA;UAAA,2BAAA;CACA;AAEA;EACA,mBAAA;EACA,SAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;CACA;AAEA;EACA,UAAA;EACA,mCAAA;CACA;AAEA;EACA,WAAA;EACA,oCAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;CACA;AAEA;EACA,yBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,oBAAA;EACA,uBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"dof-card\" :style=\"_cardStyle\">\n    <div class=\"dof-card-header\" @click=\"onSelect\" :style=\"_cardWrapperStyle\">\n      <div v-if=\"isActive\" class=\"dof-card-header-tag\" :style=\"{ backgroundColor: _tagBg }\">\n        <image class=\"dof-card-header-tag-confirm\" :src=\"confirm\"></image>\n      </div>\n      <div class=\"dof-card-header-content\">\n        <slot></slot>\n      </div>\n      <div class=\"dof-card-header-arrow-wrapper\" v-if=\"collapsable\" @click=\"onCollapse\">\n        <dof-switch v-if=\"_isColmo\" :checked=\"!collapsed_\" @dofChange=\"onCollapse\"> </dof-switch>\n        <image v-else ref=\"arrow\" class=\"dof-card-header-arrow\" :src=\"arrowUp\"></image>\n      </div>\n    </div>\n    <div v-if=\"collapsable\" ref=\"body\" class=\"dof-card-body\">\n      <slot name=\"body\"></slot>\n    </div>\n    <div\n      v-if=\"dotConfig.normalColor && dotConfig.clickedColor\"\n      :style=\"{ backgroundColor: clicked_ ? dotConfig.clickedColor : dotConfig.normalColor }\"\n      class=\"dof-card-dot\"\n    ></div>\n  </div>\n</template>\n\n<script>\nimport { mixSelectableChild } from '../utils/mix-selectable-child.js'\nimport { Transition } from '../utils/transition.js'\nimport { getBoundingClientRect } from '../utils/dom.js'\nimport arrowUp from './imgs/arrow_up'\nimport confirm from './imgs/confirm'\nimport ColmoMixin from '../../mixins/colmo'\nimport { STYLE_MAP } from './style'\nimport DofSwitch from '../dof-switch/index'\nexport default {\n  components: { DofSwitch },\n  mixins: [mixSelectableChild('dof-card-group'), ColmoMixin],\n  props: {\n    collapsable: {\n      type: Boolean,\n      default: false\n    },\n    selectable: {\n      type: Boolean,\n      default: false\n    },\n    selected: {\n      type: Boolean,\n      default: false\n    },\n    collapsed: {\n      type: Boolean,\n      default: false\n    },\n    tag: {\n      type: String,\n      default: 'right'\n    },\n    // 标签背景色\n    tagBg: {\n      type: String,\n      default: ''\n    },\n    // 卡片样式\n    cardStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // 右上角标记配置，normalColor常态颜色，clickedColor选中态颜色\n    dotConfig: {\n      type: Object,\n      default: () => ({})\n    },\n    // 是否选中态\n    clicked: {\n      type: Boolean,\n      default: false\n    },\n    // 点击颜色\n    touchColor: {\n      type: String,\n      required: false,\n      default: ''\n    },\n    cardWrapperStyle: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  model: {\n    prop: 'selected',\n    event: 'select'\n  },\n  data() {\n    return {\n      active_: false,\n      collapsed_: this.collapsed,\n      clicked_: this.clicked,\n      bodyHeight: 0,\n      arrowUp,\n      confirm,\n      isTouching: false\n    }\n  },\n  computed: {\n    themeStyle() {\n      const _theme = this._theme || 'default'\n      return STYLE_MAP[_theme] || {}\n    },\n    isActive() {\n      return (this.selectable && this.selected) || this.isSelected\n    },\n    _cardStyle() {\n      let tmp = { borderRadius: this.themeStyle.borderRadius }\n      let style = {\n        backgroundColor: this._isColmo ? '#1c1e21' : '#fff',\n        ...tmp,\n        ...this.cardStyle\n      }\n      if (this.touchColor && this.isTouching) style.backgroundColor = this.touchColor\n      return style\n    },\n    _cardWrapperStyle() {\n      let style = {\n        'backgroundColor:active': this.touchColor ? this.touchColor : '',\n        paddingLeft: '32px',\n        paddingRight: '32px',\n        paddingTop: '32px',\n        paddingBottom: '32px',\n        ...this.cardWrapperStyle\n      }\n      return style\n    },\n    _tagBg() {\n      if (this.tagBg) return this.tagBg\n      return this._isColmo ? '#B35336' : '#3c7cf6'\n    }\n  },\n  mounted() {\n    this.initCollapsable()\n  },\n  methods: {\n    initCollapsable() {\n      if (!this.collapsable) {\n        return\n      }\n      this.$nextTick(() => {\n        getBoundingClientRect(this.$refs.body, res => {\n          this.bodyHeight = res.size.height\n          if (this.collapsed_) {\n            this.collapseBody(0)\n          } else {\n            this.expandeBody()\n          }\n        })\n      })\n      if (this.collapsed_) {\n        this.collapseArrow()\n      }\n    },\n    onSelect() {\n      this.$emit('select', !this.selected)\n      this.triggerSelect()\n\n      this.$emit('clicked', (this.clicked_ = !this.clicked_))\n    },\n    onCollapse() {\n      this.collapsed_ = !this.collapsed_\n      this.$emit('collapse', this.collapsed_)\n      if (this.collapsed_) {\n        this.collapseBody()\n        this.collapseArrow()\n      } else {\n        this.expandeBody()\n        this.expandeArrow()\n      }\n    },\n    collapseBody(duration = 360) {\n      Transition.Default()\n        .duration(duration)\n        .height(0)\n        .needLayout(true)\n        .run(this.$refs.body)\n    },\n    collapseArrow() {\n      Transition.Default()\n        .rotateZ(-180)\n        .transformOrigin('center')\n        .run(this.$refs.arrow)\n    },\n    expandeBody(duration = 360) {\n      Transition.Default()\n        .duration(duration)\n        .height(this.bodyHeight)\n        .needLayout(true)\n        .run(this.$refs.body)\n    },\n    expandeArrow() {\n      Transition.Default()\n        .rotateZ(0)\n        .transformOrigin('center')\n        .run(this.$refs.arrow)\n    }\n  }\n}\n</script>\n\n<style scoped>\n.dof-card {\n  /* border-radius: 32px; */\n  overflow: hidden;\n  position: relative;\n  /* background-color: #ffffff; */\n}\n\n.dof-card--active {\n  background-color: #f2f2f2;\n}\n\n.dof-card-header {\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  /* padding-left: 32px;\n  padding-right: 32px;\n  padding-top: 32px;\n  padding-bottom: 32px; */\n  overflow: hidden;\n}\n\n.dof-card-header-tag {\n  position: absolute;\n  width: 90px;\n  height: 90px;\n  right: -45px;\n  top: -45px;\n  transform-origin: center;\n  transform: rotateZ(45deg);\n}\n.dof-card-header-tag-confirm {\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  left: 35px;\n  top: 66px;\n  transform-origin: center;\n  transform: rotateZ(-45deg);\n}\n\n.dof-card-header-stamp {\n  position: absolute;\n  top: 0px;\n  width: 48px;\n  height: 48px;\n  overflow: hidden;\n  z-index: 100;\n}\n\n.dof-card-header-stamp--left {\n  left: 0px;\n  border-top-left-radius: 32px;\n}\n\n.dof-card-header-stamp--right {\n  right: 0px;\n  border-top-right-radius: 32px;\n}\n\n.dof-card-header-content {\n  flex: 1;\n  flex-direction: column;\n}\n\n.dof-card-header-arrow-wrapper {\n  margin-right: 4px;\n}\n\n.dof-card-header-arrow {\n  width: 24px;\n  height: 24px;\n  margin-left: 12px;\n  margin-right: 12px;\n  margin-top: 12px;\n  margin-bottom: 12px;\n}\n\n.dof-card-body {\n  position: relative;\n  overflow: hidden;\n}\n.dof-card-dot {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  right: 16px;\n  top: 16px;\n  border-radius: 8px;\n}\n</style>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -8415,7 +8415,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.widget[data-v-401fdb82] {\n  /* background-color: #ffffff; */\n  height: 1.17333rem;\n}\n.tab-margin[data-v-401fdb82] {\n  margin-bottom: 0.21333rem;\n}\n.tab-padding-160[data-v-401fdb82] {\n  padding: 0 2.13333rem;\n}\n.tab-padding-40[data-v-401fdb82] {\n  padding: 0 0.53333rem;\n}\n.flex-expand-layout[data-v-401fdb82] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.tab-title-list[data-v-401fdb82] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n  padding: 0 0.21333rem;\n}\n.space-around-layout[data-v-401fdb82] {\n  -webkit-justify-content: space-around;\n          justify-content: space-around;\n}\n.padding-layout-32[data-v-401fdb82] {\n  padding: 0 0.42667rem;\n}\n.padding-layout-8[data-v-401fdb82] {\n  padding: 0 0.10667rem;\n}\n.title-item[data-v-401fdb82] {\n  height: 1.17333rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: stretch;\n  -webkit-align-items: stretch;\n          align-items: stretch;\n  border-bottom-style: solid;\n  /* border-width: 1px; */\n}\n.title-item-primary[data-v-401fdb82] {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.tab-text-wrapper[data-v-401fdb82] {\n  height: 1.09333rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner[data-v-401fdb82] {\n  height: 1.01333rem;\n}\n.thidrd-wrapper[data-v-401fdb82] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  height: 0.69333rem;\n  padding: 0 0.4rem;\n  border-radius: 0.34667rem;\n  /* background-color: #232323; */\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.avatar-icon[data-v-401fdb82] {\n  width: 0.48rem;\n  height: 0.48rem;\n  margin-right: 0.10667rem;\n}\n.tab-text[data-v-401fdb82] {\n  lines: 1;\n  text-overflow: ellipsis;\n  font-family: PingFangSC-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n.third-text[data-v-401fdb82] {\n  font-size: 0.32rem;\n  /* color: #000000; */\n}\n.border-bottom-line[data-v-401fdb82] {\n  width: 0.53333rem;\n  height: 0.08rem;\n  border-radius: 0.04rem;\n  margin-top: -0.13333rem;\n  /* margin-left: 10px; */\n  /* background-color: transparent; */\n}\n.border-bottom-line-secondary[data-v-401fdb82] {\n  height: 0.05333rem;\n  border-radius: 0.04rem;\n  margin-top: -0.02667rem;\n  /* background-color: transparent; */\n}\n.dot-bottom-border[data-v-401fdb82] {\n  /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n.thirdTabPanel[data-v-401fdb82] {\n  height: 1.70667rem;\n}\n.dof-third-panel[data-v-401fdb82] {\n  /* width: 750px; */\n  height: 1.70667rem;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  opacity: 1;\n}\n.btn-group-wrap[data-v-401fdb82] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  border-radius: 0.85333rem;\n  /* overflow: hidden; */\n}\n.btn-text[data-v-401fdb82] {\n  font-family: PingFangSC-Medium;\n  color: #ffffff;\n  font-size: 0.37333rem;\n  line-height: 0.85333rem;\n  padding-left: 0.42667rem;\n  padding-right: 0.42667rem;\n}\n.leftRadius[data-v-401fdb82] {\n  border-top-left-radius: 0.42667rem;\n  border-bottom-left-radius: 0.42667rem;\n}\n.rightRadius[data-v-401fdb82] {\n  border-top-right-radius: 0.42667rem;\n  border-bottom-right-radius: 0.42667rem;\n}\n.dot-tip[data-v-401fdb82] {\n  /* position: absolute; */\n  /* top: 34px;\n  right: 0px; */\n  margin-top: 0.08rem;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  border-radius: 0.13333rem;\n  background-color: #ff3b30;\n}\n\n/* 小红点 */\n.dot-tab-text[data-v-401fdb82] {\n  /* margin-top:8px; */\n  padding-top: 0.13333rem;\n  padding-bottom: 0.10667rem;\n}\n.flexDirection[data-v-401fdb82] {\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-align: start;\n  -webkit-align-items: flex-start;\n          align-items: flex-start;\n}\n.flexCoulmn[data-v-401fdb82] {\n}\n.dot-num-tip-text[data-v-401fdb82] {\n  /* position:absolute;\n  right: 0px;\n  top:0; */\n  font-size: 0.32rem;\n  color: #ffffff;\n  border-radius: 1.33333rem;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.10667rem;\n  padding-right: 0.10667rem;\n  /* transform: translate(100%, 0); */\n  margin-left: -0.21333rem;\n  /* padding-top: 8px;\n  padding-bottom: 8px; */\n}\n.dot-num-tip-right[data-v-401fdb82] {\n  /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth[data-v-401fdb82] {\n  /* margin-right: 60px; */\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/index.vue?608a5f54","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/<no source>"],"names":[],"mappings":";AA+ZA;EACA,gCAAA;EACA,mBAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,sBAAA;CACA;AAEA;EACA,sCAAA;UAAA,8BAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;EACA,2BAAA;EACA,wBAAA;CACA;AAEA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;;AAEA,4BAAA;AACA;EACA,mBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,kBAAA;EACA,0BAAA;EACA,gCAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,yBAAA;CACA;AAEA;EACA,SAAA;EACA,wBAAA;EACA,+BAAA;EACA,kBAAA;EACA,qBAAA;ECjfA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDkfA;AAEA;EACA,mBAAA;EACA,qBAAA;CACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,wBAAA;EACA,wBAAA;EACA,oCAAA;CACA;AAEA;EACA,mBAAA;EACA,uBAAA;EACA,wBAAA;EACA,oCAAA;CACA;AAEA;EACA,yBAAA;CACA;;AAEA,cAAA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,WAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EACA,uBAAA;CACA;AAEA;EACA,+BAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,yBAAA;EACA,0BAAA;CACA;AAEA;EACA,mCAAA;EACA,sCAAA;CACA;AAEA;EACA,oCAAA;EACA,uCAAA;CACA;AAEA;EACA,yBAAA;EACA;gBACA;EACA,oBAAA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;;AAEA,SAAA;AACA;EACA,qBAAA;EACA,wBAAA;EACA,2BAAA;CACA;AAEA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AAEA;CACA;AAEA;EACA;;WAEA;EACA,mBAAA;EACA,eAAA;EACA,0BAAA;EACA;2BACA;EACA,0BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,yBAAA;EACA,0BAAA;EACA,oCAAA;EACA,yBAAA;EACA;yBACA;CACA;AAEA;EACA,0BAAA;CACA;;AAEA,kBAAA;AACA;EACA,yBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'widget',\n      hasMargin && 'tab-margin',\n      tabTitles.length === 2 && !isSlot && type != 'third-group' && 'tab-padding-160',\n      tabTitles.length === 3 && !isSlot && type != 'third-group' && 'tab-padding-40',\n      isSlot && 'flex-expand-layout',\n      type == 'third-group' && 'thirdTabPanel'\n    ]\"\n    :style=\"{ backgroundColor: mergeStyleOption.bgColor }\"\n  >\n    <!-- 新增三类固定点击标签 third-group-->\n    <div\n      :class=\"['dof-third-panel']\"\n      v-if=\"type === 'third-group' && !_isColmo\"\n      :style=\"{ 'background-color': mergeStyleOption.bgColor }\"\n      :accessible=\"true\"\n      :aria-label=\"text\"\n    >\n      <div class=\"btn-group-wrap\" :style=\"wrapStyle\">\n        <text\n          v-for=\"(text, index) in tabTitles\"\n          :key=\"index\"\n          :class=\"[\n            'btn-text',\n            index == 0 && 'leftRadius',\n            index == tabTitles.length - 1 && 'rightRadius',\n            !disabled && pattern === 'text' && `dof-text-highlight-${type}`\n          ]\"\n          :data-index=\"index\"\n          :style=\"[\n            index < tabTitles.length - 1 ? verticalLineStyle : '',\n            textStyle,\n            index == tabCheckedIndex ? textBtnStyle(index) : ''\n          ]\"\n          @click=\"onTextClicked(index)\"\n          >{{ text }}</text\n        >\n      </div>\n    </div>\n    <dof-diamond-tab\n      v-if=\"type === 'third-group' && _isColmo\"\n      :tabData=\"tabTitles\"\n      :bgColor=\"'#151617'\"\n      :activeTextColor=\"'rgb(230, 230, 230)'\"\n      :touchColor=\"'rgb(26, 26, 26)'\"\n      :textFontSize=\"'28px'\"\n      :active=\"tabCheckedIndex\"\n      @tabActiveChange=\"tabActiveChange\"\n    />\n    <!-- 三级标签页 third 带了图标 以及文字有背景色和圆角-->\n    <scroller\n      :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n      :show-scrollbar=\"false\"\n      scroll-direction=\"horizontal\"\n      v-if=\"type === 'third'\"\n    >\n      <div\n        :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-8']\"\n        v-for=\"(v, index) in tabTitles\"\n        :key=\"index\"\n        :ref=\"'dof-tab-title-' + index\"\n        @click=\"onClicked(index, tabTitles.length - 1)\"\n      >\n        <div\n          class=\"tab-text-wrapper thidrd-wrapper\"\n          :style=\"{\n            backgroundColor:\n              currentPage === index\n                ? mergeStyleOption.activeBoxBgColor\n                : v.icon || v.activeIcon\n                ? 'transparent'\n                : mergeStyleOption.boxBgColor,\n            borderColor:\n              currentPage === index && mergeStyleOption.activeBorderColor\n                ? mergeStyleOption.activeBorderColor\n                : mergeStyleOption.borderColor\n          }\"\n        >\n          <image class=\"avatar-icon\" v-if=\"v.icon || v.activeIcon\" :src=\"currentPage === index ? v.activeIcon : v.icon\">\n          </image>\n          <text\n            class=\"tab-text third-text\"\n            :style=\"{\n              fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n              color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n            }\"\n            >{{ v.title }}</text\n          >\n        </div>\n      </div>\n    </scroller>\n    <!-- 一级和二级标签 else-->\n    <!-- :style=\"{backgroundColor: '#267aff'}\" -->\n    <scroller\n      :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n      :show-scrollbar=\"false\"\n      scroll-direction=\"horizontal\"\n      v-if=\"type !== 'third' && type !== 'third-group'\"\n    >\n      <div\n        :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-32', type == 'primary' && 'title-item-primary']\"\n        v-for=\"(v, index) in tabTitles\"\n        :key=\"index\"\n        :ref=\"'dof-tab-title-' + index\"\n        @click=\"onClicked(index, tabTitles.length - 1)\"\n      >\n        <div :class=\"['tab-text-wrapper', , isSlot && 'minibar-inner']\">\n          <div class=\"flexDirection\" :class=\"[v.hasDotNum && 'dot-num-tip-right']\">\n            <text\n              :class=\"['tab-text', 'dot-tab-text']\"\n              :style=\"{\n                fontSize: type === 'primary' ? '32px' : '28px',\n                fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n                color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n              }\"\n              >{{ v.title }}</text\n            >\n            <div v-if=\"v.hasDotTip\">\n              <div class=\"dot-tip\" :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : 'red' }\"></div>\n            </div>\n            <text\n              class=\"dot-num-tip-text\"\n              :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : 'red' }\"\n              v-else-if=\"v.hasDotNum\"\n              >{{ dotNum(v.hasDotNum, v.badgeMax) }}</text\n            >\n          </div>\n        </div>\n        <div\n          v-if=\"type !== 'third' && type !== 'third-group'\"\n          :class=\"[\n            type == 'primary' ? 'border-bottom-line' : 'border-bottom-line-secondary',\n            v.hasDotTip && 'dot-bottom-border',\n            v.hasDotNum && 'dotNum-bottom-borderWidth'\n          ]\"\n          :style=\"{\n            backgroundColor: currentPage === index ? mergeStyleOption.activeBottomColor : 'transparent'\n          }\"\n        ></div>\n      </div>\n    </scroller>\n  </div>\n</template>\n\n<script>\nconst dom = weex.requireModule('dom')\nimport { THEME_COLOR_SET } from '../../theme/config'\nimport ColmoMixin from '../../mixins/colmo'\nimport DofDiamondTab from '../dof-diamond-tab'\n\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofDiamondTab },\n  props: {\n    type: {\n      type: String,\n      default: 'secondary'\n    },\n    theme: {\n      type: String,\n      default: 'default'\n    },\n    isSlot: {\n      type: Boolean,\n      default: false\n    },\n    tabTitles: {\n      type: Array,\n      default: () => []\n    },\n    tabCheckedIndex: {\n      type: [Number, String],\n      default: 0\n    },\n    tabStyles: {\n      type: Object,\n      default: () => ({})\n    },\n    hasMargin: {\n      type: Boolean,\n      default: false\n    },\n    bgColor: {\n      type: String,\n      default: ''\n    }\n  },\n  data: () => ({\n    currentPage: 0\n  }),\n  computed: {\n    defaultStyleOption() {\n      const base = {\n        isActiveTitleBold: true,\n        iconWidth: 70,\n        iconHeight: 70,\n        height: 88,\n        fontSize: 24,\n        hasActiveBottom: true,\n        activeBottomColor: '#000000',\n        hasRightIcon: false\n      }\n      const defaultStyle = {\n        ...base,\n        bgColor: '#ffffff',\n        titleColor: '#8a8a8f',\n        activeTitleColor: '#000000',\n        boxBgColor: '#f2f2f2',\n        activeBoxBgColor: '#232323'\n      }\n      const colmoStyle = {\n        ...base,\n        isActiveTitleBold: false,\n        bgColor: '#151617',\n        titleColor: 'rgba(255,255,255,0.4)',\n        activeTitleColor: 'rgba(255,255,255,0.8);',\n        boxBgColor: '#151617',\n        activeBoxBgColor: '#151617',\n        activeBottomColor: '#B35336',\n        borderColor: 'rgba(51, 51, 51, 1)',\n        activeBorderColor: '#B35336'\n      }\n      return this._isColmo ? colmoStyle : defaultStyle\n    },\n    mergeStyleOption() {\n      let { type, theme, tabStyles, defaultStyleOption } = this\n      if (type === 'third') {\n        if (this._isColmo) {\n          let res = { ...defaultStyleOption, ...tabStyles }\n          if (this.bgColor) res.bgColor = this.bgColor\n          return res\n        }\n        if (theme === 'default') {\n          return {\n            ...defaultStyleOption,\n            ...{\n              activeTitleColor: '#ffffff',\n              titleColor: '#000000'\n            },\n            ...tabStyles\n          }\n        } else if (theme === 'primary') {\n          return {\n            ...defaultStyleOption,\n            ...tabStyles,\n            ...{\n              bgColor: THEME_COLOR_SET[theme],\n              // boxBgColor: '#5088ff',\n              boxBgColor: THEME_BOX_BGCOLOR_SET[theme],\n              activeBoxBgColor: '#ffffff',\n              titleColor: '#ffffff',\n              activeTitleColor: THEME_COLOR_SET[theme]\n            }\n          }\n        } else {\n          return { ...defaultStyleOption, ...tabStyles, ...{ boxBgColor: THEME_BOX_BGCOLOR_SET[theme] } }\n        }\n      } else if (type === 'third-group') {\n        if (this._isColmo) return { bgColor: '#151617' }\n        return { bgColor: THEME_COLOR_SET[theme] }\n      } else {\n        if (theme === 'default') {\n          let res = this.bgColor ? { bgColor: this.bgColor } : {}\n          return { ...defaultStyleOption, ...tabStyles, ...res }\n        } else {\n          return {\n            ...defaultStyleOption,\n            ...tabStyles,\n            ...{\n              bgColor: THEME_COLOR_SET[theme],\n              titleColor: 'rgba(255,255,255, 0.6)',\n              activeTitleColor: '#ffffff',\n              activeBottomColor: '#ffffff'\n            }\n          }\n        }\n      }\n    },\n\n    // 新增三类固定标签\n    wrapStyle() {\n      const { theme } = this\n      if (theme == 'default') {\n        return {\n          borderWidth: '2px',\n          borderStyle: 'solid',\n          borderColor: '#E5E5E8'\n        }\n      } else {\n        return {\n          borderWidth: '2px',\n          borderStyle: 'solid',\n          borderColor: 'rgba(255, 255, 255, 0.3)'\n        }\n      }\n    },\n\n    textStyle() {\n      const { theme } = this\n      if (theme == 'default') {\n        return {\n          color: '#8A8A8F'\n        }\n      } else {\n        return {\n          color: '#ffffff'\n        }\n      }\n    },\n    verticalLineStyle() {\n      const { theme } = this\n      if (theme == 'default') {\n        return {\n          borderRightWidth: '2px',\n          borderRightStyle: 'solid',\n          borderRightColor: '#E5E5E8'\n        }\n      } else {\n        return {\n          borderRightWidth: '2px',\n          borderRightStyle: 'solid',\n          borderRightColor: 'rgba(255, 255, 255, 0.3)'\n        }\n      }\n    },\n    textBtnStyle() {\n      const { theme } = this\n      let hackH = weex.config.env.platform == 'iOS' ? -1 : 2\n      return function(i) {\n        if (theme == 'default') {\n          return {\n            color: '#000000',\n            backgroundColor: '#E5E5E8',\n            marginTop: `${hackH}px`\n          }\n        } else {\n          return {\n            color: THEME_COLOR_SET[theme],\n            backgroundColor: '#FFFFFF',\n            marginTop: `${hackH}px`\n          }\n        }\n      }\n    }\n  },\n  methods: {\n    onClicked(index, len) {\n      this.currentPage = index\n      this.$emit('dofTabSelected', { index: index })\n      len > 4 && this._scrollToCurrentTab(index)\n    },\n    tabActiveChange(index) {\n      this.onClicked(index)\n    },\n    _scrollToCurrentTab(index) {\n      const currentTabEl = this.$refs[`dof-tab-title-${index}`][0]\n      const firstTabEl = this.$refs['dof-tab-title-0'][0]\n      const SAFE_DISTANCE = 16.3\n\n      dom.getComponentRect(currentTabEl, res => {\n        let {\n          size: { height, width = 110, left }\n        } = res\n        const appearNum = Math.floor(750 / (width + SAFE_DISTANCE))\n        let offset = (-(750 - width) / 2) | 0\n\n        if (index + 1 < appearNum) {\n          dom.scrollToElement(firstTabEl, {\n            offset: -16.3\n          })\n        } else {\n          dom.scrollToElement(currentTabEl, {\n            offset,\n            animated: true\n          })\n        }\n      })\n    },\n    // 三类固定\n    onTextClicked(index) {\n      // weex下不能完成事件委托\n      this.tabCheckedIndex = index\n      this.$emit('dofTabSelected', { index: index })\n    },\n    dotNum(content, max) {\n      let value = ''\n      let curContent = Number(content)\n      if (max && curContent >= max) {\n        value = `${max}+`\n      } else {\n        value = content\n      }\n      return value\n    }\n  },\n  watch: {\n    tabCheckedIndex: {\n      handler(n, o) {\n        let len = this.tabTitles.length - 1\n        len >= +n ? (this.currentPage = +n) : (this.currentPage = len)\n        if (len > 4) {\n          this.$nextTick(() => {\n            this._scrollToCurrentTab(n)\n          })\n        }\n      },\n      immediate: true\n    }\n  }\n}\n</script>\n\n<style scoped>\n.widget {\n  /* background-color: #ffffff; */\n  height: 88px;\n}\n\n.tab-margin {\n  margin-bottom: 16px;\n}\n\n.tab-padding-160 {\n  padding: 0 160px;\n}\n\n.tab-padding-40 {\n  padding: 0 40px;\n}\n\n.flex-expand-layout {\n  flex: 1;\n}\n\n.tab-title-list {\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0 16px;\n}\n\n.space-around-layout {\n  justify-content: space-around;\n}\n\n.padding-layout-32 {\n  padding: 0 32px;\n}\n\n.padding-layout-8 {\n  padding: 0 8px;\n}\n\n.title-item {\n  height: 88px;\n  justify-content: center;\n  align-items: stretch;\n  border-bottom-style: solid;\n  /* border-width: 1px; */\n}\n\n.title-item-primary {\n  align-items: center;\n}\n\n.tab-text-wrapper {\n  height: 82px;\n  justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner {\n  height: 76px;\n}\n\n.thidrd-wrapper {\n  flex-direction: row;\n  height: 52px;\n  padding: 0 30px;\n  border-radius: 26px;\n  /* background-color: #232323; */\n  justify-content: center;\n  align-items: center;\n}\n\n.avatar-icon {\n  width: 36px;\n  height: 36px;\n  margin-right: 8px;\n}\n\n.tab-text {\n  lines: 1;\n  text-overflow: ellipsis;\n  font-family: PingFangSC-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\n}\n\n.third-text {\n  font-size: 24px;\n  /* color: #000000; */\n}\n\n.border-bottom-line {\n  width: 40px;\n  height: 6px;\n  border-radius: 3px;\n  margin-top: -10px;\n  /* margin-left: 10px; */\n  /* background-color: transparent; */\n}\n\n.border-bottom-line-secondary {\n  height: 4px;\n  border-radius: 3px;\n  margin-top: -2px;\n  /* background-color: transparent; */\n}\n\n.dot-bottom-border {\n  /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n\n.thirdTabPanel {\n  height: 128px;\n}\n\n.dof-third-panel {\n  /* width: 750px; */\n  height: 128px;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  opacity: 1;\n}\n\n.btn-group-wrap {\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  border-radius: 64px;\n  /* overflow: hidden; */\n}\n\n.btn-text {\n  font-family: PingFangSC-Medium;\n  color: #ffffff;\n  font-size: 28px;\n  line-height: 64px;\n  padding-left: 32px;\n  padding-right: 32px;\n}\n\n.leftRadius {\n  border-top-left-radius: 32px;\n  border-bottom-left-radius: 32px;\n}\n\n.rightRadius {\n  border-top-right-radius: 32px;\n  border-bottom-right-radius: 32px;\n}\n\n.dot-tip {\n  /* position: absolute; */\n  /* top: 34px;\n  right: 0px; */\n  margin-top: 6px;\n  width: 16px;\n  height: 16px;\n  border-radius: 10px;\n  background-color: #ff3b30;\n}\n\n/* 小红点 */\n.dot-tab-text {\n  /* margin-top:8px; */\n  padding-top: 10px;\n  padding-bottom: 8px;\n}\n\n.flexDirection {\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  align-items: flex-start;\n}\n\n.flexCoulmn {\n}\n\n.dot-num-tip-text {\n  /* position:absolute;\n  right: 0px;\n  top:0; */\n  font-size: 24px;\n  color: #ffffff;\n  border-radius: 100px;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  align-items: center;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  /* transform: translate(100%, 0); */\n  margin-left: -16px;\n  /* padding-top: 8px;\n  padding-bottom: 8px; */\n}\n\n.dot-num-tip-right {\n  /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth {\n  /* margin-right: 60px; */\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n",null],"sourceRoot":""}]);
+exports.push([module.i, "\n.widget[data-v-401fdb82] {\n  /* background-color: #ffffff; */\n  height: 1.17333rem;\n}\n.tab-margin[data-v-401fdb82] {\n  margin-bottom: 0.21333rem;\n}\n.tab-padding-160[data-v-401fdb82] {\n  padding: 0 2.13333rem;\n}\n.tab-padding-40[data-v-401fdb82] {\n  padding: 0 0.53333rem;\n}\n.flex-expand-layout[data-v-401fdb82] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.tab-title-list[data-v-401fdb82] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n  padding: 0 0.21333rem;\n}\n.space-around-layout[data-v-401fdb82] {\n  -webkit-justify-content: space-around;\n          justify-content: space-around;\n}\n.padding-layout-32[data-v-401fdb82] {\n  padding: 0 0.42667rem;\n}\n.padding-layout-8[data-v-401fdb82] {\n  padding: 0 0.10667rem;\n}\n.title-item[data-v-401fdb82] {\n  height: 1.17333rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: stretch;\n  -webkit-align-items: stretch;\n          align-items: stretch;\n  border-bottom-style: solid;\n  /* border-width: 1px; */\n}\n.title-item-primary[data-v-401fdb82] {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.tab-text-wrapper[data-v-401fdb82] {\n  height: 1.09333rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner[data-v-401fdb82] {\n  height: 1.01333rem;\n}\n.thidrd-wrapper[data-v-401fdb82] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  height: 0.69333rem;\n  padding: 0 0.4rem;\n  border-radius: 0.34667rem;\n  /* background-color: #232323; */\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.avatar-icon[data-v-401fdb82] {\n  width: 0.48rem;\n  height: 0.48rem;\n  margin-right: 0.10667rem;\n}\n.tab-text[data-v-401fdb82] {\n  lines: 1;\n  text-overflow: ellipsis;\n  font-family: PingFangSC-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n.third-text[data-v-401fdb82] {\n  font-size: 0.32rem;\n  /* color: #000000; */\n}\n.border-bottom-line[data-v-401fdb82] {\n  width: 0.53333rem;\n  height: 0.08rem;\n  border-radius: 0.04rem;\n  margin-top: -0.13333rem;\n  /* margin-left: 10px; */\n  /* background-color: transparent; */\n}\n.border-bottom-line-secondary[data-v-401fdb82] {\n  height: 0.05333rem;\n  border-radius: 0.04rem;\n  margin-top: -0.02667rem;\n  /* background-color: transparent; */\n}\n.dot-bottom-border[data-v-401fdb82] {\n  /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n.thirdTabPanel[data-v-401fdb82] {\n  height: 1.70667rem;\n}\n.dof-third-panel[data-v-401fdb82] {\n  /* width: 750px; */\n  height: 1.70667rem;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  opacity: 1;\n}\n.btn-group-wrap[data-v-401fdb82] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  border-radius: 0.85333rem;\n  /* overflow: hidden; */\n}\n.btn-text[data-v-401fdb82] {\n  font-family: PingFangSC-Medium;\n  color: #ffffff;\n  font-size: 0.37333rem;\n  line-height: 0.85333rem;\n  padding-left: 0.42667rem;\n  padding-right: 0.42667rem;\n}\n.leftRadius[data-v-401fdb82] {\n  border-top-left-radius: 0.42667rem;\n  border-bottom-left-radius: 0.42667rem;\n}\n.rightRadius[data-v-401fdb82] {\n  border-top-right-radius: 0.42667rem;\n  border-bottom-right-radius: 0.42667rem;\n}\n.dot-tip[data-v-401fdb82] {\n  /* position: absolute; */\n  /* top: 34px;\n  right: 0px; */\n  margin-top: 0.08rem;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  border-radius: 0.13333rem;\n  background-color: #ff3b30;\n}\n\n/* 小红点 */\n.dot-tab-text[data-v-401fdb82] {\n  /* margin-top:8px; */\n  padding-top: 0.13333rem;\n  padding-bottom: 0.10667rem;\n}\n.flexDirection[data-v-401fdb82] {\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-align: start;\n  -webkit-align-items: flex-start;\n          align-items: flex-start;\n}\n.flexCoulmn[data-v-401fdb82] {\n}\n.dot-num-tip-text[data-v-401fdb82] {\n  /* position:absolute;\n  right: 0px;\n  top:0; */\n  font-size: 0.32rem;\n  color: #ffffff;\n  border-radius: 1.33333rem;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.10667rem;\n  padding-right: 0.10667rem;\n  /* transform: translate(100%, 0); */\n  margin-left: -0.21333rem;\n  /* padding-top: 8px;\n  padding-bottom: 8px; */\n}\n.dot-num-tip-right[data-v-401fdb82] {\n  /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth[data-v-401fdb82] {\n  /* margin-right: 60px; */\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/index.vue?1a0e3b31","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/<no source>"],"names":[],"mappings":";AA+ZA;EACA,gCAAA;EACA,mBAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,sBAAA;CACA;AAEA;EACA,sCAAA;UAAA,8BAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;EACA,2BAAA;EACA,wBAAA;CACA;AAEA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;;AAEA,4BAAA;AACA;EACA,mBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,kBAAA;EACA,0BAAA;EACA,gCAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,yBAAA;CACA;AAEA;EACA,SAAA;EACA,wBAAA;EACA,+BAAA;EACA,kBAAA;EACA,qBAAA;ECjfA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDkfA;AAEA;EACA,mBAAA;EACA,qBAAA;CACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,wBAAA;EACA,wBAAA;EACA,oCAAA;CACA;AAEA;EACA,mBAAA;EACA,uBAAA;EACA,wBAAA;EACA,oCAAA;CACA;AAEA;EACA,yBAAA;CACA;;AAEA,cAAA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,WAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EACA,uBAAA;CACA;AAEA;EACA,+BAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,yBAAA;EACA,0BAAA;CACA;AAEA;EACA,mCAAA;EACA,sCAAA;CACA;AAEA;EACA,oCAAA;EACA,uCAAA;CACA;AAEA;EACA,yBAAA;EACA;gBACA;EACA,oBAAA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;;AAEA,SAAA;AACA;EACA,qBAAA;EACA,wBAAA;EACA,2BAAA;CACA;AAEA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AAEA;CACA;AAEA;EACA;;WAEA;EACA,mBAAA;EACA,eAAA;EACA,0BAAA;EACA;2BACA;EACA,0BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,yBAAA;EACA,0BAAA;EACA,oCAAA;EACA,yBAAA;EACA;yBACA;CACA;AAEA;EACA,0BAAA;CACA;;AAEA,kBAAA;AACA;EACA,yBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'widget',\n      hasMargin && 'tab-margin',\n      tabTitles.length === 2 && !isSlot && type != 'third-group' && 'tab-padding-160',\n      tabTitles.length === 3 && !isSlot && type != 'third-group' && 'tab-padding-40',\n      isSlot && 'flex-expand-layout',\n      type == 'third-group' && 'thirdTabPanel'\n    ]\"\n    :style=\"{ backgroundColor: mergeStyleOption.bgColor }\"\n  >\n    <!-- 新增三类固定点击标签 third-group-->\n    <div\n      :class=\"['dof-third-panel']\"\n      v-if=\"type === 'third-group' && !_isColmo\"\n      :style=\"{ 'background-color': mergeStyleOption.bgColor }\"\n      :accessible=\"true\"\n      :aria-label=\"text\"\n    >\n      <div class=\"btn-group-wrap\" :style=\"wrapStyle\">\n        <text\n          v-for=\"(text, index) in tabTitles\"\n          :key=\"index\"\n          :class=\"[\n            'btn-text',\n            index == 0 && 'leftRadius',\n            index == tabTitles.length - 1 && 'rightRadius',\n            !disabled && pattern === 'text' && `dof-text-highlight-${type}`\n          ]\"\n          :data-index=\"index\"\n          :style=\"[\n            index < tabTitles.length - 1 ? verticalLineStyle : '',\n            textStyle,\n            index == tabCheckedIndex ? textBtnStyle(index) : ''\n          ]\"\n          @click=\"onTextClicked(index)\"\n          >{{ text }}</text\n        >\n      </div>\n    </div>\n    <dof-diamond-tab\n      v-if=\"type === 'third-group' && _isColmo\"\n      :tabData=\"tabTitles\"\n      :bgColor=\"'#151617'\"\n      :activeTextColor=\"'rgb(230, 230, 230)'\"\n      :touchColor=\"'rgb(26, 26, 26)'\"\n      :textFontSize=\"'28px'\"\n      :active=\"tabCheckedIndex\"\n      @tabActiveChange=\"tabActiveChange\"\n    />\n    <!-- 三级标签页 third 带了图标 以及文字有背景色和圆角-->\n    <scroller\n      :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n      :show-scrollbar=\"false\"\n      scroll-direction=\"horizontal\"\n      v-if=\"type === 'third'\"\n    >\n      <div\n        :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-8']\"\n        v-for=\"(v, index) in tabTitles\"\n        :key=\"index\"\n        :ref=\"'dof-tab-title-' + index\"\n        @click=\"onClicked(index, tabTitles.length - 1)\"\n      >\n        <div\n          class=\"tab-text-wrapper thidrd-wrapper\"\n          :style=\"{\n            backgroundColor:\n              currentPage === index\n                ? mergeStyleOption.activeBoxBgColor\n                : v.icon || v.activeIcon\n                ? 'transparent'\n                : mergeStyleOption.boxBgColor,\n            borderColor:\n              currentPage === index && mergeStyleOption.activeBorderColor\n                ? mergeStyleOption.activeBorderColor\n                : mergeStyleOption.borderColor\n          }\"\n        >\n          <image class=\"avatar-icon\" v-if=\"v.icon || v.activeIcon\" :src=\"currentPage === index ? v.activeIcon : v.icon\">\n          </image>\n          <text\n            class=\"tab-text third-text\"\n            :style=\"{\n              fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n              color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n            }\"\n            >{{ v.title }}</text\n          >\n        </div>\n      </div>\n    </scroller>\n    <!-- 一级和二级标签 else-->\n    <!-- :style=\"{backgroundColor: '#267aff'}\" -->\n    <scroller\n      :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n      :show-scrollbar=\"false\"\n      scroll-direction=\"horizontal\"\n      v-if=\"type !== 'third' && type !== 'third-group'\"\n    >\n      <div\n        :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-32', type == 'primary' && 'title-item-primary']\"\n        v-for=\"(v, index) in tabTitles\"\n        :key=\"index\"\n        :ref=\"'dof-tab-title-' + index\"\n        @click=\"onClicked(index, tabTitles.length - 1)\"\n      >\n        <div :class=\"['tab-text-wrapper', , isSlot && 'minibar-inner']\">\n          <div class=\"flexDirection\" :class=\"[v.hasDotNum && 'dot-num-tip-right']\">\n            <text\n              :class=\"['tab-text', 'dot-tab-text']\"\n              :style=\"{\n                fontSize: type === 'primary' ? '32px' : '28px',\n                fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n                color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n              }\"\n              >{{ v.title }}</text\n            >\n            <div v-if=\"v.hasDotTip\">\n              <div class=\"dot-tip\" :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : 'red' }\"></div>\n            </div>\n            <text\n              class=\"dot-num-tip-text\"\n              :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : 'red' }\"\n              v-else-if=\"v.hasDotNum\"\n              >{{ dotNum(v.hasDotNum, v.badgeMax) }}</text\n            >\n          </div>\n        </div>\n        <div\n          v-if=\"type !== 'third' && type !== 'third-group'\"\n          :class=\"[\n            type == 'primary' ? 'border-bottom-line' : 'border-bottom-line-secondary',\n            v.hasDotTip && 'dot-bottom-border',\n            v.hasDotNum && 'dotNum-bottom-borderWidth'\n          ]\"\n          :style=\"{\n            backgroundColor: currentPage === index ? mergeStyleOption.activeBottomColor : 'transparent'\n          }\"\n        ></div>\n      </div>\n    </scroller>\n  </div>\n</template>\n\n<script>\nconst dom = weex.requireModule('dom')\nimport { THEME_COLOR_SET } from '../../theme/config'\nimport ColmoMixin from '../../mixins/colmo'\nimport DofDiamondTab from '../dof-diamond-tab'\n\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofDiamondTab },\n  props: {\n    type: {\n      type: String,\n      default: 'secondary'\n    },\n    theme: {\n      type: String,\n      default: 'default'\n    },\n    isSlot: {\n      type: Boolean,\n      default: false\n    },\n    tabTitles: {\n      type: Array,\n      default: () => []\n    },\n    tabCheckedIndex: {\n      type: [Number, String],\n      default: 0\n    },\n    tabStyles: {\n      type: Object,\n      default: () => ({})\n    },\n    hasMargin: {\n      type: Boolean,\n      default: false\n    },\n    bgColor: {\n      type: String,\n      default: ''\n    }\n  },\n  data: () => ({\n    currentPage: 0\n  }),\n  computed: {\n    defaultStyleOption() {\n      const base = {\n        isActiveTitleBold: true,\n        iconWidth: 70,\n        iconHeight: 70,\n        height: 88,\n        fontSize: 24,\n        hasActiveBottom: true,\n        activeBottomColor: '#000000',\n        hasRightIcon: false\n      }\n      const defaultStyle = {\n        ...base,\n        bgColor: '#ffffff',\n        titleColor: '#8a8a8f',\n        activeTitleColor: '#000000',\n        boxBgColor: '#f2f2f2',\n        activeBoxBgColor: '#232323'\n      }\n      const colmoStyle = {\n        ...base,\n        isActiveTitleBold: false,\n        bgColor: '#151617',\n        titleColor: 'rgba(255,255,255,0.4)',\n        activeTitleColor: 'rgba(255,255,255,0.8)',\n        boxBgColor: '#151617',\n        activeBoxBgColor: '#151617',\n        activeBottomColor: '#B35336',\n        borderColor: 'rgba(51, 51, 51, 1)',\n        activeBorderColor: '#B35336'\n      }\n      return this._isColmo ? colmoStyle : defaultStyle\n    },\n    mergeStyleOption() {\n      let { type, theme, tabStyles, defaultStyleOption } = this\n      if (type === 'third') {\n        if (this._isColmo) {\n          let res = { ...defaultStyleOption, ...tabStyles }\n          if (this.bgColor) res.bgColor = this.bgColor\n          return res\n        }\n        if (theme === 'default') {\n          return {\n            ...defaultStyleOption,\n            ...{\n              activeTitleColor: '#ffffff',\n              titleColor: '#000000'\n            },\n            ...tabStyles\n          }\n        } else if (theme === 'primary') {\n          return {\n            ...defaultStyleOption,\n            ...tabStyles,\n            ...{\n              bgColor: THEME_COLOR_SET[theme],\n              // boxBgColor: '#5088ff',\n              boxBgColor: THEME_BOX_BGCOLOR_SET[theme],\n              activeBoxBgColor: '#ffffff',\n              titleColor: '#ffffff',\n              activeTitleColor: THEME_COLOR_SET[theme]\n            }\n          }\n        } else {\n          return { ...defaultStyleOption, ...tabStyles, ...{ boxBgColor: THEME_BOX_BGCOLOR_SET[theme] } }\n        }\n      } else if (type === 'third-group') {\n        if (this._isColmo) return { bgColor: '#151617' }\n        return { bgColor: THEME_COLOR_SET[theme] }\n      } else {\n        if (theme === 'default') {\n          let res = this.bgColor ? { bgColor: this.bgColor } : {}\n          return { ...defaultStyleOption, ...tabStyles, ...res }\n        } else {\n          return {\n            ...defaultStyleOption,\n            ...tabStyles,\n            ...{\n              bgColor: THEME_COLOR_SET[theme],\n              titleColor: 'rgba(255,255,255, 0.6)',\n              activeTitleColor: '#ffffff',\n              activeBottomColor: '#ffffff'\n            }\n          }\n        }\n      }\n    },\n\n    // 新增三类固定标签\n    wrapStyle() {\n      const { theme } = this\n      if (theme == 'default') {\n        return {\n          borderWidth: '2px',\n          borderStyle: 'solid',\n          borderColor: '#E5E5E8'\n        }\n      } else {\n        return {\n          borderWidth: '2px',\n          borderStyle: 'solid',\n          borderColor: 'rgba(255, 255, 255, 0.3)'\n        }\n      }\n    },\n\n    textStyle() {\n      const { theme } = this\n      if (theme == 'default') {\n        return {\n          color: '#8A8A8F'\n        }\n      } else {\n        return {\n          color: '#ffffff'\n        }\n      }\n    },\n    verticalLineStyle() {\n      const { theme } = this\n      if (theme == 'default') {\n        return {\n          borderRightWidth: '2px',\n          borderRightStyle: 'solid',\n          borderRightColor: '#E5E5E8'\n        }\n      } else {\n        return {\n          borderRightWidth: '2px',\n          borderRightStyle: 'solid',\n          borderRightColor: 'rgba(255, 255, 255, 0.3)'\n        }\n      }\n    },\n    textBtnStyle() {\n      const { theme } = this\n      let hackH = weex.config.env.platform == 'iOS' ? -1 : 2\n      return function(i) {\n        if (theme == 'default') {\n          return {\n            color: '#000000',\n            backgroundColor: '#E5E5E8',\n            marginTop: `${hackH}px`\n          }\n        } else {\n          return {\n            color: THEME_COLOR_SET[theme],\n            backgroundColor: '#FFFFFF',\n            marginTop: `${hackH}px`\n          }\n        }\n      }\n    }\n  },\n  methods: {\n    onClicked(index, len) {\n      this.currentPage = index\n      this.$emit('dofTabSelected', { index: index })\n      len > 4 && this._scrollToCurrentTab(index)\n    },\n    tabActiveChange(index) {\n      this.onClicked(index)\n    },\n    _scrollToCurrentTab(index) {\n      const currentTabEl = this.$refs[`dof-tab-title-${index}`][0]\n      const firstTabEl = this.$refs['dof-tab-title-0'][0]\n      const SAFE_DISTANCE = 16.3\n\n      dom.getComponentRect(currentTabEl, res => {\n        let {\n          size: { height, width = 110, left }\n        } = res\n        const appearNum = Math.floor(750 / (width + SAFE_DISTANCE))\n        let offset = (-(750 - width) / 2) | 0\n\n        if (index + 1 < appearNum) {\n          dom.scrollToElement(firstTabEl, {\n            offset: -16.3\n          })\n        } else {\n          dom.scrollToElement(currentTabEl, {\n            offset,\n            animated: true\n          })\n        }\n      })\n    },\n    // 三类固定\n    onTextClicked(index) {\n      // weex下不能完成事件委托\n      this.tabCheckedIndex = index\n      this.$emit('dofTabSelected', { index: index })\n    },\n    dotNum(content, max) {\n      let value = ''\n      let curContent = Number(content)\n      if (max && curContent >= max) {\n        value = `${max}+`\n      } else {\n        value = content\n      }\n      return value\n    }\n  },\n  watch: {\n    tabCheckedIndex: {\n      handler(n, o) {\n        let len = this.tabTitles.length - 1\n        len >= +n ? (this.currentPage = +n) : (this.currentPage = len)\n        if (len > 4) {\n          this.$nextTick(() => {\n            this._scrollToCurrentTab(n)\n          })\n        }\n      },\n      immediate: true\n    }\n  }\n}\n</script>\n\n<style scoped>\n.widget {\n  /* background-color: #ffffff; */\n  height: 88px;\n}\n\n.tab-margin {\n  margin-bottom: 16px;\n}\n\n.tab-padding-160 {\n  padding: 0 160px;\n}\n\n.tab-padding-40 {\n  padding: 0 40px;\n}\n\n.flex-expand-layout {\n  flex: 1;\n}\n\n.tab-title-list {\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0 16px;\n}\n\n.space-around-layout {\n  justify-content: space-around;\n}\n\n.padding-layout-32 {\n  padding: 0 32px;\n}\n\n.padding-layout-8 {\n  padding: 0 8px;\n}\n\n.title-item {\n  height: 88px;\n  justify-content: center;\n  align-items: stretch;\n  border-bottom-style: solid;\n  /* border-width: 1px; */\n}\n\n.title-item-primary {\n  align-items: center;\n}\n\n.tab-text-wrapper {\n  height: 82px;\n  justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner {\n  height: 76px;\n}\n\n.thidrd-wrapper {\n  flex-direction: row;\n  height: 52px;\n  padding: 0 30px;\n  border-radius: 26px;\n  /* background-color: #232323; */\n  justify-content: center;\n  align-items: center;\n}\n\n.avatar-icon {\n  width: 36px;\n  height: 36px;\n  margin-right: 8px;\n}\n\n.tab-text {\n  lines: 1;\n  text-overflow: ellipsis;\n  font-family: PingFangSC-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\n}\n\n.third-text {\n  font-size: 24px;\n  /* color: #000000; */\n}\n\n.border-bottom-line {\n  width: 40px;\n  height: 6px;\n  border-radius: 3px;\n  margin-top: -10px;\n  /* margin-left: 10px; */\n  /* background-color: transparent; */\n}\n\n.border-bottom-line-secondary {\n  height: 4px;\n  border-radius: 3px;\n  margin-top: -2px;\n  /* background-color: transparent; */\n}\n\n.dot-bottom-border {\n  /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n\n.thirdTabPanel {\n  height: 128px;\n}\n\n.dof-third-panel {\n  /* width: 750px; */\n  height: 128px;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  opacity: 1;\n}\n\n.btn-group-wrap {\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  border-radius: 64px;\n  /* overflow: hidden; */\n}\n\n.btn-text {\n  font-family: PingFangSC-Medium;\n  color: #ffffff;\n  font-size: 28px;\n  line-height: 64px;\n  padding-left: 32px;\n  padding-right: 32px;\n}\n\n.leftRadius {\n  border-top-left-radius: 32px;\n  border-bottom-left-radius: 32px;\n}\n\n.rightRadius {\n  border-top-right-radius: 32px;\n  border-bottom-right-radius: 32px;\n}\n\n.dot-tip {\n  /* position: absolute; */\n  /* top: 34px;\n  right: 0px; */\n  margin-top: 6px;\n  width: 16px;\n  height: 16px;\n  border-radius: 10px;\n  background-color: #ff3b30;\n}\n\n/* 小红点 */\n.dot-tab-text {\n  /* margin-top:8px; */\n  padding-top: 10px;\n  padding-bottom: 8px;\n}\n\n.flexDirection {\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  align-items: flex-start;\n}\n\n.flexCoulmn {\n}\n\n.dot-num-tip-text {\n  /* position:absolute;\n  right: 0px;\n  top:0; */\n  font-size: 24px;\n  color: #ffffff;\n  border-radius: 100px;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  align-items: center;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  /* transform: translate(100%, 0); */\n  margin-left: -16px;\n  /* padding-top: 8px;\n  padding-bottom: 8px; */\n}\n\n.dot-num-tip-right {\n  /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth {\n  /* margin-right: 60px; */\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n",null],"sourceRoot":""}]);
 
 // exports
 
@@ -8709,7 +8709,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.container[data-v-59d06228] {\n  /* width: 750px; */\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n\n/* .mask {\n    top: 0;\n    width: 750px;\n    justify-content: center;\n    align-items: center;\n} */\n.wrapper[data-v-59d06228] {\n  position: fixed;\n  top: 0px;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  /* width: 750px; */\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.modal-box[data-v-59d06228] {\n  /* background-color: #ffffff; */\n  width: 7.2rem;\n  /* border-radius: 26px; */\n  z-index: 100;\n  position: relative;\n}\n.modal-content[data-v-59d06228] {\n  padding-top: 0.48rem;\n  padding-bottom: 0.42667rem;\n  padding-left: 0.42667rem;\n  padding-right: 0.42667rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.content-title[data-v-59d06228] {\n  font-family: PingFangSC-Medium;\n  color: #000000;\n  font-size: 0.42667rem;\n  text-align: center;\n  /* margin-bottom: 24px; */\n  line-height: 0.64rem;\n\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  word-break: break-all;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n.content-image[data-v-59d06228] {\n  width: 6.34667rem;\n  height: 6.34667rem;\n}\n.content-subtext[data-v-59d06228] {\n  font-family: PingFangSC-Regular;\n  /* color: #111111; */\n  font-size: 0.34667rem;\n  line-height: 0.42667rem;\n  margin-top: 0.21333rem;\n  text-align: center;\n}\n.search-bar-input[data-v-59d06228] {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0.13333rem;\n  padding-left: 0.13333rem;\n  margin-top: 0.53333rem;\n  font-size: 0.37333rem;\n  width: 6.34667rem;\n  /* height: 48px; */\n  height: 0.85333rem;\n  line-height: 0.85333rem;\n  background-color: #ffffff;\n  placeholder-color: #8c8c8c;\n  /* border: 2px solid #9F9F9F;  无效 */\n  border-color: #9f9f9f;\n  border-width: 1px;\n  border-style: solid;\n}\n.search-bar-input[data-v-59d06228]::-webkit-input-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]:-moz-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]::-moz-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]:-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]:placeholder-shown {\n  color: #8c8c8c;\n}\n\n/* weex-native中无效 */\n/* input::-webkit-input-placeholder{\n    color: #8C8C8C;\n  } */\n.search-bar-input[data-v-59d06228]:active {\n  border: 1px solid #9f9f9f !important;\n}\n.modal-footer[data-v-59d06228] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  /*H5处理兼容*/\n}\n.footer-btn[data-v-59d06228] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  height: 1.2rem;\n  position: relative;\n}\n.cancel[data-v-59d06228] {\n  /* border-right-color: #c8c7cc; */\n  border-right-width: 1px;\n  /*H5处理兼容*/\n  border-right: 1px solid #f3f3f3;\n}\n.btn-text[data-v-59d06228] {\n  font-family: PingFangSC-Regular;\n  font-size: 0.48rem;\n  color: #666666;\n}\n.more-btn[data-v-59d06228] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n}\n.footer-more-btn[data-v-59d06228] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: columns;\n          flex-direction: columns;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  height: 1.2rem;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  position: relative;\n}\n.closeIconBox[data-v-59d06228] {\n  position: absolute;\n  width: 0.8rem;\n  height: 0.8rem;\n  top: 0.33333rem;\n  right: 0;\n}\n.closeIcon[data-v-59d06228] {\n  position: absolute;\n  width: 0.26667rem;\n  height: 0.26667rem;\n  bottom: 0px;\n  left: 0px;\n}\n.closeIconFont[data-v-59d06228] {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n}\n.mask[data-v-59d06228] {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-modal/index.vue?8b394bea","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-modal/<no source>"],"names":[],"mappings":";AAgFA;EACA,mBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;;AAEA;;;;;IAKA;AACA;EACA,gBAAA;EACA,SAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EACA,mBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,gCAAA;EACA,cAAA;EACA,0BAAA;EACA,aAAA;EACA,mBAAA;CACA;AAEA;EACA,qBAAA;EACA,2BAAA;EACA,yBAAA;EACA,0BAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,+BAAA;EACA,eAAA;EACA,sBAAA;EACA,mBAAA;EACA,0BAAA;EACA,qBAAA;;EAEA,SAAA;EACA,wBAAA;EACA,iBAAA;EACA,sBAAA;ECpIA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDqIA;AAEA;EACA,kBAAA;EACA,mBAAA;CACA;AAEA;EACA,gCAAA;EACA,qBAAA;EACA,sBAAA;EACA,wBAAA;EACA,uBAAA;EACA,mBAAA;CACA;AAEA;EACA,eAAA;EACA,kBAAA;EACA,0BAAA;EACA,yBAAA;EACA,uBAAA;EACA,sBAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,0BAAA;EACA,2BAAA;EACA,oCAAA;EACA,sBAAA;EACA,kBAAA;EACA,oBAAA;CACA;ACtKA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;;ADwKA,oBAAA;AACA;;MAEA;AAEA;EACA,qCAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,gCAAA;EACA,sBAAA;EACA,UAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,eAAA;EACA,mBAAA;CACA;AAEA;EACA,kCAAA;EACA,wBAAA;EACA,UAAA;EACA,gCAAA;CACA;AAEA;EACA,gCAAA;EACA,mBAAA;EACA,eAAA;CACA;AAEA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;CACA;AAEA;EACA,6BAAA;EAAA,8BAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,eAAA;EACA,gCAAA;EACA,sBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,SAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;EACA,YAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,QAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"container\">\n    <dof-overlay :show=\"show\" :hasAnimation=\"false\" v-if=\"show\"></dof-overlay>\n    <div v-if=\"show\" class=\"wrapper\" @click=\"layoutClick\">\n      <div class=\"modal-box\" @click=\"() => {}\" :style=\"_modalStyle\">\n        <div class=\"modal-content\" :style=\"modalContentStyle\">\n          <slot name=\"title\">\n            <text v-if=\"title\" class=\"content-title\">{{ title }}</text>\n          </slot>\n          <slot name=\"image\">\n            <image v-if=\"image\" class=\"content-image\" resize=\"cover\" :src=\"image\" :style=\"imgStyle\"></image>\n          </slot>\n          <slot name=\"content\">\n            <text\n              v-if=\"content\"\n              class=\"content-subtext\"\n              :style=\"{\n                fontFamily: _isColmo ? 'PingFangSC-Regular' : title ? 'PingFangSC-Regular' : 'PingFangSC-Medium',\n                color: _subTextColor\n              }\"\n              >{{ content }}</text\n            >\n          </slot>\n          <slot name=\"input\">\n            <input v-if=\"hasInput\" :placeholder=\"placeholder\" v-model=\"inputContent\" class=\"search-bar-input\" />\n          </slot>\n        </div>\n\n        <div\n          v-if=\"btnGroup && btnGroup.length == 0\"\n          class=\"modal-footer\"\n          :style=\"{ borderTopColor: _modalFooterBorderColor }\"\n        >\n          <div class=\"footer-btn cancel\" v-if=\"!single\" :style=\"{ borderRightColor: _modalFooterBorderColor }\">\n            <text class=\"btn-text\" :style=\"{ color: _secondBtnColor }\">{{ cancelText }}</text>\n            <div class=\"mask\" @click=\"cancelClicked\"></div>\n          </div>\n          <div class=\"footer-btn confirm\">\n            <text\n              class=\"btn-text\"\n              :style=\"{\n                color: mainBtnColor ? mainBtnColor : _isColmo ? '#B35336' : '#267aff',\n                fontFamily: _isColmo ? 'PingFangSC-Regular' : 'PingFangSC-Medium'\n              }\"\n              >{{ confirmText }}</text\n            >\n            <div class=\"mask\" @click=\"primaryClicked\"></div>\n          </div>\n        </div>\n\n        <div v-if=\"btnGroup && btnGroup.length > 0\" class=\"more-btn\">\n          <div\n            class=\"footer-more-btn\"\n            :key=\"index\"\n            v-for=\"(item, index) in btnGroup\"\n            :style=\"{ borderTopColor: _modalFooterBorderColor }\"\n          >\n            <text class=\"btn-text\" :style=\"{ color: item.color ? item.color : _secondBtnColor }\">{{\n              item.text || item\n            }}</text>\n            <div class=\"mask\" @click=\"moreBtnClicked(index, item)\"></div>\n          </div>\n        </div>\n        <div class=\"closeIconBox\" v-if=\"closeIcon || isShowCloseIcon\" @click=\"closeIconClick\">\n          <image v-if=\"closeIcon\" :src=\"closeIcon\" class=\"closeIcon\"></image>\n          <dof-iconfont\n            v-else\n            class=\"closeIconFont\"\n            :code=\"'\\u4725'\"\n            :size=\"48\"\n            :color=\"_isColmo ? 'rgba(255,255,255,0.80)' : '#333'\"\n            @dofIconFontClicked=\"closeIconClick\"\n          ></dof-iconfont>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.container {\n  /* width: 750px; */\n  align-items: center;\n  justify-content: center;\n}\n\n/* .mask {\n    top: 0;\n    width: 750px;\n    justify-content: center;\n    align-items: center;\n} */\n.wrapper {\n  position: fixed;\n  top: 0px;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  /* width: 750px; */\n  align-items: center;\n  justify-content: center;\n}\n.modal-box {\n  /* background-color: #ffffff; */\n  width: 540px;\n  /* border-radius: 26px; */\n  z-index: 100;\n  position: relative;\n}\n\n.modal-content {\n  padding-top: 36px;\n  padding-bottom: 32px;\n  padding-left: 32px;\n  padding-right: 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.content-title {\n  font-family: PingFangSC-Medium;\n  color: #000000;\n  font-size: 32px;\n  text-align: center;\n  /* margin-bottom: 24px; */\n  line-height: 48px;\n\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  word-break: break-all;\n}\n\n.content-image {\n  width: 476px;\n  height: 476px;\n}\n\n.content-subtext {\n  font-family: PingFangSC-Regular;\n  /* color: #111111; */\n  font-size: 26px;\n  line-height: 32px;\n  margin-top: 16px;\n  text-align: center;\n}\n\n.search-bar-input {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 10px;\n  padding-left: 10px;\n  margin-top: 40px;\n  font-size: 28px;\n  width: 476px;\n  /* height: 48px; */\n  height: 64px;\n  line-height: 64px;\n  background-color: #ffffff;\n  placeholder-color: #8c8c8c;\n  /* border: 2px solid #9F9F9F;  无效 */\n  border-color: #9f9f9f;\n  border-width: 1px;\n  border-style: solid;\n}\n\n/* weex-native中无效 */\n/* input::-webkit-input-placeholder{\n    color: #8C8C8C;\n  } */\n\n.search-bar-input:active {\n  border: 1px solid #9f9f9f !important;\n}\n\n.modal-footer {\n  flex-direction: row;\n  align-items: center;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  /*H5处理兼容*/\n}\n\n.footer-btn {\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  height: 90px;\n  position: relative;\n}\n\n.cancel {\n  /* border-right-color: #c8c7cc; */\n  border-right-width: 1px;\n  /*H5处理兼容*/\n  border-right: 1px solid #f3f3f3;\n}\n\n.btn-text {\n  font-family: PingFangSC-Regular;\n  font-size: 36px;\n  color: #666666;\n}\n\n.more-btn {\n  flex-direction: column;\n}\n\n.footer-more-btn {\n  flex-direction: columns;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  height: 90px;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  position: relative;\n}\n.closeIconBox {\n  position: absolute;\n  width: 60px;\n  height: 60px;\n  top: 25px;\n  right: 0;\n}\n.closeIcon {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  bottom: 0px;\n  left: 0px;\n}\n.closeIconFont {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n}\n.mask {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nimport DofOverlay from '../dof-overlay'\nimport DofIconfont from '../dof-iconfont'\nimport ColmoMixin from '../../mixins/colmo'\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofOverlay, DofIconfont },\n  props: {\n    show: {\n      type: Boolean,\n      default: false\n    },\n    single: {\n      type: Boolean,\n      default: false\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    content: {\n      type: String,\n      default: ''\n    },\n    cancelText: {\n      type: String,\n      default: '取消'\n    },\n    confirmText: {\n      type: String,\n      default: '确定'\n    },\n    mainBtnColor: {\n      type: String,\n      default: ''\n    },\n    secondBtnColor: {\n      type: String,\n      default: ''\n    },\n    // add by lau\n    hasInput: {\n      type: [Boolean, String],\n      default: false\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    },\n    inputContent: {\n      type: String,\n      default: ''\n    },\n    btnGroup: {\n      type: Array,\n      // default: ['确定','更多','取消']\n      default: () => []\n    },\n    // modal样式自定义\n    modalStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // modal-content样式自定义，适用于修改内部padding等需求\n    modalContentStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // 底部按钮边框颜色\n    modalFooterBorderColor: {\n      type: String,\n      default: ''\n    },\n    // subText 颜色\n    subTextColor: {\n      type: String,\n      default: ''\n    },\n    //是否展示图片\n    image: {\n      type: String,\n      default: ''\n    },\n    // 图片样式\n    imgStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // 右上角close图标\n    isShowCloseIcon: {\n      type: Boolean,\n      default: false\n    },\n    closeIcon: {\n      type: String,\n      default: ''\n    }\n  },\n  computed: {\n    _modalStyle() {\n      return {\n        borderRadius: this._isColmo ? '0px' : '26px',\n        backgroundColor: this._isColmo ? '#1c1e21' : '#fff',\n        ...this.modalStyle\n      }\n    },\n    _modalFooterBorderColor() {\n      if (this.modalFooterBorderColor) return this.modalFooterBorderColor\n      return this._isColmo ? 'rgba(255,255,255,0.1)' : '#c8c7cc'\n    },\n    _secondBtnColor() {\n      if (this.secondBtnColor) return this.secondBtnColor\n      return this._isColmo ? 'rgba(255,255,255,0.40)' : '#267aff'\n    },\n    _subTextColor() {\n      if (this.subTextColor) return this.subTextColor\n      return this._isColmo ? 'rgba(255,255,255,0.60)' : '#111111'\n    }\n  },\n  data: () => ({}),\n  created() {\n    var env = weex.config.env\n    this.pageHeight = (env.deviceHeight / env.deviceWidth) * 750\n  },\n  methods: {\n    cancelClicked() {\n      this.$emit('dofModalCancelBtnClicked', {\n        type: 'cancel',\n        content: this.inputContent\n      })\n    },\n    primaryClicked() {\n      this.$emit('dofModalConfirmBtnClicked', {\n        type: 'confirm',\n        content: this.inputContent\n      })\n    },\n    layoutClick() {\n      this.$emit('close', {})\n    },\n    closeIconClick() {\n      this.$emit('closeIconClicked', {})\n    },\n    // add by lau\n    moreBtnClicked(index, text) {\n      this.$emit('btnItemClicked', {\n        index,\n        text\n      })\n    }\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
+exports.push([module.i, "\n.container[data-v-59d06228] {\n  /* width: 750px; */\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n\n/* .mask {\n    top: 0;\n    width: 750px;\n    justify-content: center;\n    align-items: center;\n} */\n.wrapper[data-v-59d06228] {\n  position: fixed;\n  top: 0px;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  /* width: 750px; */\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.modal-box[data-v-59d06228] {\n  /* background-color: #ffffff; */\n  width: 7.2rem;\n  /* border-radius: 26px; */\n  z-index: 100;\n  position: relative;\n}\n.modal-content[data-v-59d06228] {\n  padding-top: 0.48rem;\n  padding-bottom: 0.42667rem;\n  padding-left: 0.42667rem;\n  padding-right: 0.42667rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.content-title[data-v-59d06228] {\n  font-family: PingFangSC-Medium;\n  color: #000000;\n  font-size: 0.42667rem;\n  text-align: center;\n  /* margin-bottom: 24px; */\n  line-height: 0.64rem;\n\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  word-break: break-all;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n.content-image[data-v-59d06228] {\n  width: 6.34667rem;\n  height: 6.34667rem;\n}\n.content-subtext[data-v-59d06228] {\n  font-family: PingFangSC-Regular;\n  /* color: #111111; */\n  font-size: 0.34667rem;\n  line-height: 0.42667rem;\n  margin-top: 0.21333rem;\n  text-align: center;\n}\n.search-bar-input[data-v-59d06228] {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0.13333rem;\n  padding-left: 0.13333rem;\n  margin-top: 0.53333rem;\n  font-size: 0.37333rem;\n  width: 6.34667rem;\n  /* height: 48px; */\n  height: 0.85333rem;\n  line-height: 0.85333rem;\n  background-color: #ffffff;\n  placeholder-color: #8c8c8c;\n  /* border: 2px solid #9F9F9F;  无效 */\n  border-color: #9f9f9f;\n  border-width: 1px;\n  border-style: solid;\n}\n.search-bar-input[data-v-59d06228]::-webkit-input-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]:-moz-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]::-moz-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]:-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.search-bar-input[data-v-59d06228]:placeholder-shown {\n  color: #8c8c8c;\n}\n\n/* weex-native中无效 */\n/* input::-webkit-input-placeholder{\n    color: #8C8C8C;\n  } */\n.search-bar-input[data-v-59d06228]:active {\n  border: 1px solid #9f9f9f !important;\n}\n.modal-footer[data-v-59d06228] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  /*H5处理兼容*/\n}\n.footer-btn[data-v-59d06228] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  height: 1.2rem;\n  position: relative;\n}\n.cancel[data-v-59d06228] {\n  /* border-right-color: #c8c7cc; */\n  border-right-width: 1px;\n  /*H5处理兼容*/\n  border-right: 1px solid #f3f3f3;\n}\n.btn-text[data-v-59d06228] {\n  font-family: PingFangSC-Regular;\n  font-size: 0.48rem;\n  color: #666666;\n}\n.more-btn[data-v-59d06228] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n}\n.footer-more-btn[data-v-59d06228] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: columns;\n          flex-direction: columns;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  /* flex: 1; */\n  height: 1.2rem;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  position: relative;\n}\n.closeIconBox[data-v-59d06228] {\n  position: absolute;\n  width: 0.8rem;\n  height: 0.8rem;\n  top: 0.33333rem;\n  right: 0;\n}\n.closeIcon[data-v-59d06228] {\n  position: absolute;\n  width: 0.26667rem;\n  height: 0.26667rem;\n  bottom: 0px;\n  left: 0px;\n}\n.closeIconFont[data-v-59d06228] {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n}\n.mask[data-v-59d06228] {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-modal/index.vue?2bcd478e","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-modal/<no source>"],"names":[],"mappings":";AAgFA;EACA,mBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;;AAEA;;;;;IAKA;AACA;EACA,gBAAA;EACA,SAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EACA,mBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,gCAAA;EACA,cAAA;EACA,0BAAA;EACA,aAAA;EACA,mBAAA;CACA;AAEA;EACA,qBAAA;EACA,2BAAA;EACA,yBAAA;EACA,0BAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,+BAAA;EACA,eAAA;EACA,sBAAA;EACA,mBAAA;EACA,0BAAA;EACA,qBAAA;;EAEA,SAAA;EACA,wBAAA;EACA,iBAAA;EACA,sBAAA;ECpIA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDqIA;AAEA;EACA,kBAAA;EACA,mBAAA;CACA;AAEA;EACA,gCAAA;EACA,qBAAA;EACA,sBAAA;EACA,wBAAA;EACA,uBAAA;EACA,mBAAA;CACA;AAEA;EACA,eAAA;EACA,kBAAA;EACA,0BAAA;EACA,yBAAA;EACA,uBAAA;EACA,sBAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,0BAAA;EACA,2BAAA;EACA,oCAAA;EACA,sBAAA;EACA,kBAAA;EACA,oBAAA;CACA;ACtKA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;AAAA;EAAA,eAAA;CAAA;;ADwKA,oBAAA;AACA;;MAEA;AAEA;EACA,qCAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,gCAAA;EACA,sBAAA;EACA,UAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,eAAA;EACA,mBAAA;CACA;AAEA;EACA,kCAAA;EACA,wBAAA;EACA,UAAA;EACA,gCAAA;CACA;AAEA;EACA,gCAAA;EACA,mBAAA;EACA,eAAA;CACA;AAEA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;CACA;AAEA;EACA,6BAAA;EAAA,8BAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,cAAA;EACA,eAAA;EACA,gCAAA;EACA,sBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,SAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;EACA,YAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,QAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"container\">\n    <dof-overlay :show=\"show\" :hasAnimation=\"false\" v-if=\"show\"></dof-overlay>\n    <div v-if=\"show\" class=\"wrapper\" @click=\"layoutClick\">\n      <div class=\"modal-box\" @click=\"() => {}\" :style=\"_modalStyle\">\n        <div class=\"modal-content\" :style=\"modalContentStyle\">\n          <slot name=\"title\">\n            <text v-if=\"title\" class=\"content-title\">{{ title }}</text>\n          </slot>\n          <slot name=\"image\">\n            <image v-if=\"image\" class=\"content-image\" resize=\"cover\" :src=\"image\" :style=\"imgStyle\"></image>\n          </slot>\n          <slot name=\"content\">\n            <text\n              v-if=\"content\"\n              class=\"content-subtext\"\n              :style=\"{\n                fontFamily: _isColmo ? 'PingFangSC-Regular' : title ? 'PingFangSC-Regular' : 'PingFangSC-Medium',\n                color: _subTextColor\n              }\"\n              >{{ content }}</text\n            >\n          </slot>\n          <slot name=\"input\">\n            <input v-if=\"hasInput\" :placeholder=\"placeholder\" v-model=\"inputContent\" class=\"search-bar-input\" />\n          </slot>\n        </div>\n\n        <div\n          v-if=\"btnGroup && btnGroup.length == 0\"\n          class=\"modal-footer\"\n          :style=\"{ borderTopColor: _modalFooterBorderColor }\"\n        >\n          <div class=\"footer-btn cancel\" v-if=\"!single\" :style=\"{ borderRightColor: _modalFooterBorderColor }\">\n            <text class=\"btn-text\" :style=\"{ color: _secondBtnColor }\">{{ cancelText }}</text>\n            <div class=\"mask\" @click=\"cancelClicked\"></div>\n          </div>\n          <div class=\"footer-btn confirm\">\n            <text\n              class=\"btn-text\"\n              :style=\"{\n                color: mainBtnColor ? mainBtnColor : _isColmo ? '#B35336' : '#267aff',\n                fontFamily: _isColmo ? 'PingFangSC-Regular' : 'PingFangSC-Medium'\n              }\"\n              >{{ confirmText }}</text\n            >\n            <div class=\"mask\" @click=\"primaryClicked\"></div>\n          </div>\n        </div>\n\n        <div v-if=\"btnGroup && btnGroup.length > 0\" class=\"more-btn\">\n          <div\n            class=\"footer-more-btn\"\n            :key=\"index\"\n            v-for=\"(item, index) in btnGroup\"\n            :style=\"{ borderTopColor: _modalFooterBorderColor }\"\n          >\n            <text class=\"btn-text\" :style=\"{ color: item.color ? item.color : _secondBtnColor }\">{{\n              item.text || item\n            }}</text>\n            <div class=\"mask\" @click=\"moreBtnClicked(index, item)\"></div>\n          </div>\n        </div>\n        <div class=\"closeIconBox\" v-if=\"closeIcon || isShowCloseIcon\" @click=\"closeIconClick\">\n          <image v-if=\"closeIcon\" :src=\"closeIcon\" class=\"closeIcon\"></image>\n          <dof-iconfont\n            v-else\n            class=\"closeIconFont\"\n            :code=\"'\\u4725'\"\n            :size=\"48\"\n            :color=\"_isColmo ? 'rgba(255,255,255,0.80)' : '#333'\"\n            @dofIconFontClicked=\"closeIconClick\"\n          ></dof-iconfont>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.container {\n  /* width: 750px; */\n  align-items: center;\n  justify-content: center;\n}\n\n/* .mask {\n    top: 0;\n    width: 750px;\n    justify-content: center;\n    align-items: center;\n} */\n.wrapper {\n  position: fixed;\n  top: 0px;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  /* width: 750px; */\n  align-items: center;\n  justify-content: center;\n}\n.modal-box {\n  /* background-color: #ffffff; */\n  width: 540px;\n  /* border-radius: 26px; */\n  z-index: 100;\n  position: relative;\n}\n\n.modal-content {\n  padding-top: 36px;\n  padding-bottom: 32px;\n  padding-left: 32px;\n  padding-right: 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.content-title {\n  font-family: PingFangSC-Medium;\n  color: #000000;\n  font-size: 32px;\n  text-align: center;\n  /* margin-bottom: 24px; */\n  line-height: 48px;\n\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  word-break: break-all;\n}\n\n.content-image {\n  width: 476px;\n  height: 476px;\n}\n\n.content-subtext {\n  font-family: PingFangSC-Regular;\n  /* color: #111111; */\n  font-size: 26px;\n  line-height: 32px;\n  margin-top: 16px;\n  text-align: center;\n}\n\n.search-bar-input {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 10px;\n  padding-left: 10px;\n  margin-top: 40px;\n  font-size: 28px;\n  width: 476px;\n  /* height: 48px; */\n  height: 64px;\n  line-height: 64px;\n  background-color: #ffffff;\n  placeholder-color: #8c8c8c;\n  /* border: 2px solid #9F9F9F;  无效 */\n  border-color: #9f9f9f;\n  border-width: 1px;\n  border-style: solid;\n}\n\n/* weex-native中无效 */\n/* input::-webkit-input-placeholder{\n    color: #8C8C8C;\n  } */\n\n.search-bar-input:active {\n  border: 1px solid #9f9f9f !important;\n}\n\n.modal-footer {\n  flex-direction: row;\n  align-items: center;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  /*H5处理兼容*/\n}\n\n.footer-btn {\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  height: 90px;\n  position: relative;\n}\n\n.cancel {\n  /* border-right-color: #c8c7cc; */\n  border-right-width: 1px;\n  /*H5处理兼容*/\n  border-right: 1px solid #f3f3f3;\n}\n\n.btn-text {\n  font-family: PingFangSC-Regular;\n  font-size: 36px;\n  color: #666666;\n}\n\n.more-btn {\n  flex-direction: column;\n}\n\n.footer-more-btn {\n  flex-direction: columns;\n  align-items: center;\n  justify-content: center;\n  /* flex: 1; */\n  height: 90px;\n  /* border-top-color: #c8c7cc; */\n  border-top-width: 1px;\n  position: relative;\n}\n.closeIconBox {\n  position: absolute;\n  width: 60px;\n  height: 60px;\n  top: 25px;\n  right: 0;\n}\n.closeIcon {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  bottom: 0px;\n  left: 0px;\n}\n.closeIconFont {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n}\n.mask {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nimport DofOverlay from '../dof-overlay'\nimport DofIconfont from '../dof-iconfont'\nimport ColmoMixin from '../../mixins/colmo'\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofOverlay, DofIconfont },\n  props: {\n    show: {\n      type: Boolean,\n      default: false\n    },\n    single: {\n      type: Boolean,\n      default: false\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    content: {\n      type: String,\n      default: ''\n    },\n    cancelText: {\n      type: String,\n      default: '取消'\n    },\n    confirmText: {\n      type: String,\n      default: '确定'\n    },\n    mainBtnColor: {\n      type: String,\n      default: ''\n    },\n    secondBtnColor: {\n      type: String,\n      default: ''\n    },\n    // add by lau\n    hasInput: {\n      type: [Boolean, String],\n      default: false\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    },\n    inputContent: {\n      type: String,\n      default: ''\n    },\n    btnGroup: {\n      type: Array,\n      // default: ['确定','更多','取消']\n      default: () => []\n    },\n    // modal样式自定义\n    modalStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // modal-content样式自定义，适用于修改内部padding等需求\n    modalContentStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // 底部按钮边框颜色\n    modalFooterBorderColor: {\n      type: String,\n      default: ''\n    },\n    // subText 颜色\n    subTextColor: {\n      type: String,\n      default: ''\n    },\n    //是否展示图片\n    image: {\n      type: String,\n      default: ''\n    },\n    // 图片样式\n    imgStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    // 右上角close图标\n    isShowCloseIcon: {\n      type: Boolean,\n      default: false\n    },\n    closeIcon: {\n      type: String,\n      default: ''\n    }\n  },\n  computed: {\n    _modalStyle() {\n      return {\n        borderRadius: this._isColmo ? '0px' : '26px',\n        backgroundColor: this._isColmo ? '#1c1e21' : '#fff',\n        ...this.modalStyle\n      }\n    },\n    _modalFooterBorderColor() {\n      if (this.modalFooterBorderColor) return this.modalFooterBorderColor\n      return this._isColmo ? 'rgba(255,255,255,0.1)' : '#c8c7cc'\n    },\n    _secondBtnColor() {\n      if (this.secondBtnColor) return this.secondBtnColor\n      return this._isColmo ? 'rgba(255,255,255,0.40)' : '#267aff'\n    },\n    _subTextColor() {\n      if (this.subTextColor) return this.subTextColor\n      return this._isColmo ? 'rgba(255,255,255,0.60)' : '#111111'\n    }\n  },\n  data: () => ({}),\n  created() {\n    var env = weex.config.env\n    this.pageHeight = (env.deviceHeight / env.deviceWidth) * 750\n  },\n  methods: {\n    cancelClicked() {\n      this.$emit('dofModalCancelBtnClicked', {\n        type: 'cancel',\n        content: this.inputContent\n      })\n    },\n    primaryClicked() {\n      this.$emit('dofModalConfirmBtnClicked', {\n        type: 'confirm',\n        content: this.inputContent\n      })\n    },\n    layoutClick() {\n      this.$emit('close', {})\n    },\n    closeIconClick() {\n      this.$emit('closeIconClicked', {})\n    },\n    // add by lau\n    moreBtnClicked(index, text) {\n      this.$emit('btnItemClicked', {\n        index,\n        text\n      })\n    }\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
 
 // exports
 
@@ -8863,7 +8863,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.wrapper[data-v-70015f30] {\n  z-index: 999;\n}\n.g-cover[data-v-70015f30] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.4); */\n  z-index: 1;\n}\n.g-popover[data-v-70015f30] {\n  position: fixed;\n  padding: 0.2rem;\n  z-index: 10;\n}\n.u-popover-arrow[data-v-70015f30] {\n  position: absolute;\n  /* border-radius: 4px; */\n  width: 0.48rem;\n  height: 0.48rem;\n  background-color: #ffffff;\n  -webkit-transform: rotateZ(45deg);\n          transform: rotateZ(45deg);\n}\n.u-popover-inner[data-v-70015f30] {\n  border-radius: 0.21333rem;\n  background-color: #ffffff;\n  max-width: 9.14667rem;\n}\n.content-inner[data-v-70015f30] {\n  border-radius: 0.21333rem;\n  max-width: 9.14667rem;\n  padding: 0.32rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.closeBox[data-v-70015f30] {\n  padding-top: 0.13333rem;\n  padding-bottom: 0.13333rem;\n  padding-right: 0px;\n  padding-left: 0.13333rem;\n}\n.closeIcon[data-v-70015f30] {\n  width: 0.24rem;\n  height: 0.24rem;\n}\n.u-popover-theme-white[data-v-70015f30] {\n  background-color: #ffffff;\n}\n.u-popover-theme-dark[data-v-70015f30] {\n  background-color: #000000;\n}\n.i-btn[data-v-70015f30] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* margin-left: 10px;\n  margin-right: 10px; */\n  /* padding-left: 20px; */\n  /* padding-right: 20px; */\n}\n.row-layout[data-v-70015f30] {\n  padding-left: 0.48rem;\n  padding-right: 0.48rem;\n}\n.column-layout[data-v-70015f30] {\n  padding-top: 0.02667rem;\n  padding-bottom: 0.02667rem;\n}\n.borderRight[data-v-70015f30] {\n  border-right-width: 1px;\n  border-right-color: #eaeaeb;\n}\n.borderBottom[data-v-70015f30] {\n  border-bottom-width: 1px;\n  border-bottom-color: #eaeaeb;\n}\n.i-btn-noborder[data-v-70015f30] {\n  border-bottom-color: #ffffff;\n}\n.btn-icon[data-v-70015f30] {\n  width: 0.42667rem;\n  height: 0.42667rem;\n  margin-right: 0.21333rem;\n}\n.btn-text[data-v-70015f30] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  height: 1.28rem;\n  font-size: 0.37333rem;\n  line-height: 1.28rem;\n  color: #232323;\n  margin-left: 0.10667rem;\n}\n.btn-text-theme-dark[data-v-70015f30] {\n  color: #ffffff;\n}\n.text-align-center[data-v-70015f30] {\n  text-align: center;\n}\n.textContent[data-v-70015f30] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  font-family: PingFangSC-Regular;\n  font-size: 0.32rem;\n  color: #666666;\n  font-weight: 400;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-popover2/index.vue?4a2d61ea"],"names":[],"mappings":";AA6dA;EACA,aAAA;CACA;AACA;EACA,gBAAA;EACA,OAAA;EACA,SAAA;EACA,QAAA;EACA,UAAA;EACA,2CAAA;EACA,WAAA;CACA;AACA;EACA,gBAAA;EACA,gBAAA;EACA,YAAA;CACA;AACA;EACA,mBAAA;EACA,yBAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA,kCAAA;UAAA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,0BAAA;EACA,sBAAA;CACA;AACA;EACA,0BAAA;EACA,sBAAA;EACA,iBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,wBAAA;EACA,2BAAA;EACA,mBAAA;EACA,yBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA;wBACA;EACA,yBAAA;EACA,0BAAA;CACA;AACA;EACA,sBAAA;EACA,uBAAA;CACA;AACA;EACA,wBAAA;EACA,2BAAA;CACA;AACA;EACA,wBAAA;EACA,4BAAA;CACA;AACA;EACA,yBAAA;EACA,6BAAA;CACA;AACA;EACA,6BAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,yBAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,gBAAA;EACA,sBAAA;EACA,qBAAA;EACA,eAAA;EACA,wBAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,gCAAA;EACA,mBAAA;EACA,eAAA;EACA,iBAAA;CACA","file":"index.vue","sourcesContent":["<!--\n* @description\n* @fileName dof-popover\n* @author liangzw\n* @date 2021/01/26 11:35:06\n!-->\n<template>\n  <div class=\"wrapper\">\n    <div class=\"g-cover\" ref=\"dof-cover\" v-if=\"show\" @click=\"clickCover\" :style=\"coverStyle\"></div>\n    <div ref=\"dof-popover\" class=\"g-popover\" v-if=\"show && buttons.length\" :style=\"contentStyle\">\n      <div :class=\"['u-popover-arrow', theme !== 'white' && 'u-popover-theme-dark']\" :style=\"arrowStyle\"></div>\n      <scroller\n        scroll-direction=\"horizontal\"\n        show-scrollbar=\"false\"\n        :class=\"['u-popover-inner', theme !== 'white' && 'u-popover-theme-dark']\"\n        :style=\"popoverInnerStyle\"\n        ref=\"dof-inner-popover\"\n      >\n        <div\n          :class=\"[\n            'i-btn',\n            i === buttons.length - 1 ? 'i-btn-noborder' : '',\n            layoutDirection == 'row' ? 'row-layout' : 'column-layout',\n            layoutDirection == 'row' && i != buttons.length - 1 ? 'borderRight' : '',\n            layoutDirection == 'column' && i != buttons.length - 1 ? 'borderBottom' : ''\n          ]\"\n          v-for=\"(item, i) in buttons\"\n          :key=\"i\"\n          @click=\"dofButtonClicked(i, item.key)\"\n        >\n          <image :src=\"item.icon\" v-if=\"item.icon && !_isColmo\" class=\"btn-icon\"></image>\n          <dof-iconfont\n            v-if=\"item.icon && _isColmo\"\n            :code=\"item.icon\"\n            :size=\"56\"\n            :color=\"textStyle.color ? textStyle.color : 'rgba(255,255,255,0.80)'\"\n            @dofIconFontClicked=\"dofButtonClicked(i, item.key)\"\n          ></dof-iconfont>\n          <text :class=\"['btn-text', theme !== 'white' && 'btn-text-theme-dark']\" :style=\"textStyle\">{{\n            item.text\n          }}</text>\n        </div>\n      </scroller>\n    </div>\n    <div ref=\"dof-popover\" class=\"g-popover\" v-if=\"show && !buttons.length\" :style=\"contentStyle\" @click=\"() => {}\">\n      <div :class=\"['u-popover-arrow', theme !== 'white' && 'u-popover-theme-dark']\" :style=\"arrowStyle\"></div>\n      <div class=\"content-inner\" ref=\"dof-inner-popover\" :style=\"innerContentStyle\">\n        <slot>\n          <text class=\"textContent\" :style=\"textStyle\">{{ textContent }}</text>\n          <slot name=\"icon\">\n            <div class=\"closeBox\" v-if=\"isShowClose\" @click=\"$emit('clickedCloseBtn')\">\n              <image v-if=\"!_isColmo\" :src=\"imgs.close\" class=\"closeIcon\"></image>\n              <dof-iconfont\n                v-else\n                :code=\"'\\u4725'\"\n                :size=\"32\"\n                :color=\"_isColmo ? 'rgba(255,255,255,0.80)' : '#333333'\"\n                @dofIconFontClicked=\"$emit('clickedCloseBtn')\"\n              ></dof-iconfont>\n            </div>\n          </slot>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nconst { env } = weex.config\nconst animation = weex.requireModule('animation')\nconst dom = weex.requireModule('dom')\nimport imgs from './imgs'\nimport ColmoMixin from '../../mixins/colmo'\nimport DofIconfont from '../dof-iconfont'\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofIconfont },\n  props: {\n    mode: {\n      type: String,\n      default: 'common'\n    },\n    theme: {\n      type: String,\n      default: 'white'\n    },\n    layoutDirection: {\n      type: String,\n      default: 'column'\n    },\n    buttons: {\n      type: Array,\n      default: () => []\n    },\n    position: {\n      type: Object,\n      default: () => ({\n        x: 0,\n        y: 0\n      })\n    },\n    arrowPosition: {\n      type: Object,\n      default: () => ({\n        pos: 'top',\n        x: 0,\n        y: 0\n      })\n    },\n    coverColor: {\n      type: String,\n      default: 'rgba(0, 0, 0, 0.1)'\n    },\n    hasAnimation: {\n      type: Boolean,\n      default: true\n    },\n    textStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    textContent: {\n      type: String,\n      default: ''\n    },\n    innerBgColor: {\n      type: String,\n      default: ''\n    },\n    isClickCoverHide: {\n      type: Boolean,\n      default: true\n    },\n    isShowClose: {\n      type: Boolean,\n      default: false\n    },\n    width: {\n      type: Number,\n      default: 0\n    },\n    elPos: {\n      type: Object,\n      default: null\n    }\n  },\n  data: () => ({\n    sHeight: (env.deviceHeight / env.deviceWidth) * 750,\n    show: false,\n    showIn: false,\n    imgs,\n    position_: { x: 0, y: 0 }\n  }),\n  watch: {\n    elPos(val) {\n      setTimeout(() => {\n        this.handleElPos(val)\n      }, 100)\n    },\n    position: {\n      handler(val) {\n        if (!this.elPos) {\n          this.position_ = val\n        }\n      },\n      immediate: true\n    }\n  },\n  created() {},\n  computed: {\n    coverStyle() {\n      return this.coverColor\n        ? { backgroundColor: this.coverColor, opacity: this.hasAnimation || !this.showIn ? '0' : '1' }\n        : ''\n    },\n    transformOrigin() {\n      const { x = 0, y = 0, pos = 'top' } = this.arrowPosition\n      let _origins = []\n      switch (pos) {\n        case 'top':\n        case 'bottom':\n          _origins = [x < 0 ? 'right' : 'left', pos]\n          break\n        case 'left':\n        case 'right':\n          _origins = [pos, y < 0 ? 'bottom' : 'top']\n          break\n      }\n      return _origins.join(' ')\n    },\n    contentTransform() {\n      const { pos = 'top' } = this.arrowPosition\n      let { x = 0, y = 0 } = this.arrowPosition\n      const _translates = ['scale(0)']\n      if (x >= 0 && x < 22) {\n        x = 22\n      } else if (x < 0 && x > -22) {\n        x = -22\n      }\n      if (y >= 0 && y < 22) {\n        y = 22\n      } else if (y < 0 && y > -22) {\n        y = -22\n      }\n      switch (pos) {\n        case 'top':\n        case 'bottom':\n          _translates[1] = `translateX(${x < 0 ? x - 15 : x + 15}px)`\n          break\n        case 'left':\n        case 'right':\n          _translates[1] = `translateY(${y < 0 ? y - 15 : y + 15}px)`\n          break\n      }\n      return _translates.join(' ')\n    },\n    contentStyle() {\n      const { x = 0, y = 0 } = this.position_\n      const style = {}\n      if (!this.elPos) {\n        x < 0 ? (style.right = `${-x}px`) : (style.left = `${x}px`)\n        y < 0 ? (style.bottom = `${-y}px`) : (style.top = `${y}px`)\n      } else {\n        if (this.arrowPosition.pos === 'bottom') {\n          style.left = `${x}px`\n          style.top = `${y}px`\n        } else {\n          style.left = `${x}px`\n          style.top = `${y}px`\n        }\n      }\n\n      style.opacity = this.hasAnimation || !this.showIn ? '0' : '1'\n      style.transform = this.hasAnimation || !this.showIn ? this.contentTransform : 'scale(1)'\n      style.transformOrigin = this.transformOrigin\n      return style\n    },\n    arrowStyle() {\n      let { x = 0, y = 0 } = this.arrowPosition\n      const { pos = 'top' } = this.arrowPosition\n      const style = {\n        backgroundColor: this.bgColor\n      }\n      switch (pos) {\n        case 'top':\n          style.top = '6px'\n        case 'bottom': //eslint-disable-line\n          !style.top && (style.bottom = '6px')\n          // style.transform = 'rotateZ(45deg) rotateY(45deg)'\n          if (x >= 0 && x < 22) {\n            x = 22\n          } else if (x < 0 && x > -22) {\n            x = -22\n          }\n          x < 0 ? (style.right = `${-x}px`) : (style.left = `${x}px`)\n          break\n        case 'left':\n          style.left = '6px'\n        case 'right': //eslint-disable-line\n          !style.left && (style.right = '6px')\n          // style.transform = 'scaleY(0.8) rotate(45deg)'\n          if (y >= 0 && y < 22) {\n            y = 22\n          } else if (y < 0 && y > -22) {\n            y = -22\n          }\n          y < 0 ? (style.bottom = `${-y}px`) : (style.top = `${y}px`)\n          break\n        default:\n          break\n      }\n      return style\n    },\n    popoverInnerStyle() {\n      let { layoutDirection } = this\n      if (layoutDirection === 'row') {\n        return {\n          ...this.innerContentStyle,\n          flexDirection: 'row'\n        }\n      } else {\n        return {\n          ...this.innerContentStyle,\n          flexDirection: 'column'\n        }\n      }\n    },\n    btnInnerStyle() {\n      let { layoutDirection } = this\n      if (layoutDirection === 'row') {\n        return {\n          borderRightWidth: '1px'\n        }\n      } else {\n        return {\n          borderBottomWidth: '1px'\n        }\n      }\n    },\n    bgColor() {\n      return this.innerBgColor ? this.innerBgColor : this.theme === 'dark' ? '#000' : this._isColmo ? '#292b2f' : '#fff'\n    },\n    innerContentStyle() {\n      const style = {\n        backgroundColor: this.bgColor\n      }\n      if (this.width) style.width = this.width + 'px'\n      if (this._isColmo && this.isShowClose) style.paddingRight = '10px'\n      return style\n    }\n  },\n  methods: {\n    dofPopoverShow() {\n      if (this.animationLock) {\n        return\n      }\n      if (this.elPos.el) this.handleElPos(this.elPos)\n      this.show = true\n      if (this.hasAnimation) {\n        setTimeout(() => this.dofPopoverAnimationShow(), 40)\n      } else {\n        setTimeout(() => (this.showIn = true), 40)\n      }\n    },\n    /**\n     * smooth in\n     **/\n    dofPopoverAnimationShow() {\n      const popoverEl = this.$refs['dof-popover']\n      const coverEl = this.$refs['dof-cover']\n      if (!coverEl || !popoverEl) {\n        return\n      }\n      this.setAnimationLock()\n      let a1End = false\n      let a2End = false\n      animation.transition(\n        popoverEl,\n        {\n          styles: {\n            opacity: 1,\n            transform: 'scale(1)',\n            transformOrigin: this.transformOrigin\n          },\n          delay: 0,\n          duration: 250,\n          timingFunction: 'ease-out'\n        },\n        e => {\n          a1End = true\n          if (a1End && a2End) {\n            this.animationLock = false\n          }\n        }\n      )\n\n      animation.transition(\n        coverEl,\n        {\n          styles: {\n            opacity: 1\n          },\n          delay: 0,\n          duration: 250,\n          timingFunction: 'ease-in'\n        },\n        e => {\n          a2End = true\n          if (a1End && a2End) {\n            this.animationLock = false\n          }\n        }\n      )\n    },\n    dofButtonClicked(index, key) {\n      if (this.animationLock) {\n        return\n      }\n      this.$emit('dofPopoverButtonClicked', { key, index })\n      this.hideAction()\n    },\n    /**\n     * 隐藏操作\n     */\n    hideAction() {\n      if (this.animationLock) {\n        return\n      }\n      if (this.hasAnimation) {\n        this.setAnimationLock()\n        const popoverEl = this.$refs['dof-popover']\n        const coverEl = this.$refs['dof-cover']\n        if (!popoverEl || !coverEl) {\n          return\n        }\n        let a1End = false\n        let a2End = false\n        animation.transition(\n          popoverEl,\n          {\n            styles: {\n              opacity: 0,\n              transform: this.contentTransform,\n              transformOrigin: this.transformOrigin\n            },\n            duration: 250\n          },\n          () => {\n            a1End = true\n            if (a1End && a2End) {\n              this.show = false\n              this.showIn = false\n              this.animationLock = false\n            }\n          }\n        )\n        animation.transition(\n          coverEl,\n          {\n            styles: {\n              opacity: 0\n            },\n            duration: 250\n          },\n          () => {\n            a2End = true\n            if (a1End && a2End) {\n              this.show = false\n              this.showIn = false\n              this.animationLock = false\n            }\n          }\n        )\n      } else {\n        this.show = false\n        this.showIn = false\n      }\n    },\n    /**\n     * 设置动画锁\n     */\n    setAnimationLock() {\n      this.animationLock = true\n    },\n    clickCover() {\n      this.isClickCoverHide && this.hideAction()\n      this.$emit('dofPopoverCoverClicked')\n    },\n    getPosition(el) {\n      return new Promise((resolve, reject) => {\n        dom.getComponentRect(el, result => {\n          let size = result.size || {}\n          resolve(size)\n        })\n      })\n    },\n    async handleElPos(val) {\n      if (!val.el) return\n      const res = await this.getPosition(val.el)\n      if (this.arrowPosition.pos === 'top' || !this.arrowPosition.pos) {\n        this.position_ = { x: res.left - 15 + this.elPos.offsetX, y: res.top + res.height + this.elPos.offsetY }\n      }\n      if (this.arrowPosition.pos === 'bottom') {\n        this.position_ = { x: res.left - 15 + this.elPos.offsetX, y: res.top - 110 - 15 + this.elPos.offsetY }\n      }\n      if (this.arrowPosition.pos === 'left') {\n        this.position_ = { x: res.left + res.width + 10 + this.elPos.offsetX, y: res.top - 15 + this.elPos.offsetY }\n      }\n      if (this.arrowPosition.pos === 'right') {\n        this.position_ = { x: res.left - 285 + this.elPos.offsetX, y: res.top - 15 + this.elPos.offsetY }\n      }\n    }\n  }\n}\n</script>\n\n<style scoped>\n.wrapper {\n  z-index: 999;\n}\n.g-cover {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.4); */\n  z-index: 1;\n}\n.g-popover {\n  position: fixed;\n  padding: 15px;\n  z-index: 10;\n}\n.u-popover-arrow {\n  position: absolute;\n  /* border-radius: 4px; */\n  width: 36px;\n  height: 36px;\n  background-color: #ffffff;\n  transform: rotateZ(45deg);\n}\n.u-popover-inner {\n  border-radius: 16px;\n  background-color: #ffffff;\n  max-width: 686px;\n}\n.content-inner {\n  border-radius: 16px;\n  max-width: 686px;\n  padding: 24px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.closeBox {\n  padding-top: 10px;\n  padding-bottom: 10px;\n  padding-right: 0px;\n  padding-left: 10px;\n}\n.closeIcon {\n  width: 18px;\n  height: 18px;\n}\n\n.u-popover-theme-white {\n  background-color: #ffffff;\n}\n.u-popover-theme-dark {\n  background-color: #000000;\n}\n.i-btn {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  /* margin-left: 10px;\n  margin-right: 10px; */\n  /* padding-left: 20px; */\n  /* padding-right: 20px; */\n}\n.row-layout {\n  padding-left: 36px;\n  padding-right: 36px;\n}\n.column-layout {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.borderRight {\n  border-right-width: 1px;\n  border-right-color: #eaeaeb;\n}\n.borderBottom {\n  border-bottom-width: 1px;\n  border-bottom-color: #eaeaeb;\n}\n.i-btn-noborder {\n  border-bottom-color: #ffffff;\n}\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  margin-right: 16px;\n}\n.btn-text {\n  flex: 1;\n  height: 96px;\n  font-size: 28px;\n  line-height: 96px;\n  color: #232323;\n  margin-left: 8px;\n}\n.btn-text-theme-dark {\n  color: #ffffff;\n}\n.text-align-center {\n  text-align: center;\n}\n.textContent {\n  flex: 1;\n  font-family: PingFangSC-Regular;\n  font-size: 24px;\n  color: #666666;\n  font-weight: 400;\n}\n</style>\n\n<style scoped src=\"./colmo.css\"></style>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.wrapper[data-v-70015f30] {\n  z-index: 999;\n}\n.g-cover[data-v-70015f30] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.4); */\n  z-index: 1;\n}\n.g-popover[data-v-70015f30] {\n  position: fixed;\n  padding: 0.2rem;\n  z-index: 10;\n}\n.u-popover-arrow[data-v-70015f30] {\n  position: absolute;\n  /* border-radius: 4px; */\n  width: 0.48rem;\n  height: 0.48rem;\n  background-color: #ffffff;\n  -webkit-transform: rotateZ(45deg);\n          transform: rotateZ(45deg);\n}\n.u-popover-inner[data-v-70015f30] {\n  border-radius: 0.21333rem;\n  background-color: #ffffff;\n  max-width: 9.14667rem;\n}\n.content-inner[data-v-70015f30] {\n  border-radius: 0.21333rem;\n  max-width: 9.14667rem;\n  padding: 0.32rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.closeBox[data-v-70015f30] {\n  padding-top: 0.13333rem;\n  padding-bottom: 0.13333rem;\n  padding-right: 0px;\n  padding-left: 0.13333rem;\n}\n.closeIcon[data-v-70015f30] {\n  width: 0.24rem;\n  height: 0.24rem;\n}\n.u-popover-theme-white[data-v-70015f30] {\n  background-color: #ffffff;\n}\n.u-popover-theme-dark[data-v-70015f30] {\n  background-color: #000000;\n}\n.i-btn[data-v-70015f30] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* margin-left: 10px;\n  margin-right: 10px; */\n  /* padding-left: 20px; */\n  /* padding-right: 20px; */\n}\n.row-layout[data-v-70015f30] {\n  padding-left: 0.48rem;\n  padding-right: 0.48rem;\n}\n.column-layout[data-v-70015f30] {\n  padding-top: 0.02667rem;\n  padding-bottom: 0.02667rem;\n}\n.borderRight[data-v-70015f30] {\n  border-right-width: 1px;\n  border-right-color: #eaeaeb;\n}\n.borderBottom[data-v-70015f30] {\n  border-bottom-width: 1px;\n  border-bottom-color: #eaeaeb;\n}\n.i-btn-noborder[data-v-70015f30] {\n  border-bottom-color: #ffffff;\n}\n.btn-icon[data-v-70015f30] {\n  width: 0.42667rem;\n  height: 0.42667rem;\n  margin-right: 0.21333rem;\n}\n.btn-text[data-v-70015f30] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  height: 1.28rem;\n  font-size: 0.37333rem;\n  line-height: 1.28rem;\n  color: #232323;\n  margin-left: 0.10667rem;\n}\n.btn-text-theme-dark[data-v-70015f30] {\n  color: #ffffff;\n}\n.text-align-center[data-v-70015f30] {\n  text-align: center;\n}\n.textContent[data-v-70015f30] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  font-family: PingFangSC-Regular;\n  font-size: 0.32rem;\n  color: #666666;\n  font-weight: 400;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-popover2/index.vue?695e613b"],"names":[],"mappings":";AA4dA;EACA,aAAA;CACA;AACA;EACA,gBAAA;EACA,OAAA;EACA,SAAA;EACA,QAAA;EACA,UAAA;EACA,2CAAA;EACA,WAAA;CACA;AACA;EACA,gBAAA;EACA,gBAAA;EACA,YAAA;CACA;AACA;EACA,mBAAA;EACA,yBAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA,kCAAA;UAAA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,0BAAA;EACA,sBAAA;CACA;AACA;EACA,0BAAA;EACA,sBAAA;EACA,iBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,wBAAA;EACA,2BAAA;EACA,mBAAA;EACA,yBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA;wBACA;EACA,yBAAA;EACA,0BAAA;CACA;AACA;EACA,sBAAA;EACA,uBAAA;CACA;AACA;EACA,wBAAA;EACA,2BAAA;CACA;AACA;EACA,wBAAA;EACA,4BAAA;CACA;AACA;EACA,yBAAA;EACA,6BAAA;CACA;AACA;EACA,6BAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,yBAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,gBAAA;EACA,sBAAA;EACA,qBAAA;EACA,eAAA;EACA,wBAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,gCAAA;EACA,mBAAA;EACA,eAAA;EACA,iBAAA;CACA","file":"index.vue","sourcesContent":["<!--\n* @description\n* @fileName dof-popover\n* @author liangzw\n* @date 2021/01/26 11:35:06\n!-->\n<template>\n  <div class=\"wrapper\">\n    <div class=\"g-cover\" ref=\"dof-cover\" v-if=\"show\" @click=\"clickCover\" :style=\"coverStyle\"></div>\n    <div ref=\"dof-popover\" class=\"g-popover\" v-if=\"show && buttons.length\" :style=\"contentStyle\">\n      <div :class=\"['u-popover-arrow', theme !== 'white' && 'u-popover-theme-dark']\" :style=\"arrowStyle\"></div>\n      <scroller\n        show-scrollbar=\"false\"\n        :class=\"['u-popover-inner', theme !== 'white' && 'u-popover-theme-dark']\"\n        :style=\"popoverInnerStyle\"\n        ref=\"dof-inner-popover\"\n      >\n        <div\n          :class=\"[\n            'i-btn',\n            i === buttons.length - 1 ? 'i-btn-noborder' : '',\n            layoutDirection == 'row' ? 'row-layout' : 'column-layout',\n            layoutDirection == 'row' && i != buttons.length - 1 ? 'borderRight' : '',\n            layoutDirection == 'column' && i != buttons.length - 1 ? 'borderBottom' : ''\n          ]\"\n          v-for=\"(item, i) in buttons\"\n          :key=\"i\"\n          @click=\"dofButtonClicked(i, item.key)\"\n        >\n          <image :src=\"item.icon\" v-if=\"item.icon && !_isColmo\" class=\"btn-icon\"></image>\n          <dof-iconfont\n            v-if=\"item.icon && _isColmo\"\n            :code=\"item.icon\"\n            :size=\"56\"\n            :color=\"textStyle.color ? textStyle.color : 'rgba(255,255,255,0.80)'\"\n            @dofIconFontClicked=\"dofButtonClicked(i, item.key)\"\n          ></dof-iconfont>\n          <text :class=\"['btn-text', theme !== 'white' && 'btn-text-theme-dark']\" :style=\"textStyle\">{{\n            item.text\n          }}</text>\n        </div>\n      </scroller>\n    </div>\n    <div ref=\"dof-popover\" class=\"g-popover\" v-if=\"show && !buttons.length\" :style=\"contentStyle\" @click=\"() => {}\">\n      <div :class=\"['u-popover-arrow', theme !== 'white' && 'u-popover-theme-dark']\" :style=\"arrowStyle\"></div>\n      <div class=\"content-inner\" ref=\"dof-inner-popover\" :style=\"innerContentStyle\">\n        <slot>\n          <text class=\"textContent\" :style=\"textStyle\">{{ textContent }}</text>\n          <slot name=\"icon\">\n            <div class=\"closeBox\" v-if=\"isShowClose\" @click=\"$emit('clickedCloseBtn')\">\n              <image v-if=\"!_isColmo\" :src=\"imgs.close\" class=\"closeIcon\"></image>\n              <dof-iconfont\n                v-else\n                :code=\"'\\u4725'\"\n                :size=\"32\"\n                :color=\"_isColmo ? 'rgba(255,255,255,0.80)' : '#333333'\"\n                @dofIconFontClicked=\"$emit('clickedCloseBtn')\"\n              ></dof-iconfont>\n            </div>\n          </slot>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nconst { env } = weex.config\nconst animation = weex.requireModule('animation')\nconst dom = weex.requireModule('dom')\nimport imgs from './imgs'\nimport ColmoMixin from '../../mixins/colmo'\nimport DofIconfont from '../dof-iconfont'\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofIconfont },\n  props: {\n    mode: {\n      type: String,\n      default: 'common'\n    },\n    theme: {\n      type: String,\n      default: 'white'\n    },\n    layoutDirection: {\n      type: String,\n      default: 'column'\n    },\n    buttons: {\n      type: Array,\n      default: () => []\n    },\n    position: {\n      type: Object,\n      default: () => ({\n        x: 0,\n        y: 0\n      })\n    },\n    arrowPosition: {\n      type: Object,\n      default: () => ({\n        pos: 'top',\n        x: 0,\n        y: 0\n      })\n    },\n    coverColor: {\n      type: String,\n      default: 'rgba(0, 0, 0, 0.1)'\n    },\n    hasAnimation: {\n      type: Boolean,\n      default: true\n    },\n    textStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    textContent: {\n      type: String,\n      default: ''\n    },\n    innerBgColor: {\n      type: String,\n      default: ''\n    },\n    isClickCoverHide: {\n      type: Boolean,\n      default: true\n    },\n    isShowClose: {\n      type: Boolean,\n      default: false\n    },\n    width: {\n      type: Number,\n      default: 0\n    },\n    elPos: {\n      type: Object,\n      default: null\n    }\n  },\n  data: () => ({\n    sHeight: (env.deviceHeight / env.deviceWidth) * 750,\n    show: false,\n    showIn: false,\n    imgs,\n    position_: { x: 0, y: 0 }\n  }),\n  watch: {\n    elPos(val) {\n      setTimeout(() => {\n        this.handleElPos(val)\n      }, 100)\n    },\n    position: {\n      handler(val) {\n        if (!this.elPos) {\n          this.position_ = val\n        }\n      },\n      immediate: true\n    }\n  },\n  created() {},\n  computed: {\n    coverStyle() {\n      return this.coverColor\n        ? { backgroundColor: this.coverColor, opacity: this.hasAnimation || !this.showIn ? '0' : '1' }\n        : ''\n    },\n    transformOrigin() {\n      const { x = 0, y = 0, pos = 'top' } = this.arrowPosition\n      let _origins = []\n      switch (pos) {\n        case 'top':\n        case 'bottom':\n          _origins = [x < 0 ? 'right' : 'left', pos]\n          break\n        case 'left':\n        case 'right':\n          _origins = [pos, y < 0 ? 'bottom' : 'top']\n          break\n      }\n      return _origins.join(' ')\n    },\n    contentTransform() {\n      const { pos = 'top' } = this.arrowPosition\n      let { x = 0, y = 0 } = this.arrowPosition\n      const _translates = ['scale(0)']\n      if (x >= 0 && x < 22) {\n        x = 22\n      } else if (x < 0 && x > -22) {\n        x = -22\n      }\n      if (y >= 0 && y < 22) {\n        y = 22\n      } else if (y < 0 && y > -22) {\n        y = -22\n      }\n      switch (pos) {\n        case 'top':\n        case 'bottom':\n          _translates[1] = `translateX(${x < 0 ? x - 15 : x + 15}px)`\n          break\n        case 'left':\n        case 'right':\n          _translates[1] = `translateY(${y < 0 ? y - 15 : y + 15}px)`\n          break\n      }\n      return _translates.join(' ')\n    },\n    contentStyle() {\n      const { x = 0, y = 0 } = this.position_\n      const style = {}\n      if (!this.elPos) {\n        x < 0 ? (style.right = `${-x}px`) : (style.left = `${x}px`)\n        y < 0 ? (style.bottom = `${-y}px`) : (style.top = `${y}px`)\n      } else {\n        if (this.arrowPosition.pos === 'bottom') {\n          style.left = `${x}px`\n          style.top = `${y}px`\n        } else {\n          style.left = `${x}px`\n          style.top = `${y}px`\n        }\n      }\n\n      style.opacity = this.hasAnimation || !this.showIn ? '0' : '1'\n      style.transform = this.hasAnimation || !this.showIn ? this.contentTransform : 'scale(1)'\n      style.transformOrigin = this.transformOrigin\n      return style\n    },\n    arrowStyle() {\n      let { x = 0, y = 0 } = this.arrowPosition\n      const { pos = 'top' } = this.arrowPosition\n      const style = {\n        backgroundColor: this.bgColor\n      }\n      switch (pos) {\n        case 'top':\n          style.top = '6px'\n        case 'bottom': //eslint-disable-line\n          !style.top && (style.bottom = '6px')\n          // style.transform = 'rotateZ(45deg) rotateY(45deg)'\n          if (x >= 0 && x < 22) {\n            x = 22\n          } else if (x < 0 && x > -22) {\n            x = -22\n          }\n          x < 0 ? (style.right = `${-x}px`) : (style.left = `${x}px`)\n          break\n        case 'left':\n          style.left = '6px'\n        case 'right': //eslint-disable-line\n          !style.left && (style.right = '6px')\n          // style.transform = 'scaleY(0.8) rotate(45deg)'\n          if (y >= 0 && y < 22) {\n            y = 22\n          } else if (y < 0 && y > -22) {\n            y = -22\n          }\n          y < 0 ? (style.bottom = `${-y}px`) : (style.top = `${y}px`)\n          break\n        default:\n          break\n      }\n      return style\n    },\n    popoverInnerStyle() {\n      let { layoutDirection } = this\n      if (layoutDirection === 'row') {\n        return {\n          ...this.innerContentStyle,\n          flexDirection: 'row'\n        }\n      } else {\n        return {\n          ...this.innerContentStyle,\n          flexDirection: 'column'\n        }\n      }\n    },\n    btnInnerStyle() {\n      let { layoutDirection } = this\n      if (layoutDirection === 'row') {\n        return {\n          borderRightWidth: '1px'\n        }\n      } else {\n        return {\n          borderBottomWidth: '1px'\n        }\n      }\n    },\n    bgColor() {\n      return this.innerBgColor ? this.innerBgColor : this.theme === 'dark' ? '#000' : this._isColmo ? '#292b2f' : '#fff'\n    },\n    innerContentStyle() {\n      const style = {\n        backgroundColor: this.bgColor\n      }\n      if (this.width) style.width = this.width + 'px'\n      if (this._isColmo && this.isShowClose) style.paddingRight = '10px'\n      return style\n    }\n  },\n  methods: {\n    dofPopoverShow() {\n      if (this.animationLock) {\n        return\n      }\n      if (this.elPos.el) this.handleElPos(this.elPos)\n      this.show = true\n      if (this.hasAnimation) {\n        setTimeout(() => this.dofPopoverAnimationShow(), 40)\n      } else {\n        setTimeout(() => (this.showIn = true), 40)\n      }\n    },\n    /**\n     * smooth in\n     **/\n    dofPopoverAnimationShow() {\n      const popoverEl = this.$refs['dof-popover']\n      const coverEl = this.$refs['dof-cover']\n      if (!coverEl || !popoverEl) {\n        return\n      }\n      this.setAnimationLock()\n      let a1End = false\n      let a2End = false\n      animation.transition(\n        popoverEl,\n        {\n          styles: {\n            opacity: 1,\n            transform: 'scale(1)',\n            transformOrigin: this.transformOrigin\n          },\n          delay: 0,\n          duration: 250,\n          timingFunction: 'ease-out'\n        },\n        e => {\n          a1End = true\n          if (a1End && a2End) {\n            this.animationLock = false\n          }\n        }\n      )\n\n      animation.transition(\n        coverEl,\n        {\n          styles: {\n            opacity: 1\n          },\n          delay: 0,\n          duration: 250,\n          timingFunction: 'ease-in'\n        },\n        e => {\n          a2End = true\n          if (a1End && a2End) {\n            this.animationLock = false\n          }\n        }\n      )\n    },\n    dofButtonClicked(index, key) {\n      if (this.animationLock) {\n        return\n      }\n      this.$emit('dofPopoverButtonClicked', { key, index })\n      this.hideAction()\n    },\n    /**\n     * 隐藏操作\n     */\n    hideAction() {\n      if (this.animationLock) {\n        return\n      }\n      if (this.hasAnimation) {\n        this.setAnimationLock()\n        const popoverEl = this.$refs['dof-popover']\n        const coverEl = this.$refs['dof-cover']\n        if (!popoverEl || !coverEl) {\n          return\n        }\n        let a1End = false\n        let a2End = false\n        animation.transition(\n          popoverEl,\n          {\n            styles: {\n              opacity: 0,\n              transform: this.contentTransform,\n              transformOrigin: this.transformOrigin\n            },\n            duration: 250\n          },\n          () => {\n            a1End = true\n            if (a1End && a2End) {\n              this.show = false\n              this.showIn = false\n              this.animationLock = false\n            }\n          }\n        )\n        animation.transition(\n          coverEl,\n          {\n            styles: {\n              opacity: 0\n            },\n            duration: 250\n          },\n          () => {\n            a2End = true\n            if (a1End && a2End) {\n              this.show = false\n              this.showIn = false\n              this.animationLock = false\n            }\n          }\n        )\n      } else {\n        this.show = false\n        this.showIn = false\n      }\n    },\n    /**\n     * 设置动画锁\n     */\n    setAnimationLock() {\n      this.animationLock = true\n    },\n    clickCover() {\n      this.isClickCoverHide && this.hideAction()\n      this.$emit('dofPopoverCoverClicked')\n    },\n    getPosition(el) {\n      return new Promise((resolve, reject) => {\n        dom.getComponentRect(el, result => {\n          let size = result.size || {}\n          resolve(size)\n        })\n      })\n    },\n    async handleElPos(val) {\n      if (!val.el) return\n      const res = await this.getPosition(val.el)\n      if (this.arrowPosition.pos === 'top' || !this.arrowPosition.pos) {\n        this.position_ = { x: res.left - 15 + this.elPos.offsetX, y: res.top + res.height + this.elPos.offsetY }\n      }\n      if (this.arrowPosition.pos === 'bottom') {\n        this.position_ = { x: res.left - 15 + this.elPos.offsetX, y: res.top - 110 - 15 + this.elPos.offsetY }\n      }\n      if (this.arrowPosition.pos === 'left') {\n        this.position_ = { x: res.left + res.width + 10 + this.elPos.offsetX, y: res.top - 15 + this.elPos.offsetY }\n      }\n      if (this.arrowPosition.pos === 'right') {\n        this.position_ = { x: res.left - 285 + this.elPos.offsetX, y: res.top - 15 + this.elPos.offsetY }\n      }\n    }\n  }\n}\n</script>\n\n<style scoped>\n.wrapper {\n  z-index: 999;\n}\n.g-cover {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.4); */\n  z-index: 1;\n}\n.g-popover {\n  position: fixed;\n  padding: 15px;\n  z-index: 10;\n}\n.u-popover-arrow {\n  position: absolute;\n  /* border-radius: 4px; */\n  width: 36px;\n  height: 36px;\n  background-color: #ffffff;\n  transform: rotateZ(45deg);\n}\n.u-popover-inner {\n  border-radius: 16px;\n  background-color: #ffffff;\n  max-width: 686px;\n}\n.content-inner {\n  border-radius: 16px;\n  max-width: 686px;\n  padding: 24px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.closeBox {\n  padding-top: 10px;\n  padding-bottom: 10px;\n  padding-right: 0px;\n  padding-left: 10px;\n}\n.closeIcon {\n  width: 18px;\n  height: 18px;\n}\n\n.u-popover-theme-white {\n  background-color: #ffffff;\n}\n.u-popover-theme-dark {\n  background-color: #000000;\n}\n.i-btn {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  /* margin-left: 10px;\n  margin-right: 10px; */\n  /* padding-left: 20px; */\n  /* padding-right: 20px; */\n}\n.row-layout {\n  padding-left: 36px;\n  padding-right: 36px;\n}\n.column-layout {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.borderRight {\n  border-right-width: 1px;\n  border-right-color: #eaeaeb;\n}\n.borderBottom {\n  border-bottom-width: 1px;\n  border-bottom-color: #eaeaeb;\n}\n.i-btn-noborder {\n  border-bottom-color: #ffffff;\n}\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  margin-right: 16px;\n}\n.btn-text {\n  flex: 1;\n  height: 96px;\n  font-size: 28px;\n  line-height: 96px;\n  color: #232323;\n  margin-left: 8px;\n}\n.btn-text-theme-dark {\n  color: #ffffff;\n}\n.text-align-center {\n  text-align: center;\n}\n.textContent {\n  flex: 1;\n  font-family: PingFangSC-Regular;\n  font-size: 24px;\n  color: #666666;\n  font-weight: 400;\n}\n</style>\n\n<style scoped src=\"./colmo.css\"></style>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -8877,7 +8877,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n@media screen and (weex-theme: colmo) {\n.g-popover[data-v-70015f30] {\n    box-shadow: 0px 0.08rem 0.08rem 0px rgba(0, 0, 0, 0.4);\n}\n.content-inner[data-v-70015f30] {\n    border-radius: 0px;\n    padding: 0.42667rem;\n}\n.u-popover-arrow[data-v-70015f30] {\n    background-color: #292b2f;\n}\n.textContent[data-v-70015f30] {\n    font-family: PingFangSC-Regular;\n    font-size: 0.37333rem;\n    color: rgba(255,255,255,0.80);\n    font-weight: 400;\n}\n.btn-text[data-v-70015f30] {\n    font-family: PingFangSC-Regular;\n    font-size: 0.37333rem;\n    color: rgba(255,255,255,0.80);\n}\n.borderBottom[data-v-70015f30] {\n    border-bottom-width: 1px;\n    border-bottom-color: #314144;\n}\n.u-popover-inner[data-v-70015f30] {\n    padding-left: 0.21333rem;\n    padding-right: 0.21333rem;\n    border-radius: 0;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-popover2/colmo.css"],"names":[],"mappings":";AAAA;AACE;IACE,uDAA+C;CAChD;AACD;IACE,mBAAmB;IACnB,oBAAc;CACf;AACD;IACE,0BAA0B;CAC3B;AACD;IACE,gCAAgC;IAChC,sBAAgB;IAChB,8BAA8B;IAC9B,iBAAiB;CAClB;AACD;IACE,gCAAgC;IAChC,sBAAgB;IAChB,8BAA8B;CAC/B;AACD;IACE,yBAAyB;IACzB,6BAA6B;CAC9B;AACD;IACE,yBAAmB;IACnB,0BAAoB;IACpB,iBAAiB;CAClB;CACF","file":"colmo.css","sourcesContent":["@media screen and (weex-theme: colmo) {\n  .g-popover {\n    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4);\n  }\n  .content-inner {\n    border-radius: 0px;\n    padding: 32px;\n  }\n  .u-popover-arrow {\n    background-color: #292b2f;\n  }\n  .textContent {\n    font-family: PingFangSC-Regular;\n    font-size: 28px;\n    color: rgba(255,255,255,0.80);\n    font-weight: 400;\n  }\n  .btn-text {\n    font-family: PingFangSC-Regular;\n    font-size: 28px;\n    color: rgba(255,255,255,0.80);\n  }\n  .borderBottom {\n    border-bottom-width: 1px;\n    border-bottom-color: #314144;\n  }\n  .u-popover-inner {\n    padding-left: 16px;\n    padding-right: 16px;\n    border-radius: 0;\n  }\n}"],"sourceRoot":""}]);
+exports.push([module.i, "\n@media screen and (weex-theme: colmo) {\n.g-popover[data-v-70015f30] {\n    /* box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4); */\n}\n.content-inner[data-v-70015f30] {\n    border-radius: 0px;\n    padding: 0.42667rem;\n    box-shadow: 0px 0.08rem 0.08rem 0px rgba(0, 0, 0, 0.4);\n}\n.u-popover-arrow[data-v-70015f30] {\n    background-color: #292b2f;\n}\n.textContent[data-v-70015f30] {\n    font-family: PingFangSC-Regular;\n    font-size: 0.37333rem;\n    color: rgba(255,255,255,0.80);\n    font-weight: 400;\n}\n.btn-text[data-v-70015f30] {\n    font-family: PingFangSC-Regular;\n    font-size: 0.37333rem;\n    color: rgba(255,255,255,0.80);\n}\n.borderBottom[data-v-70015f30] {\n    border-bottom-width: 1px;\n    border-bottom-color: #314144;\n}\n.u-popover-inner[data-v-70015f30] {\n    padding-left: 0.21333rem;\n    padding-right: 0.21333rem;\n    border-radius: 0;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-popover2/colmo.css"],"names":[],"mappings":";AAAA;AACE;IACE,qDAAqD;CACtD;AACD;IACE,mBAAmB;IACnB,oBAAc;IACd,uDAA+C;CAChD;AACD;IACE,0BAA0B;CAC3B;AACD;IACE,gCAAgC;IAChC,sBAAgB;IAChB,8BAA8B;IAC9B,iBAAiB;CAClB;AACD;IACE,gCAAgC;IAChC,sBAAgB;IAChB,8BAA8B;CAC/B;AACD;IACE,yBAAyB;IACzB,6BAA6B;CAC9B;AACD;IACE,yBAAmB;IACnB,0BAAoB;IACpB,iBAAiB;CAClB;CACF","file":"colmo.css","sourcesContent":["@media screen and (weex-theme: colmo) {\n  .g-popover {\n    /* box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4); */\n  }\n  .content-inner {\n    border-radius: 0px;\n    padding: 32px;\n    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4);\n  }\n  .u-popover-arrow {\n    background-color: #292b2f;\n  }\n  .textContent {\n    font-family: PingFangSC-Regular;\n    font-size: 28px;\n    color: rgba(255,255,255,0.80);\n    font-weight: 400;\n  }\n  .btn-text {\n    font-family: PingFangSC-Regular;\n    font-size: 28px;\n    color: rgba(255,255,255,0.80);\n  }\n  .borderBottom {\n    border-bottom-width: 1px;\n    border-bottom-color: #314144;\n  }\n  .u-popover-inner {\n    padding-left: 16px;\n    padding-right: 16px;\n    border-radius: 0;\n  }\n}"],"sourceRoot":""}]);
 
 // exports
 
@@ -8989,7 +8989,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.dof-switch-wrapper[data-v-76af8caf] {\n  position: relative;\n  width: 1.28rem;\n  height: 0.64rem;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.dof-switch-loading[data-v-76af8caf] {\n  width: 0.64rem;\n  height: 0.64rem;\n  position: absolute;\n  left: 0.42667rem;\n  top: 0px;\n}\n.switch[data-v-76af8caf] {\n  width: 1.28rem;\n  height: 0.64rem;\n  border-style: solid;\n  /* border-color: #8a8a8f;\n  background-color: #ffffff; */\n  border-width: 0.05333rem;\n  border-radius: 0.32rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.switch-colmo[data-v-76af8caf] {\n  border-width: 0.02667rem;\n}\n.switch-white[data-v-76af8caf] {\n  width: 1.28rem;\n  height: 0.64rem;\n  border-style: solid;\n  border-color: #ffffff;\n  background-color: #000000;\n  border-width: 0.05333rem;\n  border-radius: 0.32rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* margin-right: 12px; */\n}\n.switch-disabled[data-v-76af8caf] {\n  opacity: 0.3;\n}\n.switch-dot[data-v-76af8caf] {\n  border-radius: 0.10667rem;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  position: relative;\n  left: 0.16rem;\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-transition-property: all;\n  transition-property: all;\n  -webkit-transition-duration: 5s;\n          transition-duration: 5s;\n  background-color: transparent;\n}\n.switch-white-dot[data-v-76af8caf] {\n  border-radius: 0.10667rem;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  position: relative;\n  left: 0.16rem;\n  -webkit-transition-property: all;\n  transition-property: all;\n  -webkit-transition-duration: 5s;\n          transition-duration: 5s;\n  background-color: transparent;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-switch/index.vue?17d91795"],"names":[],"mappings":";AAwBA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,SAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA;+BACA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,yBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,sBAAA;EACA,0BAAA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;CACA;AACA;EACA,aAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;UAAA,yBAAA;EACA,iCAAA;EAAA,yBAAA;EACA,gCAAA;UAAA,wBAAA;EACA,8BAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;EAAA,yBAAA;EACA,gCAAA;UAAA,wBAAA;EACA,8BAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"dof-switch-wrapper\">\n    <dof-spinner :type=\"loadingSrc\" class=\"dof-switch-loading\" v-if=\"loading\" />\n    <div\n      ref=\"switch\"\n      @click=\"changeHandler\"\n      :class=\"[type === 'white' ? 'switch-white' : 'switch', checked && switchActiveClass, `switch-${type}`]\"\n      :style=\"Object.assign({}, mrSwitchStyle, customStyle)\"\n      :accessible=\"true\"\n      :aria-label=\"blindHelptext\"\n    >\n      <div\n        :accessible=\"false\"\n        :aria-hidden=\"true\"\n        ref=\"switchDot\"\n        :style=\"dotStyle\"\n        :class=\"[type === 'white' ? 'switch-white-dot' : 'switch-dot']\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<style src=\"./colmo.css\"></style>\n<style scoped>\n.dof-switch-wrapper {\n  position: relative;\n  width: 96px;\n  height: 48px;\n  align-items: center;\n  justify-content: center;\n}\n.dof-switch-loading {\n  width: 48px;\n  height: 48px;\n  position: absolute;\n  left: 32px;\n  top: 0px;\n}\n\n.switch {\n  width: 96px;\n  height: 48px;\n  border-style: solid;\n  /* border-color: #8a8a8f;\n  background-color: #ffffff; */\n  border-width: 4px;\n  border-radius: 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.switch-colmo {\n  border-width: 2px;\n}\n.switch-white {\n  width: 96px;\n  height: 48px;\n  border-style: solid;\n  border-color: #ffffff;\n  background-color: #000000;\n  border-width: 4px;\n  border-radius: 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  /* margin-right: 12px; */\n}\n.switch-disabled {\n  opacity: 0.3;\n}\n.switch-dot {\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  left: 12px;\n  transform-origin: center;\n  transition-property: all;\n  transition-duration: 5s;\n  background-color: transparent;\n}\n.switch-white-dot {\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  left: 12px;\n  transition-property: all;\n  transition-duration: 5s;\n  background-color: transparent;\n}\n</style>\n\n<script>\n// 带switch按钮的cell\nconst animation = weex.requireModule('animation')\nimport { throttle } from '../../helper/utils'\nimport ColmoMixin from '../../mixins/colmo'\nimport { STYLE_MAP } from './style'\nimport DofSpinner from '../dof-spinner'\nexport default {\n  components: { DofSpinner },\n  mixins: [ColmoMixin],\n  props: {\n    checked: {\n      type: Boolean,\n      default: true\n    },\n    type: {\n      type: String,\n      default: 'default'\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    isLightLoading: {\n      type: Boolean,\n      default: false\n    },\n    blindHelptext: {\n      type: String,\n      default: ''\n    },\n    borderColor: {\n      type: String,\n      default: ''\n    },\n    backgroundColor: {\n      type: String,\n      default: ''\n    },\n    isScale: {\n      typeof: Boolean,\n      default: undefined\n    },\n    dotColor: {\n      typeof: String,\n      default: ''\n    }\n  },\n  computed: {\n    loadingSrc() {\n      if (this._isColmo || this.type === 'colmo') return 'colmo'\n      const src = this.isLightLoading ? 'white' : 'black'\n      return src\n    },\n    switchActiveClass() {\n      const { type } = this\n      return `switch-active-${type}`\n    },\n    mrSwitchStyle() {\n      return this.disabled ? { opacity: 0.3 } : this.loading ? { opacity: 0 } : { opacity: 1 }\n    },\n    dotStyle() {\n      return {\n        // 安卓1px渲染误差\n        top: weex.config.env.platform.toLowerCase() === 'android' ? '1px' : '0px'\n      }\n    },\n    customStyle() {\n      let res = {}\n      if (this.checked) {\n        res = { ...STYLE_MAP[this.type] } || {}\n      } else {\n        res = {\n          'border-color': '#8a8a8f',\n          'background-color': '#ffffff'\n        }\n      }\n      // colmo\n      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') {\n        res.borderColor = this.checked ? '#B35336' : '#71717A'\n        res.backgroundColor = 'transparent'\n      }\n\n      if (this.borderColor) res.borderColor = this.borderColor\n      if (this.backgroundColor) res.backgroundColor = this.backgroundColor\n      return res\n    },\n    _dotColor() {\n      let dotColor = ''\n      if (this.checked) {\n        dotColor = this.type === 'white' ? '#000000' : '#ffffff'\n        // colmo\n        if ((this._isColmo && this.type === 'default') || this.type === 'colmo') dotColor = '#B35336'\n        if (this.dotColor) dotColor = this.dotColor\n      } else {\n        dotColor = this.type === 'white' ? '#ffffff' : '#8A8A8F'\n      }\n\n      return dotColor\n    },\n    _isScale() {\n      let isScale = true\n      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') isScale = false\n      if (this.isScale !== undefined) isScale = this.isScale\n      return isScale\n    },\n    leftDotStyle() {\n      return {\n        transform: !this._isScale\n          ? `translateX(2px) scale(${this._isColmo || this.type === 'colmo' ? 2 : 2.25})`\n          : 'translateX(2px) scale(1.0)',\n        backgroundColor: this._dotColor\n      }\n    },\n    rightDotStyle() {\n      let offset = 46\n      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') offset = 50\n      return {\n        backgroundColor: this._dotColor,\n        transform: `translateX(${offset}px) scale(2.25)`\n      }\n    }\n  },\n  data: () => ({}),\n  mounted() {\n    this.handleInit()\n  },\n  methods: {\n    handleInit() {\n      if (this.checked) {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.rightDotStyle,\n            duration: 0\n          })\n      } else {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.leftDotStyle,\n            duration: 0\n          })\n      }\n    },\n    changeHandler: throttle(function() {\n      const { disabled } = this\n      if (!disabled) {\n        this.$emit('dofChange')\n      }\n    }, 300)\n  },\n  watch: {\n    _isColmo() {\n      setTimeout(() => {\n        this.handleInit()\n      }, 0)\n    },\n    checked(newVal, oldVal) {\n      if (newVal === true && oldVal === false) {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.rightDotStyle,\n            duration: 300,\n            timingFunction: 'ease-out'\n          })\n      } else if (newVal === false && oldVal === true) {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.leftDotStyle,\n            duration: 300,\n            timingFunction: 'ease-out'\n          })\n      }\n    }\n  }\n}\n</script>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.dof-switch-wrapper[data-v-76af8caf] {\n  position: relative;\n  width: 1.28rem;\n  height: 0.64rem;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.dof-switch-loading[data-v-76af8caf] {\n  width: 0.64rem;\n  height: 0.64rem;\n  position: absolute;\n  left: 0.42667rem;\n  top: 0px;\n}\n.switch[data-v-76af8caf] {\n  width: 1.28rem;\n  height: 0.64rem;\n  border-style: solid;\n  /* border-color: #8a8a8f;\n  background-color: #ffffff; */\n  border-width: 0.05333rem;\n  border-radius: 0.32rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.switch-colmo[data-v-76af8caf] {\n  border-width: 0.02667rem;\n}\n.switch-white[data-v-76af8caf] {\n  width: 1.28rem;\n  height: 0.64rem;\n  border-style: solid;\n  border-color: #ffffff;\n  background-color: #000000;\n  border-width: 0.05333rem;\n  border-radius: 0.32rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* margin-right: 12px; */\n}\n.switch-disabled[data-v-76af8caf] {\n  opacity: 0.3;\n}\n.switch-dot[data-v-76af8caf] {\n  border-radius: 0.10667rem;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  position: relative;\n  left: 0.16rem;\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-transition-property: all;\n  transition-property: all;\n  -webkit-transition-duration: 5s;\n          transition-duration: 5s;\n  background-color: transparent;\n}\n.switch-white-dot[data-v-76af8caf] {\n  border-radius: 0.10667rem;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  position: relative;\n  left: 0.16rem;\n  -webkit-transition-property: all;\n  transition-property: all;\n  -webkit-transition-duration: 5s;\n          transition-duration: 5s;\n  background-color: transparent;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-switch/index.vue?91ba8824"],"names":[],"mappings":";AAwBA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,SAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA;+BACA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,yBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,sBAAA;EACA,0BAAA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;CACA;AACA;EACA,aAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;UAAA,yBAAA;EACA,iCAAA;EAAA,yBAAA;EACA,gCAAA;UAAA,wBAAA;EACA,8BAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;EAAA,yBAAA;EACA,gCAAA;UAAA,wBAAA;EACA,8BAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"dof-switch-wrapper\">\n    <dof-spinner :type=\"loadingSrc\" class=\"dof-switch-loading\" v-if=\"loading\" />\n    <div\n      ref=\"switch\"\n      @click=\"changeHandler\"\n      :class=\"[type === 'white' ? 'switch-white' : 'switch', checked && switchActiveClass, `switch-${type}`]\"\n      :style=\"Object.assign({}, mrSwitchStyle, customStyle)\"\n      :accessible=\"true\"\n      :aria-label=\"blindHelptext\"\n    >\n      <div\n        :accessible=\"false\"\n        :aria-hidden=\"true\"\n        ref=\"switchDot\"\n        :style=\"dotStyle\"\n        :class=\"[type === 'white' ? 'switch-white-dot' : 'switch-dot']\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<style src=\"./colmo.css\"></style>\n<style scoped>\n.dof-switch-wrapper {\n  position: relative;\n  width: 96px;\n  height: 48px;\n  align-items: center;\n  justify-content: center;\n}\n.dof-switch-loading {\n  width: 48px;\n  height: 48px;\n  position: absolute;\n  left: 32px;\n  top: 0px;\n}\n\n.switch {\n  width: 96px;\n  height: 48px;\n  border-style: solid;\n  /* border-color: #8a8a8f;\n  background-color: #ffffff; */\n  border-width: 4px;\n  border-radius: 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.switch-colmo {\n  border-width: 2px;\n}\n.switch-white {\n  width: 96px;\n  height: 48px;\n  border-style: solid;\n  border-color: #ffffff;\n  background-color: #000000;\n  border-width: 4px;\n  border-radius: 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  /* margin-right: 12px; */\n}\n.switch-disabled {\n  opacity: 0.3;\n}\n.switch-dot {\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  left: 12px;\n  transform-origin: center;\n  transition-property: all;\n  transition-duration: 5s;\n  background-color: transparent;\n}\n.switch-white-dot {\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  left: 12px;\n  transition-property: all;\n  transition-duration: 5s;\n  background-color: transparent;\n}\n</style>\n\n<script>\n// 带switch按钮的cell\nconst animation = weex.requireModule('animation')\nimport { throttle } from '../../helper/utils'\nimport ColmoMixin from '../../mixins/colmo'\nimport { STYLE_MAP } from './style'\nimport DofSpinner from '../dof-spinner'\nimport Utils from '../utils'\n\nexport default {\n  components: { DofSpinner },\n  mixins: [ColmoMixin],\n  props: {\n    checked: {\n      type: Boolean,\n      default: true\n    },\n    type: {\n      type: String,\n      default: 'default'\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    isLightLoading: {\n      type: Boolean,\n      default: false\n    },\n    blindHelptext: {\n      type: String,\n      default: ''\n    },\n    borderColor: {\n      type: String,\n      default: ''\n    },\n    backgroundColor: {\n      type: String,\n      default: ''\n    },\n    isScale: {\n      typeof: Boolean,\n      default: undefined\n    },\n    dotColor: {\n      typeof: String,\n      default: ''\n    }\n  },\n  computed: {\n    loadingSrc() {\n      if (this._isColmo || this.type === 'colmo') return 'colmo'\n      const src = this.isLightLoading ? 'white' : 'black'\n      return src\n    },\n    switchActiveClass() {\n      const { type } = this\n      return `switch-active-${type}`\n    },\n    mrSwitchStyle() {\n      return this.disabled ? { opacity: 0.3 } : this.loading ? { opacity: 0 } : { opacity: 1 }\n    },\n    dotStyle() {\n      return {\n        // 安卓1px渲染误差\n        top: weex.config.env.platform.toLowerCase() === 'android' ? '1px' : '0px'\n      }\n    },\n    customStyle() {\n      let res = {}\n      if (this.checked) {\n        res = { ...STYLE_MAP[this.type] } || {}\n      } else {\n        res = {\n          'border-color': '#8a8a8f',\n          'background-color': '#ffffff'\n        }\n      }\n      // colmo\n      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') {\n        res.borderColor = this.checked ? '#B35336' : '#71717A'\n        res.backgroundColor = 'transparent'\n      }\n\n      if (this.borderColor) res.borderColor = this.borderColor\n      if (this.backgroundColor) res.backgroundColor = this.backgroundColor\n      return res\n    },\n    _dotColor() {\n      let dotColor = ''\n      if (this.checked) {\n        dotColor = this.type === 'white' ? '#000000' : '#ffffff'\n        // colmo\n        if ((this._isColmo && this.type === 'default') || this.type === 'colmo') dotColor = '#B35336'\n        if (this.dotColor) dotColor = this.dotColor\n      } else {\n        dotColor = this.type === 'white' ? '#ffffff' : '#8A8A8F'\n      }\n\n      return dotColor\n    },\n    _isScale() {\n      let isScale = true\n      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') isScale = false\n      if (this.isScale !== undefined) isScale = this.isScale\n      return isScale\n    },\n    leftDotStyle() {\n      return {\n        transform: !this._isScale\n          ? `translateX(2px) scale(${this._isColmo || this.type === 'colmo' ? 2 : 2.25})`\n          : 'translateX(2px) scale(1.0)',\n        backgroundColor: this._dotColor\n      }\n    },\n    rightDotStyle() {\n      let offset = 46\n      if ((this._isColmo && this.type === 'default') || this.type === 'colmo') offset = 50\n      if (Utils.env.isWeb()) offset = 46\n      return {\n        backgroundColor: this._dotColor,\n        transform: `translateX(${offset}px) scale(2.25)`\n      }\n    }\n  },\n  data: () => ({}),\n  mounted() {\n    this.handleInit()\n  },\n  methods: {\n    handleInit() {\n      if (this.checked) {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.rightDotStyle,\n            duration: 0\n          })\n      } else {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.leftDotStyle,\n            duration: 0\n          })\n      }\n    },\n    changeHandler: throttle(function() {\n      const { disabled } = this\n      if (!disabled) {\n        this.$emit('dofChange')\n      }\n    }, 300)\n  },\n  watch: {\n    _isColmo() {\n      setTimeout(() => {\n        this.handleInit()\n      }, 0)\n    },\n    checked(newVal, oldVal) {\n      if (newVal === true && oldVal === false) {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.rightDotStyle,\n            duration: 300,\n            timingFunction: 'ease-out'\n          })\n      } else if (newVal === false && oldVal === true) {\n        animation &&\n          animation.transition(this.$refs.switchDot, {\n            styles: this.leftDotStyle,\n            duration: 300,\n            timingFunction: 'ease-out'\n          })\n      }\n    }\n  }\n}\n</script>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -9059,7 +9059,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.indicator[data-v-7ecb2930] {\n  position: absolute;\n  item-color: rgba(255, 195, 0, .5);\n  item-selected-color: #ffc300;\n  item-size: 0.26667rem;\n  height: 0.26667rem;\n  bottom: 0.32rem;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  width: 0.26667rem;\n  height: 0.26667rem;\n}\n.indicator .weex-indicator-item.weex-indicator-item-active[data-v-7ecb2930] {\n  background-color: #ffc300;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  background-color: rgba(255, 195, 0, .5);\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/index.vue?25abe080","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 13>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 12>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 11>"],"names":[],"mappings":";AA6BA;EACA,mBAAA;EACA,kCAAA;EACA,6BAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;CACA;ACnCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,0BAA0B;CAC3B;ACFD;EACE,wCAAwC;CACzC","file":"index.vue","sourcesContent":["<template>\n  <dof-mask :width=\"width\"\n            :height=\"height\"\n            aria-hidden=\"true\"\n            mask-bg-color=\"transparent\"\n            overlay-opacity=\"0.8\"\n            :show=\"show\"\n            :opacity='opacity'\n            :show-close=\"false\"\n            @dofMaskSetHidden=\"maskOverlayClick\">\n    <slider auto-play=\"false\"\n            v-if=\"show\"\n            :index=\"index\"\n            :interval=\"interval\"\n            :style=\"{ height: height  + 'px'}\">\n      <div v-for=\"(v,index) in imageList\"\n           :style=\"{ height: height  + 'px'}\"\n           :key=\"index\">\n        <image resize=\"cover\"\n               :src=\"v.src\"\n               :style=\"{ height: height + 'px', width: width  + 'px'}\"></image>\n      </div>\n      <indicator class=\"indicator\"\n                 :style=\"indicatorStyle\"></indicator>\n    </slider>\n  </dof-mask>\n</template>\n\n<style scoped>\n  .indicator {\n    position: absolute;\n    item-color: rgba(255, 195, 0, .5);\n    item-selected-color: #ffc300;\n    item-size: 20px;\n    height: 20px;\n    bottom: 24px;\n  }\n</style>\n\n<script>\n  import DofMask from '../dof-mask';\n\n  export default {\n    components: {\n      DofMask\n    },\n    props: {\n      width: {\n        type: [Number, String],\n        default: 750\n      },\n      height: {\n        type: [Number, String],\n        default: 750\n      },\n      show: {\n        type: Boolean,\n        default: false\n      },\n      imageList: Array,\n      indicatorColor: {\n        type: Object,\n        default: () => ({\n          'item-color': 'rgba(255, 195, 0, .5)',\n          'item-selected-color': '#ffc300',\n          'item-size': '20px'\n        })\n      },\n      index: {\n        type: [Number, String],\n        default: 0\n      },\n      interval: {\n        type: [Number, String],\n        default: 3000\n      },\n      opacity: {\n        type: [Number, String],\n        default: 0.6\n      }\n    },\n    computed: {\n      indicatorStyle () {\n        return {\n          width: this.width + 'px',\n          ...this.indicatorColor\n        };\n      }\n    },\n    methods: {\n      maskOverlayClick () {\n        this.$emit('dofLightboxOverlayClicked', {});\n      }\n    }\n  };\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 20px;\n  height: 20px;\n}","\n.indicator .weex-indicator-item.weex-indicator-item-active {\n  background-color: #ffc300;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 195, 0, .5);\n}"],"sourceRoot":""}]);
+exports.push([module.i, "\n.indicator[data-v-7ecb2930] {\n  position: absolute;\n  item-color: rgba(255, 195, 0, .5);\n  item-selected-color: #ffc300;\n  item-size: 0.26667rem;\n  height: 0.26667rem;\n  bottom: 0.32rem;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  width: 0.26667rem;\n  height: 0.26667rem;\n}\n.indicator .weex-indicator-item.weex-indicator-item-active[data-v-7ecb2930] {\n  background-color: #ffc300;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  background-color: rgba(255, 195, 0, .5);\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/index.vue?25abe080","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 15>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 14>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 13>"],"names":[],"mappings":";AA6BA;EACA,mBAAA;EACA,kCAAA;EACA,6BAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;CACA;ACnCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,0BAA0B;CAC3B;ACFD;EACE,wCAAwC;CACzC","file":"index.vue","sourcesContent":["<template>\n  <dof-mask :width=\"width\"\n            :height=\"height\"\n            aria-hidden=\"true\"\n            mask-bg-color=\"transparent\"\n            overlay-opacity=\"0.8\"\n            :show=\"show\"\n            :opacity='opacity'\n            :show-close=\"false\"\n            @dofMaskSetHidden=\"maskOverlayClick\">\n    <slider auto-play=\"false\"\n            v-if=\"show\"\n            :index=\"index\"\n            :interval=\"interval\"\n            :style=\"{ height: height  + 'px'}\">\n      <div v-for=\"(v,index) in imageList\"\n           :style=\"{ height: height  + 'px'}\"\n           :key=\"index\">\n        <image resize=\"cover\"\n               :src=\"v.src\"\n               :style=\"{ height: height + 'px', width: width  + 'px'}\"></image>\n      </div>\n      <indicator class=\"indicator\"\n                 :style=\"indicatorStyle\"></indicator>\n    </slider>\n  </dof-mask>\n</template>\n\n<style scoped>\n  .indicator {\n    position: absolute;\n    item-color: rgba(255, 195, 0, .5);\n    item-selected-color: #ffc300;\n    item-size: 20px;\n    height: 20px;\n    bottom: 24px;\n  }\n</style>\n\n<script>\n  import DofMask from '../dof-mask';\n\n  export default {\n    components: {\n      DofMask\n    },\n    props: {\n      width: {\n        type: [Number, String],\n        default: 750\n      },\n      height: {\n        type: [Number, String],\n        default: 750\n      },\n      show: {\n        type: Boolean,\n        default: false\n      },\n      imageList: Array,\n      indicatorColor: {\n        type: Object,\n        default: () => ({\n          'item-color': 'rgba(255, 195, 0, .5)',\n          'item-selected-color': '#ffc300',\n          'item-size': '20px'\n        })\n      },\n      index: {\n        type: [Number, String],\n        default: 0\n      },\n      interval: {\n        type: [Number, String],\n        default: 3000\n      },\n      opacity: {\n        type: [Number, String],\n        default: 0.6\n      }\n    },\n    computed: {\n      indicatorStyle () {\n        return {\n          width: this.width + 'px',\n          ...this.indicatorColor\n        };\n      }\n    },\n    methods: {\n      maskOverlayClick () {\n        this.$emit('dofLightboxOverlayClicked', {});\n      }\n    }\n  };\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 20px;\n  height: 20px;\n}","\n.indicator .weex-indicator-item.weex-indicator-item-active {\n  background-color: #ffc300;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 195, 0, .5);\n}"],"sourceRoot":""}]);
 
 // exports
 
@@ -9073,7 +9073,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.dof-diamond-tab[data-v-7efcdc57] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.dof-diamond-tab-box[data-v-7efcdc57] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  /* border-radius: 32px; */\n}\n.dof-diamond-tab-item[data-v-7efcdc57] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  position: relative;\n}\n.dof-diamond-tab-item-label[data-v-7efcdc57] {\n  /* height: 64px; */\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.32rem;\n  padding-right: 0.32rem;\n  /* border-width: 2px;\n  border-left-width: 0px;\n  border-right-width: 0px; */\n  border-top-width: 0.02667rem;\n  border-bottom-width: 0.02667rem;\n  font-family: PingFangSC-Regular;\n}\n.label-text[data-v-7efcdc57] {\n  font-family: PingFangSC-Regular;\n  /* 使用1px解决鸿蒙显示多1像素问题 */\n  padding: 1px;\n}\n.label-text-active[data-v-7efcdc57] {\n}\n.first-tab[data-v-7efcdc57] {\n  border-left-width: 0.02667rem;\n  padding-left: 0.42667rem;\n  /* border-radius: 32px 0px 0px 32px; */\n}\n.last-tab[data-v-7efcdc57] {\n  border-right-width: 0.02667rem;\n  padding-right: 0.42667rem;\n  /* border-radius: 0px 32px 32px 0px; */\n}\n.tabLine[data-v-7efcdc57] {\n  /* width: 16px; */\n  /* height: 64px; */\n  overflow: hidden;\n  /* border: 2px solid transparent; */\n  border-top: 0;\n  border-bottom: 0;\n  position: relative;\n}\n.tabLineMaskDown[data-v-7efcdc57] {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  border-top-width: 0.02667rem;\n  -webkit-transform: rotateZ(-77deg);\n          transform: rotateZ(-77deg);\n  -webkit-transform-origin: right top;\n          transform-origin: right top;\n}\n.tabLineMaskUp[data-v-7efcdc57] {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  /* border-top: 2px solid transparent; */\n  -webkit-transform: rotateZ(13deg);\n          transform: rotateZ(13deg);\n  -webkit-transform-origin: right top;\n          transform-origin: right top;\n}\n.border-top[data-v-7efcdc57] {\n  /* width: 18px; */\n  /* height: 4px; */\n  /* 使用border解决ios显示多1像素问题 */\n  border-top-width: 0.05333rem;\n  top: -0.02667rem;\n  left: -0.04rem;\n  position: absolute;\n}\n.border-bottom[data-v-7efcdc57] {\n  /* width: 18px; */\n  height: 0.05333rem;\n  bottom: -0.02667rem;\n  position: absolute;\n}\n.flex-1[data-v-7efcdc57] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-diamond-tab/index.vue?772d2bd6"],"names":[],"mappings":";AAiPA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,sBAAA;EACA,uBAAA;EACA;;6BAEA;EACA,6BAAA;EACA,gCAAA;EACA,gCAAA;CACA;AACA;EACA,gCAAA;EACA,uBAAA;EACA,aAAA;CACA;AACA;CACA;AACA;EACA,8BAAA;EACA,yBAAA;EACA,uCAAA;CACA;AACA;EACA,+BAAA;EACA,0BAAA;EACA,uCAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA;EACA,oCAAA;EACA,cAAA;EACA,iBAAA;EACA,mBAAA;CACA;AACA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;EACA,6BAAA;EACA,mCAAA;UAAA,2BAAA;EACA,oCAAA;UAAA,4BAAA;CACA;AACA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;EACA,wCAAA;EACA,kCAAA;UAAA,0BAAA;EACA,oCAAA;UAAA,4BAAA;CACA;AACA;EACA,kBAAA;EACA,kBAAA;EACA,2BAAA;EACA,6BAAA;EACA,iBAAA;EACA,eAAA;EACA,mBAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,oBAAA;EACA,mBAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"dof-diamond-tab\" @touchend=\"touchEnd\">\n    <div :class=\"['dof-diamond-tab-box', isFlexible && 'flex-1']\" :style=\"{ borderRadius }\">\n      <div\n        v-for=\"(tab, i) in _tabData\"\n        :key=\"i\"\n        :class=\"['dof-diamond-tab-item', isFlexible && 'flex-1']\"\n        @click=\"clickTabItem(i)\"\n        @touchstart=\"touchTabItem(i)\"\n        :style=\"{ left: -i + 'px' }\"\n      >\n        <div\n          :class=\"[\n            'dof-diamond-tab-item-label',\n            i === 0 ? 'first-tab' : '',\n            i === dataLen - 1 ? 'last-tab' : '',\n            isFlexible && 'flex-1'\n          ]\"\n          :style=\"{\n            'border-color': tabActive === i ? activeBorderColor : borderColor,\n            'background-color': touchActive === i ? touchColor : bgColor,\n            height: itemHeight + 'px',\n            'border-top-left-radius': i === 0 ? borderRadius : '0px',\n            'border-bottom-left-radius': i === 0 ? borderRadius : '0px',\n            'border-top-right-radius': i === dataLen - 1 ? borderRadius : '0px',\n            'border-bottom-right-radius': i === dataLen - 1 ? borderRadius : '0px'\n          }\"\n        >\n          <text\n            class=\"label-text\"\n            :style=\"{\n              fontSize: textFontSize,\n              color: tabActive === i || touchActive === i ? activeTextColor : textColor\n            }\"\n            >{{ tab.label.length > labelMaxLen ? tab.label.slice(0, labelMaxLen) + '...' : tab.label }}</text\n          >\n        </div>\n        <!-- 模拟斜杆 -->\n        <div\n          v-if=\"i !== dataLen - 1\"\n          class=\"tabLine\"\n          :style=\"\n            Object.assign(\n              {\n                backgroundColor: bgColor,\n                // 'background-color': touchActive === i ? touchColor : bgColor,\n                'border-left-color': touchActive === i ? touchColor : 'transparent',\n                'border-right-color': touchActive - 1 === i ? touchColor : 'transparent',\n                'border-left-width': !(tabActive === i || tabActive - 1 === i) ? '0px' : '2px',\n                'border-right-width': !(tabActive === i || tabActive - 1 === i) ? '0px' : '3px'\n              },\n              tabLineStyle\n            )\n          \"\n        >\n          <div\n            class=\"tabLineMaskDown\"\n            :style=\"\n              Object.assign(\n                {\n                  'border-color': tabActive === i || tabActive - 1 === i ? activeBorderColor : 'transparent',\n                  'background-color': touchActive - 1 === i ? touchColor : bgColor\n                },\n                maskStyle\n              )\n            \"\n          ></div>\n          <div\n            class=\"tabLineMaskUp\"\n            :style=\"\n              Object.assign(\n                {\n                  'background-color': touchActive === i ? touchColor : bgColor\n                },\n                maskStyle\n              )\n            \"\n          ></div>\n          <div\n            class=\"border-top\"\n            :style=\"{\n              'border-color': tabActive === i ? activeBorderColor : borderColor,\n              // 优化边缘显示\n              width: tabActive - 1 === i ? itemHeight / 4 - 1 + 'px' : itemHeight / 4 + 3 + 'px'\n            }\"\n          ></div>\n          <div\n            class=\"border-bottom\"\n            :style=\"\n              Object.assign(\n                {\n                  'background-color': tabActive - 1 === i ? activeBorderColor : borderColor\n                },\n                fakeBorderStyle\n              )\n            \"\n          ></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    tabData: {\n      type: Array,\n      required: false,\n      default: () => []\n    },\n    active: {\n      type: Number,\n      required: false,\n      default: null\n    },\n    // 背景色\n    bgColor: {\n      type: String,\n      required: false,\n      default: '#151617'\n    },\n    // 选择状态边框颜色\n    activeBorderColor: {\n      type: String,\n      required: false,\n      default: '#b35336'\n    },\n    // 字体大小\n    textFontSize: {\n      type: String,\n      required: false,\n      default: '28px'\n    },\n    // 字体颜色\n    textColor: {\n      type: String,\n      required: false,\n      default: 'rgba(255,255,255,0.40)'\n    },\n    // 选中态字体颜色\n    activeTextColor: {\n      type: String,\n      required: false,\n      default: 'rgba(255, 255, 255, 0.8)'\n    },\n    // 常规边框颜色\n    borderColor: {\n      type: String,\n      required: false,\n      default: 'rgba(61, 61, 66, 1)'\n    },\n    // 点击颜色\n    touchColor: {\n      type: String,\n      required: false,\n      default: '#2d2e2f'\n    },\n    // 高度\n    itemHeight: {\n      type: Number,\n      default: 64\n    },\n    // 限制字数，超出省略号（0为默认）\n    maxLen: {\n      type: Number,\n      default: 0\n    },\n    // 是否撑开\n    isFlexible: {\n      type: Boolean,\n      default: false\n    }\n  },\n  computed: {\n    _tabData() {\n      return this.tabData.map(item => (typeof item === 'string' ? { label: item } : item))\n    },\n    dataLen() {\n      return this.tabData.length\n    },\n    labelMaxLen() {\n      if (this.maxLen) return this.maxLen\n      // 超过3个标签字数最多2个字\n      if (this.tabData.length > 3) return 2\n      // 默认4个字\n      return 4\n    },\n    borderRadius() {\n      return this.itemHeight / 2 + 'px'\n    },\n    tabLineStyle() {\n      return {\n        width: this.itemHeight / 4 + 1 + 'px',\n        height: this.itemHeight + 'px'\n      }\n    },\n    maskStyle() {\n      return {\n        width: this.itemHeight + 2 + 'px',\n        height: this.itemHeight + 2 + 'px'\n      }\n    },\n    fakeBorderStyle() {\n      return {\n        width: this.itemHeight / 4 + 2 + 'px'\n      }\n    }\n  },\n  watch: {\n    active: {\n      handler(val, oldVal) {\n        this.tabActive = val\n      }\n    },\n    tabActive(val) {\n      this.$emit('tabActiveChange', val)\n    }\n  },\n  data() {\n    return {\n      tabActive: this.active,\n      touchActive: null\n    }\n  },\n  mounted() {},\n  methods: {\n    clickTabItem(i) {\n      this.tabActive = i\n    },\n    touchTabItem(i) {\n      this.touchActive = i\n    },\n    touchEnd() {\n      this.touchActive = null\n    }\n  }\n}\n</script>\n\n<style scoped>\n.dof-diamond-tab {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n}\n.dof-diamond-tab-box {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  /* border-radius: 32px; */\n}\n.dof-diamond-tab-item {\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n.dof-diamond-tab-item-label {\n  /* height: 64px; */\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  /* border-width: 2px;\n  border-left-width: 0px;\n  border-right-width: 0px; */\n  border-top-width: 2px;\n  border-bottom-width: 2px;\n  font-family: PingFangSC-Regular;\n}\n.label-text {\n  font-family: PingFangSC-Regular;\n  /* 使用1px解决鸿蒙显示多1像素问题 */\n  padding: 1px;\n}\n.label-text-active {\n}\n.first-tab {\n  border-left-width: 2px;\n  padding-left: 32px;\n  /* border-radius: 32px 0px 0px 32px; */\n}\n.last-tab {\n  border-right-width: 2px;\n  padding-right: 32px;\n  /* border-radius: 0px 32px 32px 0px; */\n}\n\n.tabLine {\n  /* width: 16px; */\n  /* height: 64px; */\n  overflow: hidden;\n  /* border: 2px solid transparent; */\n  border-top: 0;\n  border-bottom: 0;\n  position: relative;\n}\n.tabLineMaskDown {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  border-top-width: 2px;\n  transform: rotateZ(-77deg);\n  transform-origin: right top;\n}\n.tabLineMaskUp {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  /* border-top: 2px solid transparent; */\n  transform: rotateZ(13deg);\n  transform-origin: right top;\n}\n.border-top {\n  /* width: 18px; */\n  /* height: 4px; */\n  /* 使用border解决ios显示多1像素问题 */\n  border-top-width: 4px;\n  top: -2px;\n  left: -3px;\n  position: absolute;\n}\n.border-bottom {\n  /* width: 18px; */\n  height: 4px;\n  bottom: -2px;\n  position: absolute;\n}\n.flex-1 {\n  flex: 1;\n}\n</style>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.dof-diamond-tab[data-v-7efcdc57] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.dof-diamond-tab-box[data-v-7efcdc57] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  /* border-radius: 32px; */\n}\n.dof-diamond-tab-item[data-v-7efcdc57] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  position: relative;\n}\n.dof-diamond-tab-item-label[data-v-7efcdc57] {\n  /* height: 64px; */\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.32rem;\n  padding-right: 0.32rem;\n  /* border-width: 2px;\n  border-left-width: 0px;\n  border-right-width: 0px; */\n  border-top-width: 0.02667rem;\n  border-bottom-width: 0.02667rem;\n  font-family: PingFangSC-Regular;\n}\n.label-text[data-v-7efcdc57] {\n  font-family: PingFangSC-Regular;\n  /* 使用1px解决鸿蒙显示多1像素问题 */\n  padding: 1px;\n}\n.label-text-active[data-v-7efcdc57] {\n}\n.first-tab[data-v-7efcdc57] {\n  border-left-width: 0.02667rem;\n  padding-left: 0.42667rem;\n  /* border-radius: 32px 0px 0px 32px; */\n}\n.last-tab[data-v-7efcdc57] {\n  border-right-width: 0.02667rem;\n  padding-right: 0.42667rem;\n  /* border-radius: 0px 32px 32px 0px; */\n}\n.tabLine[data-v-7efcdc57] {\n  /* width: 16px; */\n  /* height: 64px; */\n  overflow: hidden;\n  /* border: 2px solid transparent; */\n  border-top: 0;\n  border-bottom: 0;\n  position: relative;\n}\n.tabLineMaskDown[data-v-7efcdc57] {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  /* border-top-width: 2px; */\n  -webkit-transform: rotateZ(-77deg);\n          transform: rotateZ(-77deg);\n  -webkit-transform-origin: right top;\n          transform-origin: right top;\n}\n.tabLineMaskUp[data-v-7efcdc57] {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  /* border-top: 2px solid transparent; */\n  -webkit-transform: rotateZ(13deg);\n          transform: rotateZ(13deg);\n  -webkit-transform-origin: right top;\n          transform-origin: right top;\n}\n.border-top[data-v-7efcdc57] {\n  /* width: 18px; */\n  /* height: 4px; */\n  /* 使用border解决ios显示多1像素问题 */\n  border-top-width: 0.05333rem;\n  top: -0.02667rem;\n  left: -0.04rem;\n  right: -0.04rem;\n  position: absolute;\n}\n.border-bottom[data-v-7efcdc57] {\n  /* width: 18px; */\n  height: 0.05333rem;\n  bottom: -0.02667rem;\n  position: absolute;\n  left: -0.04rem;\n  right: -0.04rem;\n}\n.slash[data-v-7efcdc57] {\n  width: 0.02667rem;\n  position: absolute;\n  top: 0px;\n  bottom: 0px;\n  -webkit-transform-origin: center center;\n          transform-origin: center center;\n  -webkit-transform: rotate(13deg);\n          transform: rotate(13deg);\n}\n.flex-1[data-v-7efcdc57] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-diamond-tab/index.vue?8d2eb254"],"names":[],"mappings":";AAkPA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,sBAAA;EACA,uBAAA;EACA;;6BAEA;EACA,6BAAA;EACA,gCAAA;EACA,gCAAA;CACA;AACA;EACA,gCAAA;EACA,uBAAA;EACA,aAAA;CACA;AACA;CACA;AACA;EACA,8BAAA;EACA,yBAAA;EACA,uCAAA;CACA;AACA;EACA,+BAAA;EACA,0BAAA;EACA,uCAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA;EACA,oCAAA;EACA,cAAA;EACA,iBAAA;EACA,mBAAA;CACA;AACA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;EACA,4BAAA;EACA,mCAAA;UAAA,2BAAA;EACA,oCAAA;UAAA,4BAAA;CACA;AACA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;EACA,wCAAA;EACA,kCAAA;UAAA,0BAAA;EACA,oCAAA;UAAA,4BAAA;CACA;AACA;EACA,kBAAA;EACA,kBAAA;EACA,2BAAA;EACA,6BAAA;EACA,iBAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,oBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,SAAA;EACA,YAAA;EACA,wCAAA;UAAA,gCAAA;EACA,iCAAA;UAAA,yBAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"dof-diamond-tab\" @touchend=\"touchEnd\">\n    <div :class=\"['dof-diamond-tab-box', isFlexible && 'flex-1']\" :style=\"{ borderRadius }\">\n      <div\n        v-for=\"(tab, i) in _tabData\"\n        :key=\"i\"\n        :class=\"['dof-diamond-tab-item', isFlexible && 'flex-1']\"\n        @click=\"clickTabItem(i)\"\n        @touchstart=\"touchTabItem(i)\"\n        :style=\"{ left: -i + 'px' }\"\n      >\n        <div\n          :class=\"[\n            'dof-diamond-tab-item-label',\n            i === 0 ? 'first-tab' : '',\n            i === dataLen - 1 ? 'last-tab' : '',\n            isFlexible && 'flex-1'\n          ]\"\n          :style=\"{\n            'border-color': tabActive === i ? activeBorderColor : borderColor,\n            'background-color': touchActive === i ? touchColor : bgColor,\n            height: itemHeight + 'px',\n            'border-top-left-radius': i === 0 ? borderRadius : '0px',\n            'border-bottom-left-radius': i === 0 ? borderRadius : '0px',\n            'border-top-right-radius': i === dataLen - 1 ? borderRadius : '0px',\n            'border-bottom-right-radius': i === dataLen - 1 ? borderRadius : '0px'\n          }\"\n        >\n          <text\n            class=\"label-text\"\n            :style=\"{\n              fontSize: textFontSize,\n              color: tabActive === i || touchActive === i ? activeTextColor : textColor\n            }\"\n            >{{ tab.label.length > labelMaxLen ? tab.label.slice(0, labelMaxLen) + '...' : tab.label }}</text\n          >\n        </div>\n        <!-- 模拟斜杆 -->\n        <div\n          v-if=\"i !== dataLen - 1\"\n          class=\"tabLine\"\n          :style=\"\n            Object.assign(\n              {\n                backgroundColor: bgColor\n              },\n              tabLineStyle\n            )\n          \"\n        >\n          <div\n            class=\"tabLineMaskDown\"\n            :style=\"\n              Object.assign(\n                {\n                  'background-color': touchActive - 1 === i ? touchColor : bgColor\n                },\n                maskStyle\n              )\n            \"\n          ></div>\n          <div\n            class=\"tabLineMaskUp\"\n            :style=\"\n              Object.assign(\n                {\n                  'background-color': touchActive === i ? touchColor : bgColor\n                },\n                maskStyle\n              )\n            \"\n          ></div>\n          <div\n            class=\"border-top\"\n            :style=\"{\n              'border-color': tabActive === i ? activeBorderColor : borderColor\n              // 优化边缘显示\n              // width: tabActive - 1 === i ? itemHeight / 4 - 1 + 'px' : itemHeight / 4 + 3 + 'px'\n            }\"\n          ></div>\n          <div\n            class=\"border-bottom\"\n            :style=\"\n              Object.assign(\n                {\n                  'background-color': tabActive - 1 === i ? activeBorderColor : borderColor\n                }\n                // fakeBorderStyle\n              )\n            \"\n          ></div>\n          <div\n            class=\"slash\"\n            :style=\"{\n              left: itemHeight / 8 - 1 + 'px',\n              'background-color': tabActive === i || tabActive - 1 === i ? activeBorderColor : 'transparent'\n            }\"\n          ></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    tabData: {\n      type: Array,\n      required: false,\n      default: () => []\n    },\n    active: {\n      type: Number,\n      required: false,\n      default: null\n    },\n    // 背景色\n    bgColor: {\n      type: String,\n      required: false,\n      default: '#151617'\n    },\n    // 选择状态边框颜色\n    activeBorderColor: {\n      type: String,\n      required: false,\n      default: '#b35336'\n    },\n    // 字体大小\n    textFontSize: {\n      type: String,\n      required: false,\n      default: '28px'\n    },\n    // 字体颜色\n    textColor: {\n      type: String,\n      required: false,\n      default: 'rgba(255,255,255,0.40)'\n    },\n    // 选中态字体颜色\n    activeTextColor: {\n      type: String,\n      required: false,\n      default: 'rgba(255, 255, 255, 0.8)'\n    },\n    // 常规边框颜色\n    borderColor: {\n      type: String,\n      required: false,\n      default: 'rgba(61, 61, 66, 1)'\n    },\n    // 点击颜色\n    touchColor: {\n      type: String,\n      required: false,\n      default: '#2d2e2f'\n    },\n    // 高度\n    itemHeight: {\n      type: Number,\n      default: 64\n    },\n    // 限制字数，超出省略号（0为默认）\n    maxLen: {\n      type: Number,\n      default: 0\n    },\n    // 是否撑开\n    isFlexible: {\n      type: Boolean,\n      default: false\n    }\n  },\n  computed: {\n    _tabData() {\n      return this.tabData.map(item => (typeof item === 'string' ? { label: item } : item))\n    },\n    dataLen() {\n      return this.tabData.length\n    },\n    labelMaxLen() {\n      if (this.maxLen) return this.maxLen\n      // 超过3个标签字数最多2个字\n      if (this.tabData.length > 3) return 2\n      // 默认4个字\n      return 4\n    },\n    borderRadius() {\n      return this.itemHeight / 2 + 'px'\n    },\n    tabLineStyle() {\n      return {\n        width: this.itemHeight / 4 + 1 + 'px',\n        height: this.itemHeight + 'px'\n      }\n    },\n    maskStyle() {\n      return {\n        width: this.itemHeight + 2 + 'px',\n        height: this.itemHeight + 2 + 'px'\n      }\n    },\n    fakeBorderStyle() {\n      return {\n        width: this.itemHeight / 4 + 2 + 'px'\n      }\n    }\n  },\n  watch: {\n    active: {\n      handler(val, oldVal) {\n        this.tabActive = val\n      }\n    },\n    tabActive(val) {\n      this.$emit('tabActiveChange', val)\n    }\n  },\n  data() {\n    return {\n      tabActive: this.active,\n      touchActive: null\n    }\n  },\n  mounted() {},\n  methods: {\n    clickTabItem(i) {\n      this.tabActive = i\n    },\n    touchTabItem(i) {\n      this.touchActive = i\n    },\n    touchEnd() {\n      this.touchActive = null\n    }\n  }\n}\n</script>\n\n<style scoped>\n.dof-diamond-tab {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n}\n.dof-diamond-tab-box {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  /* border-radius: 32px; */\n}\n.dof-diamond-tab-item {\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n.dof-diamond-tab-item-label {\n  /* height: 64px; */\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  /* border-width: 2px;\n  border-left-width: 0px;\n  border-right-width: 0px; */\n  border-top-width: 2px;\n  border-bottom-width: 2px;\n  font-family: PingFangSC-Regular;\n}\n.label-text {\n  font-family: PingFangSC-Regular;\n  /* 使用1px解决鸿蒙显示多1像素问题 */\n  padding: 1px;\n}\n.label-text-active {\n}\n.first-tab {\n  border-left-width: 2px;\n  padding-left: 32px;\n  /* border-radius: 32px 0px 0px 32px; */\n}\n.last-tab {\n  border-right-width: 2px;\n  padding-right: 32px;\n  /* border-radius: 0px 32px 32px 0px; */\n}\n\n.tabLine {\n  /* width: 16px; */\n  /* height: 64px; */\n  overflow: hidden;\n  /* border: 2px solid transparent; */\n  border-top: 0;\n  border-bottom: 0;\n  position: relative;\n}\n.tabLineMaskDown {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  /* border-top-width: 2px; */\n  transform: rotateZ(-77deg);\n  transform-origin: right top;\n}\n.tabLineMaskUp {\n  /* width: 66x; */\n  /* height: 66px; */\n  position: absolute;\n  right: 0;\n  top: 0;\n  /* border-top: 2px solid transparent; */\n  transform: rotateZ(13deg);\n  transform-origin: right top;\n}\n.border-top {\n  /* width: 18px; */\n  /* height: 4px; */\n  /* 使用border解决ios显示多1像素问题 */\n  border-top-width: 4px;\n  top: -2px;\n  left: -3px;\n  right: -3px;\n  position: absolute;\n}\n.border-bottom {\n  /* width: 18px; */\n  height: 4px;\n  bottom: -2px;\n  position: absolute;\n  left: -3px;\n  right: -3px;\n}\n.slash {\n  width: 2px;\n  position: absolute;\n  top: 0px;\n  bottom: 0px;\n  transform-origin: center center;\n  transform: rotate(13deg);\n}\n.flex-1 {\n  flex: 1;\n}\n</style>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -9157,7 +9157,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.container[data-v-89145938] {\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n.dof-skid[data-v-89145938] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n\n/* \n.swipe-action-right {\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n}\n\n.swipeItem{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n}\n.swipeText{\n  flex: 1;\n  color: #FFFFFF;\n  text-align: center;\n  align-items: center;\n  lines:1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n} */\n\n/* android */\n.itemWrap[data-v-89145938] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n          justify-content: flex-start;\n  -webkit-box-align: stretch;\n  -webkit-align-items: stretch;\n          align-items: stretch;\n}\n.swipe-action-right[data-v-89145938] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n          justify-content: flex-start;\n  -webkit-box-align: stretch;\n  -webkit-align-items: stretch;\n          align-items: stretch;\n  overflow: hidden;\n}\n.swipeItem[data-v-89145938] {\n  /* width: 160px; */\n  /* height: 160px; */\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  position: relative;\n}\n.mask[data-v-89145938] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(255, 255, 255, 0);\n}\n.mask[data-v-89145938]:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.swipeText[data-v-89145938] {\n  font-size: 0.42667rem;\n  color: #ffffff;\n  text-align: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  lines: 2;\n  line-height: 0.64rem;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 2;\n}\n.cellBox[data-v-89145938] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swipe-action/index.vue?72229d59","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swipe-action/<no source>"],"names":[],"mappings":";AAgGA;EACA,gCAAA;EACA,iBAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,gCAAA;EACA,iBAAA;CACA;;AAEA;;;;;;;;;;;;;;;;;;;;;IAqBA;;AAEA,aAAA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,yCAAA;CACA;AACA;EACA,2CAAA;CACA;AAEA;EACA,sBAAA;EACA,eAAA;EACA,mBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,SAAA;EACA,qBAAA;EACA,wBAAA;EACA,iBAAA;EC3KA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CD4KA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <div v-if=\"isAndroid\" class=\"container\" :style=\"{ width: _cellWidth + 'px', 'padding-right': padding + 'px' }\">\n      <div\n        class=\"itemWrap\"\n        ref=\"menuItem\"\n        :style=\"{ width: _cellWidth + rightWidth(item) + 'px' }\"\n        v-for=\"(item, index) in listData\"\n        :key=\"index\"\n        @swipe=\"slideMenu($event, index, item.rightItem.length)\"\n        @touchend=\"touchend\"\n      >\n        <div v-if=\"padding\" :style=\"{ width: padding + 'px' }\"></div>\n        <div class=\"cellBox\">\n          <dof-cell\n            ref=\"cell\"\n            v-bind=\"item\"\n            :isHighlight=\"isHighlight\"\n            :click-activied=\"false\"\n            @dofCellClicked=\"cellCanClick ? dofCellClicked(index) : ''\"\n          >\n            <dof-switch\n              v-if=\"item.switchVal !== undefined\"\n              slot=\"switch\"\n              :checked=\"item.switchVal\"\n              @dof-change=\"handleSwitchChange(item)\"\n            ></dof-switch>\n          </dof-cell>\n        </div>\n        <div\n          class=\"swipe-action-right\"\n          v-if=\"item.rightItem && item.rightItem.length > 0\"\n          :style=\"{ width: rightWidth(item) + 'px', paddingLeft: padding ? '16px' : '0px' }\"\n        >\n          <div\n            :class=\"['swipeItem']\"\n            v-for=\"(rightCon, i) in item.rightItem\"\n            :key=\"i\"\n            :style=\"{ backgroundColor: rightCon.bgColor }\"\n          >\n            <text class=\"swipeText\">{{ rightCon.text }}</text>\n            <div class=\"mask\" @click=\"onRightNode(index, i, rightCon.text)\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-else class=\"container\" :style=\"{ width: _cellWidth + 'px', 'padding-right': padding + 'px' }\">\n      <div\n        ref=\"skid\"\n        v-for=\"(item, index) of listData\"\n        :key=\"'skid-' + index\"\n        class=\"dof-skid\"\n        :style=\"{ width: _cellWidth + rightWidth(item) + 'px' }\"\n        @horizontalpan=\"e => !isAndroid && onPanStart(e, item, index, item.rightItem ? item.rightItem.length : 0)\"\n        @panend=\"e => onPanEnd(e, item, index)\"\n      >\n        <div v-if=\"padding\" :style=\"{ width: padding + 'px' }\"></div>\n        <!-- 由于dofcell组件没有设置宽度，所以需要处理 -->\n        <div class=\"cellBox\">\n          <dof-cell\n            ref=\"cell\"\n            v-bind=\"item\"\n            :isHighlight=\"isHighlight\"\n            :click-activied=\"false\"\n            @dofCellClicked.stop=\"dofCellClicked(index)\"\n          >\n            <dof-switch\n              v-if=\"item.switchVal !== undefined\"\n              slot=\"switch\"\n              :checked=\"item.switchVal\"\n              @dof-change=\"handleSwitchChange(item)\"\n            ></dof-switch>\n          </dof-cell>\n        </div>\n\n        <div\n          class=\"swipe-action-right\"\n          v-if=\"item.rightItem && item.rightItem.length > 0\"\n          :style=\"{ width: rightWidth(item) + 'px', paddingLeft: padding ? '16px' : '0px' }\"\n        >\n          <div\n            :class=\"['swipeItem']\"\n            v-for=\"(rightCon, i) in item.rightItem\"\n            :key=\"i\"\n            :style=\"{ backgroundColor: rightCon.bgColor }\"\n          >\n            <text class=\"swipeText\">{{ rightCon.text }}</text>\n            <div class=\"mask\" @click=\"onRightNode(index, i, rightCon.text)\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.container {\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n.dof-skid {\n  flex-direction: row;\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n\n/* \n.swipe-action-right {\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n}\n\n.swipeItem{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n}\n.swipeText{\n  flex: 1;\n  color: #FFFFFF;\n  text-align: center;\n  align-items: center;\n  lines:1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n} */\n\n/* android */\n\n.itemWrap {\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n.swipe-action-right {\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  overflow: hidden;\n}\n.swipeItem {\n  /* width: 160px; */\n  /* height: 160px; */\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n  position: relative;\n}\n.mask {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(255, 255, 255, 0);\n}\n.mask:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.swipeText {\n  font-size: 32px;\n  color: #ffffff;\n  text-align: center;\n  align-items: center;\n  lines: 2;\n  line-height: 48px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.cellBox {\n  flex: 1;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nimport Binding from 'weex-bindingx/lib/index.weex.js'\nconst animation = weex.requireModule('animation')\nimport Utils from '../utils'\nconst modal = weex.requireModule('modal')\nconst dom = weex.requireModule('dom')\nimport DofCell from '../dof-cell'\nimport DofSwitch from '../dof-switch'\n\nexport default {\n  props: {\n    listData: {\n      type: Array,\n      default: () => []\n    },\n    // styles: {\n    //   type: Object,\n    //   default: ()=>({})\n    // }\n    cellWidth: {\n      type: Number,\n      default: 0\n    },\n    padding: {\n      type: Number,\n      default: 0\n    }\n  },\n  computed: {\n    _cellWidth() {\n      if (this.cellWidth) return this.cellWidth\n      if (this.padding) return 750 - this.padding\n      return 750\n    }\n  },\n  components: {\n    DofCell,\n    DofSwitch\n  },\n  data() {\n    return {\n      mobileX: 0,\n      webStarX: 0,\n      saveIdx: null,\n      isAndroid: Utils.env.isAndroid(),\n      isIOS: Utils.env.isIOS(),\n\n      cellCanClick: true, //android\n      isHighlight: false\n    }\n  },\n\n  mounted() {},\n\n  methods: {\n    dofCellClicked(index) {\n      //点击触发滑动恢复初始化\n      if (this.isAndroid) {\n        this.rightSlide() // 列表初始化\n        this.cellCanClick && this.$emit('dofCellClicked', { index })\n      } else {\n        for (let index = 0; index < this.listData.length; index++) {\n          this.special(this.$refs.skid[index], {\n            transform: 'translate(0, 0)'\n          })\n        }\n        this.$emit('dofCellClicked', { index })\n      }\n    },\n\n    special(dom, styles) {\n      animation.transition(dom, {\n        styles,\n        duration: 150, // ms\n        timingFunction: 'ease',\n        delay: 0 // ms\n      })\n    },\n    onRightNode(index, i, text) {\n      if (this.isAndroid) {\n        this.rightSlide()\n        this.$emit('dofRightClicked', { index, i, text })\n      } else {\n        this.special(this.$refs.skid[this.saveIdx], {\n          transform: 'translate(0, 0)'\n        })\n        this.$emit('dofRightClicked', { index, i, text })\n      }\n    },\n\n    onPanEnd(e, node, i) {\n      if (Utils.env.isWeb()) {\n        const webEndX = e.changedTouches[0].pageX\n        this.movingDistance(webEndX - this.webStarX, node, this.$refs.skid[i])\n      }\n    },\n\n    // 使用官方的pan事件解决某些ios设备使用@swipe不能滑动的问题\n    onPanStart: function(e, node, i, len) {\n      const { saveIdx } = this\n      if (saveIdx !== i && saveIdx !== null && this.$refs.skid[saveIdx]) {\n        this.special(this.$refs.skid[saveIdx], {\n          transform: 'translate(0, 0)'\n        })\n        this.mobileX = 0\n      }\n      this.saveIdx = i\n      !Utils.env.isWeb() ? this.mobile(e, node, i, len) : this.web(e, node, i)\n      e.stopPropagation()\n    },\n    web(e, node, i) {\n      this.webStarX = e.changedTouches[0].pageX\n    },\n    mobile(e, node, i, len) {\n      var el = this.$refs['skid'][i]\n      Binding.bind(\n        {\n          anchor: el.ref,\n          eventType: 'pan',\n          props: [\n            {\n              element: el.ref,\n              property: 'transform.translateX',\n              // expression: `x+${this.isAndroid ? 0 : this.mobileX}`\n              expression: this.rightWidth(node) //处理ios设备左滑移动距离，防止闪烁\n            }\n          ]\n        },\n        e => {\n          const { state, deltaX } = e\n          if (state === 'end') {\n            this.mobileX = deltaX\n            // this.movingDistance(this.mobileX, node, el);\n            this.movingDistance(e.deltaX, node, el) //add by lau\n          }\n        }\n      )\n    },\n    movingDistance(scope, node, el) {\n      const len = node.rightItem ? node.rightItem.length : 0\n      const distance = -this.rightWidth(node)\n      // if (scope < -80*len) {\n      //   this.special(el, {\n      //     transform: `translate(${distance}px, 0)`\n      //   });\n      //   this.mobileX = distance;\n      // } else {\n      //   this.special(el, {\n      //     transform: 'translate(0, 0)'\n      //   });\n      //   this.mobileX = 0;\n      // }\n\n      //modify by lau\n      if (scope < 0) {\n        this.special(el, {\n          transform: `translate(${distance}px, 0)`\n        })\n      } else if (scope > 0) {\n        this.special(el, {\n          transform: 'translate(0, 0)'\n        })\n      } else {\n        return\n      }\n    },\n\n    // 适配Android\n    // 经n次尝试和测试后，发现weex的click事件和touchend事件冲突, 防止滑动后触发click事件\n    // 这里异步处理，touchend事件结束后才激活向上传递的click事件\n    touchend() {\n      setTimeout(() => {\n        this.cellCanClick = true\n      }, 100)\n    },\n\n    slideMenu(e, index, length) {\n      this.cellCanClick = false\n      let listItems = this.$refs.menuItem\n      let ele = this.$refs.menuItem[index]\n      let direction = e.direction\n      if (direction == 'left') {\n        this.leftSlide(e, ele, length, this.listData[index])\n      } else if (direction == 'right') {\n        this.rightSlide(ele)\n      }\n      e.stopPropagation()\n    },\n\n    // @params ele 要执行动画的元素\n    leftSlide(e, ele, length, item) {\n      this.rightSlide()\n      animation.transition(ele, {\n        styles: {\n          transform: `translateX(-${this.rightWidth(item)}px)`\n        },\n        duration: 150, //ms\n        timingFunction: 'ease',\n        // needLayout: false,   //变化后是否刷新页面\n        delay: 0 //ms\n      })\n      e.stopPropagation()\n    },\n\n    rightSlide() {\n      let listItems = this.$refs.menuItem\n      for (let i = 0; i < listItems.length; i++) {\n        animation.transition(\n          listItems[i],\n          {\n            styles: {\n              transform: 'translateX(0px)'\n            },\n            duration: 100, //ms\n            timingFunction: 'ease-in',\n            needLayout: true,\n            delay: 0 //ms\n          },\n          function() {}\n        )\n      }\n      return false\n    },\n\n    rightWidth(item) {\n      if (item.rightItem && item.rightItem.length) {\n        return item.rightItem.reduce((pre, cur) => pre + (cur.width || 160), 0)\n      }\n      return 0\n    },\n    handleSwitchChange(item) {\n      item.switchVal = !item.switchVal\n      this.$emit('switchChange', item)\n    }\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
+exports.push([module.i, "\n.container[data-v-89145938] {\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n.dof-skid[data-v-89145938] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n\n/* \n.swipe-action-right {\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n}\n\n.swipeItem{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n}\n.swipeText{\n  flex: 1;\n  color: #FFFFFF;\n  text-align: center;\n  align-items: center;\n  lines:1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n} */\n\n/* android */\n.itemWrap[data-v-89145938] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n          justify-content: flex-start;\n  -webkit-box-align: stretch;\n  -webkit-align-items: stretch;\n          align-items: stretch;\n}\n.swipe-action-right[data-v-89145938] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n          justify-content: flex-start;\n  -webkit-box-align: stretch;\n  -webkit-align-items: stretch;\n          align-items: stretch;\n  overflow: hidden;\n}\n.swipeItem[data-v-89145938] {\n  /* width: 160px; */\n  /* height: 160px; */\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  position: relative;\n}\n.mask[data-v-89145938] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(255, 255, 255, 0);\n}\n.mask[data-v-89145938]:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.swipeText[data-v-89145938] {\n  font-size: 0.42667rem;\n  color: #ffffff;\n  text-align: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  lines: 2;\n  line-height: 0.64rem;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 2;\n}\n.cellBox[data-v-89145938] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swipe-action/index.vue?6e28aba0","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swipe-action/<no source>"],"names":[],"mappings":";AA+FA;EACA,gCAAA;EACA,iBAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,gCAAA;EACA,iBAAA;CACA;;AAEA;;;;;;;;;;;;;;;;;;;;;IAqBA;;AAEA,aAAA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,yCAAA;CACA;AACA;EACA,2CAAA;CACA;AAEA;EACA,sBAAA;EACA,eAAA;EACA,mBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,SAAA;EACA,qBAAA;EACA,wBAAA;EACA,iBAAA;EC1KA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CD2KA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <div v-if=\"!isIOS\" class=\"container\" :style=\"{ width: _cellWidth + 'px', 'padding-right': padding + 'px' }\">\n      <div\n        class=\"itemWrap\"\n        ref=\"menuItem\"\n        :style=\"{ width: _cellWidth + rightWidth(item) + 'px' }\"\n        v-for=\"(item, index) in listData\"\n        :key=\"index\"\n        @swipe=\"slideMenu($event, index, item)\"\n        @touchend=\"touchend\"\n      >\n        <div v-if=\"padding\" :style=\"{ width: padding + 'px' }\"></div>\n        <div class=\"cellBox\">\n          <dof-cell\n            ref=\"cell\"\n            v-bind=\"item\"\n            :isHighlight=\"isHighlight\"\n            :click-activied=\"false\"\n            @dofCellClicked=\"cellCanClick ? dofCellClicked(index) : ''\"\n          >\n            <dof-switch\n              v-if=\"item.switchVal !== undefined\"\n              slot=\"switch\"\n              :checked=\"item.switchVal\"\n              @dof-change=\"handleSwitchChange(item)\"\n            ></dof-switch>\n          </dof-cell>\n        </div>\n        <div\n          class=\"swipe-action-right\"\n          v-if=\"item.rightItem && item.rightItem.length > 0\"\n          :style=\"{ width: rightWidth(item) + 'px', paddingLeft: padding ? '16px' : '0px' }\"\n        >\n          <div\n            :class=\"['swipeItem']\"\n            v-for=\"(rightCon, i) in item.rightItem\"\n            :key=\"i\"\n            :style=\"{ backgroundColor: rightCon.bgColor }\"\n          >\n            <text class=\"swipeText\">{{ rightCon.text }}</text>\n            <div class=\"mask\" @click=\"onRightNode(index, i, rightCon.text)\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-else class=\"container\" :style=\"{ width: _cellWidth + 'px', 'padding-right': padding + 'px' }\">\n      <div\n        ref=\"skid\"\n        v-for=\"(item, index) of listData\"\n        :key=\"'skid-' + index\"\n        class=\"dof-skid\"\n        :style=\"{ width: _cellWidth + rightWidth(item) + 'px' }\"\n        @horizontalpan=\"handleHorizontalpan(event, item, index)\"\n        @panend=\"handlePanEnd(event, item, index)\"\n      >\n        <div v-if=\"padding\" :style=\"{ width: padding + 'px' }\"></div>\n        <div class=\"cellBox\">\n          <dof-cell\n            ref=\"cell\"\n            v-bind=\"item\"\n            :isHighlight=\"isHighlight\"\n            :click-activied=\"false\"\n            @dofCellClicked.stop=\"dofCellClicked(index)\"\n          >\n            <dof-switch\n              v-if=\"item.switchVal !== undefined\"\n              slot=\"switch\"\n              :checked=\"item.switchVal\"\n              @dof-change=\"handleSwitchChange(item)\"\n            ></dof-switch>\n          </dof-cell>\n        </div>\n\n        <div\n          class=\"swipe-action-right\"\n          v-if=\"item.rightItem && item.rightItem.length > 0\"\n          :style=\"{ width: rightWidth(item) + 'px', paddingLeft: padding ? '16px' : '0px' }\"\n        >\n          <div\n            :class=\"['swipeItem']\"\n            v-for=\"(rightCon, i) in item.rightItem\"\n            :key=\"i\"\n            :style=\"{ backgroundColor: rightCon.bgColor }\"\n          >\n            <text class=\"swipeText\">{{ rightCon.text }}</text>\n            <div class=\"mask\" @click=\"onRightNode(index, i, rightCon.text)\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.container {\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n.dof-skid {\n  flex-direction: row;\n  /* background-color: #ffffff; */\n  overflow: hidden;\n}\n\n/* \n.swipe-action-right {\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n}\n\n.swipeItem{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n}\n.swipeText{\n  flex: 1;\n  color: #FFFFFF;\n  text-align: center;\n  align-items: center;\n  lines:1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n} */\n\n/* android */\n\n.itemWrap {\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n.swipe-action-right {\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  overflow: hidden;\n}\n.swipeItem {\n  /* width: 160px; */\n  /* height: 160px; */\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n  position: relative;\n}\n.mask {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(255, 255, 255, 0);\n}\n.mask:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.swipeText {\n  font-size: 32px;\n  color: #ffffff;\n  text-align: center;\n  align-items: center;\n  lines: 2;\n  line-height: 48px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.cellBox {\n  flex: 1;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nimport Binding from 'weex-bindingx/lib/index.weex.js'\nconst animation = weex.requireModule('animation')\nimport Utils from '../utils'\nconst modal = weex.requireModule('modal')\nconst dom = weex.requireModule('dom')\nimport DofCell from '../dof-cell'\nimport DofSwitch from '../dof-switch'\n\nexport default {\n  props: {\n    listData: {\n      type: Array,\n      default: () => []\n    },\n    // styles: {\n    //   type: Object,\n    //   default: ()=>({})\n    // }\n    cellWidth: {\n      type: Number,\n      default: 0\n    },\n    padding: {\n      type: Number,\n      default: 0\n    }\n  },\n  computed: {\n    _cellWidth() {\n      if (this.cellWidth) return this.cellWidth\n      if (this.padding) return 750 - this.padding\n      return 750\n    }\n  },\n  components: {\n    DofCell,\n    DofSwitch\n  },\n  data() {\n    return {\n      mobileX: 0,\n      webStarX: 0,\n      saveIdx: null,\n      isAndroid: Utils.env.isAndroid(),\n      isIOS: Utils.env.isIOS(),\n\n      cellCanClick: true, //android\n      isHighlight: false\n    }\n  },\n\n  mounted() {},\n\n  methods: {\n    dofCellClicked(index) {\n      //点击触发滑动恢复初始化\n      if (this.isAndroid) {\n        this.rightSlide() // 列表初始化\n        this.cellCanClick && this.$emit('dofCellClicked', { index })\n      } else {\n        for (let index = 0; index < this.listData.length; index++) {\n          this.special(this.$refs.skid[index], {\n            transform: 'translate(0, 0)'\n          })\n        }\n        this.$emit('dofCellClicked', { index })\n      }\n    },\n\n    special(dom, styles) {\n      animation.transition(dom, {\n        styles,\n        duration: 150, // ms\n        timingFunction: 'ease',\n        delay: 0 // ms\n      })\n    },\n    onRightNode(index, i, text) {\n      if (this.isAndroid) {\n        this.rightSlide()\n        this.$emit('dofRightClicked', { index, i, text })\n      } else {\n        this.special(this.$refs.skid[this.saveIdx], {\n          transform: 'translate(0, 0)'\n        })\n        this.$emit('dofRightClicked', { index, i, text })\n      }\n    },\n\n    onPanEnd(e, node, i) {\n      if (Utils.env.isWeb()) {\n        const webEndX = e.changedTouches[0].pageX\n        this.movingDistance(webEndX - this.webStarX, node, this.$refs.skid[i])\n      }\n    },\n\n    handleHorizontalpan(e, item, index) {\n      !this.isAndroid && this.onPanStart(e, item, index, item.rightItem ? item.rightItem.length : 0)\n    },\n    handlePanEnd(e, item, index) {\n      this.onPanEnd(e, item, index)\n    },\n    // 使用官方的pan事件解决某些ios设备使用@swipe不能滑动的问题\n    onPanStart: function(e, node, i, len) {\n      const { saveIdx } = this\n      if (saveIdx !== i && saveIdx !== null && this.$refs.skid[saveIdx]) {\n        this.special(this.$refs.skid[saveIdx], {\n          transform: 'translate(0, 0)'\n        })\n        this.mobileX = 0\n      }\n      this.saveIdx = i\n      this.mobile(e, node, i, len)\n      // !Utils.env.isWeb() ? this.mobile(e, node, i, len) : this.web(e, node, i)\n      // e.stopPropagation()\n    },\n    web(e, node, i) {\n      this.webStarX = e.changedTouches[0].pageX\n    },\n    mobile(e, node, i, len) {\n      var el = this.$refs['skid'][i]\n      Binding.bind(\n        {\n          anchor: el.ref,\n          eventType: 'pan',\n          props: [\n            {\n              element: el.ref,\n              property: 'transform.translateX',\n              // expression: `x+${this.isAndroid ? 0 : this.mobileX}`\n              expression: this.rightWidth(node) //处理ios设备左滑移动距离，防止闪烁\n            }\n          ]\n        },\n        e => {\n          const { state, deltaX } = e\n          if (state === 'end') {\n            this.mobileX = deltaX\n            // this.movingDistance(this.mobileX, node, el);\n            this.movingDistance(e.deltaX, node, el) //add by lau\n          }\n        }\n      )\n    },\n    movingDistance(scope, node, el) {\n      const len = node.rightItem ? node.rightItem.length : 0\n      const distance = -this.rightWidth(node)\n      // if (scope < -80*len) {\n      //   this.special(el, {\n      //     transform: `translate(${distance}px, 0)`\n      //   });\n      //   this.mobileX = distance;\n      // } else {\n      //   this.special(el, {\n      //     transform: 'translate(0, 0)'\n      //   });\n      //   this.mobileX = 0;\n      // }\n\n      //modify by lau\n      if (scope < 0) {\n        this.special(el, {\n          transform: `translate(${distance}px, 0)`\n        })\n      } else if (scope > 0) {\n        this.special(el, {\n          transform: 'translate(0, 0)'\n        })\n      } else {\n        return\n      }\n    },\n\n    // 适配Android\n    // 经n次尝试和测试后，发现weex的click事件和touchend事件冲突, 防止滑动后触发click事件\n    // 这里异步处理，touchend事件结束后才激活向上传递的click事件\n    touchend() {\n      setTimeout(() => {\n        this.cellCanClick = true\n      }, 100)\n    },\n\n    slideMenu(e, index, item) {\n      let length = item.rightItem.length\n      this.cellCanClick = false\n      let listItems = this.$refs.menuItem\n      let ele = this.$refs.menuItem[index]\n      let direction = e.direction\n      if (direction == 'left') {\n        this.leftSlide(e, ele, length, this.listData[index])\n      } else if (direction == 'right') {\n        this.rightSlide(ele)\n      }\n      e.stopPropagation()\n    },\n\n    // @params ele 要执行动画的元素\n    leftSlide(e, ele, length, item) {\n      this.rightSlide()\n      animation.transition(ele, {\n        styles: {\n          transform: `translateX(-${this.rightWidth(item)}px)`\n        },\n        duration: 150, //ms\n        timingFunction: 'ease',\n        // needLayout: false,   //变化后是否刷新页面\n        delay: 0 //ms\n      })\n      e.stopPropagation()\n    },\n\n    rightSlide() {\n      let listItems = this.$refs.menuItem\n      for (let i = 0; i < listItems.length; i++) {\n        animation.transition(\n          listItems[i],\n          {\n            styles: {\n              transform: 'translateX(0px)'\n            },\n            duration: 100, //ms\n            timingFunction: 'ease-in',\n            needLayout: true,\n            delay: 0 //ms\n          },\n          function() {}\n        )\n      }\n      return false\n    },\n\n    rightWidth(item) {\n      if (item.rightItem && item.rightItem.length) {\n        return item.rightItem.reduce((pre, cur) => pre + (cur.width || 160), 0)\n      }\n      return 0\n    },\n    handleSwitchChange(item) {\n      item.switchVal = !item.switchVal\n      this.$emit('switchChange', item)\n    }\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
 
 // exports
 
@@ -9423,7 +9423,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.66667rem;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  width: 0.18667rem;\n  height: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 0.21333rem;\n}\n.image {\n  border-radius: 0.21333rem;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 0.21333rem;\n  position: relative;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/index.vue?f583422e","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 15>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 14>"],"names":[],"mappings":";AAiCA;EACA,mBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,qCAAA;EACA,2CAAA;EACA,sBAAA;CACA;ACzCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,2CAA2C;CAC5C;AFwCD;EACA,gCAAA;EACA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,mBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :style=\"{ marginLeft: divLeft, width: imgWidth }\" class=\"div_out\">\n    <slider\n      class=\"slider\"\n      :style=\"sliderStyle\"\n      :interval=\"interval\"\n      @change=\"change\"\n      :auto-play=\"autoplay\"\n      :infinite=\"infinite\"\n    >\n      <div v-for=\"(item, index) in slItems\" :key=\"index\" @click=\"imgClicked(item, index)\">\n        <image\n          :resize=\"imgResize\"\n          :style=\"{ width: imgWidth, height: imgHeight }\"\n          :src=\"item.url\"\n          :placeholder=\"phImgUrl\"\n          class=\"image\"\n        >\n        </image>\n      </div>\n      <indicator class=\"indicator\" :style=\"indicatorStyle\" v-if=\"showIndicator && !_isColmo\"></indicator>\n    </slider>\n    <div class=\"indicator-box\" v-if=\"showIndicator && _isColmo\">\n      <div\n        :class=\"['indicator-item', i === slItems.length - 1 && 'isLast', i == active && 'active']\"\n        v-for=\"(item, i) in slItems\"\n        :key=\"i\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<style>\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 50px;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 14px;\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 16px;\n}\n.image {\n  border-radius: 16px;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 16px;\n  position: relative;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nconst icon = require('../setting/icon.base64')\nvar PLACEHOLDERIMAGE = icon['ic_img_null@2x']\nconst modal = weex.requireModule('modal')\nimport ColmoMixin from '../../mixins/colmo'\n\nexport default {\n  mixins: [ColmoMixin],\n  props: {\n    sliderStyle: {\n      type: Object,\n      default: () => ({\n        width: '686px',\n        height: '280px',\n        position: 'relative'\n      })\n    },\n    indicatorStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    items: {\n      type: Array,\n      default: () => []\n    },\n    interval: {\n      type: Number,\n      default: 3000\n    },\n    autoplay: {\n      type: Boolean,\n      default: true\n    },\n    infinite: {\n      type: Boolean,\n      default: true\n    },\n    imgResize: {\n      type: String,\n      default: 'cover'\n    },\n    imgWidth: {\n      type: String,\n      default: '686px'\n    },\n    divLeft: {\n      type: String,\n      default: '32px'\n    },\n    imgHeight: {\n      type: String,\n      default: '280px'\n    },\n    showIndicator: {\n      type: Boolean,\n      default: true\n    },\n    phImgUrl: {\n      type: String,\n      default: PLACEHOLDERIMAGE\n    }\n  },\n  data: function() {\n    return {\n      slItems: [],\n      active: 0\n    }\n  },\n  created() {\n    if (this.items.length > 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0, 10)\n    } else if (this.items.length <= 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0)\n    }\n  },\n  methods: {\n    imgClicked(target, index) {\n      this.$emit('dofSwiperClicked', { target, index })\n    },\n    change(val) {\n      this.active = val.index\n    }\n  }\n}\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 14px;\n  height: 14px;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}"],"sourceRoot":""}]);
+exports.push([module.i, "\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.66667rem;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  width: 0.18667rem;\n  height: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 0.21333rem;\n}\n.image {\n  border-radius: 0.21333rem;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 0.21333rem;\n  position: relative;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/index.vue?f583422e","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 12>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 11>"],"names":[],"mappings":";AAiCA;EACA,mBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,qCAAA;EACA,2CAAA;EACA,sBAAA;CACA;ACzCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,2CAA2C;CAC5C;AFwCD;EACA,gCAAA;EACA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,mBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :style=\"{ marginLeft: divLeft, width: imgWidth }\" class=\"div_out\">\n    <slider\n      class=\"slider\"\n      :style=\"sliderStyle\"\n      :interval=\"interval\"\n      @change=\"change\"\n      :auto-play=\"autoplay\"\n      :infinite=\"infinite\"\n    >\n      <div v-for=\"(item, index) in slItems\" :key=\"index\" @click=\"imgClicked(item, index)\">\n        <image\n          :resize=\"imgResize\"\n          :style=\"{ width: imgWidth, height: imgHeight }\"\n          :src=\"item.url\"\n          :placeholder=\"phImgUrl\"\n          class=\"image\"\n        >\n        </image>\n      </div>\n      <indicator class=\"indicator\" :style=\"indicatorStyle\" v-if=\"showIndicator && !_isColmo\"></indicator>\n    </slider>\n    <div class=\"indicator-box\" v-if=\"showIndicator && _isColmo\">\n      <div\n        :class=\"['indicator-item', i === slItems.length - 1 && 'isLast', i == active && 'active']\"\n        v-for=\"(item, i) in slItems\"\n        :key=\"i\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<style>\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 50px;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 14px;\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 16px;\n}\n.image {\n  border-radius: 16px;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 16px;\n  position: relative;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nconst icon = require('../setting/icon.base64')\nvar PLACEHOLDERIMAGE = icon['ic_img_null@2x']\nconst modal = weex.requireModule('modal')\nimport ColmoMixin from '../../mixins/colmo'\n\nexport default {\n  mixins: [ColmoMixin],\n  props: {\n    sliderStyle: {\n      type: Object,\n      default: () => ({\n        width: '686px',\n        height: '280px',\n        position: 'relative'\n      })\n    },\n    indicatorStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    items: {\n      type: Array,\n      default: () => []\n    },\n    interval: {\n      type: Number,\n      default: 3000\n    },\n    autoplay: {\n      type: Boolean,\n      default: true\n    },\n    infinite: {\n      type: Boolean,\n      default: true\n    },\n    imgResize: {\n      type: String,\n      default: 'cover'\n    },\n    imgWidth: {\n      type: String,\n      default: '686px'\n    },\n    divLeft: {\n      type: String,\n      default: '32px'\n    },\n    imgHeight: {\n      type: String,\n      default: '280px'\n    },\n    showIndicator: {\n      type: Boolean,\n      default: true\n    },\n    phImgUrl: {\n      type: String,\n      default: PLACEHOLDERIMAGE\n    }\n  },\n  data: function() {\n    return {\n      slItems: [],\n      active: 0\n    }\n  },\n  created() {\n    if (this.items.length > 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0, 10)\n    } else if (this.items.length <= 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0)\n    }\n  },\n  methods: {\n    imgClicked(target, index) {\n      this.$emit('dofSwiperClicked', { target, index })\n    },\n    change(val) {\n      this.active = val.index\n    }\n  }\n}\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 14px;\n  height: 14px;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}"],"sourceRoot":""}]);
 
 // exports
 
@@ -9465,7 +9465,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.dof-slider[data-v-db384bc8] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  position: relative;\n}\n.dof-slider-track[data-v-db384bc8] {\n  position: relative;\n}\n.dof-slider-bar[data-v-db384bc8] {\n  position: relative;\n  overflow: hidden;\n  /* transition-property: width;\n  transition-duration: 100ms; */\n}\n.dof-slider-bar--brand[data-v-db384bc8] {\n  background-color: #267aff;\n}\n.dof-slider-bar--purple[data-v-db384bc8] {\n  background-color: #995efc;\n}\n.dof-slider-bar--blue-purple[data-v-db384bc8] {\n  background-color: #6575ff;\n}\n.dof-slider-bar--blue[data-v-db384bc8] {\n  background-color: #29c3ff;\n}\n.dof-slider-bar--cyan[data-v-db384bc8] {\n  background-color: #00cbb8;\n}\n.dof-slider-bar--yellow[data-v-db384bc8] {\n  background-color: #ffaa10;\n}\n.dof-slider-bar--orange[data-v-db384bc8] {\n  background-color: #ff8225;\n}\n.dof-slider-bar--orange-red[data-v-db384bc8] {\n  background-color: #ff6a4c;\n}\n.dof-slider-bar--gray-offline[data-v-db384bc8] {\n  background-color: #7c879b;\n}\n.dof-slider-button[data-v-db384bc8] {\n  position: absolute;\n}\n.button-scale[data-v-db384bc8] {\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n  -webkit-transition-duration: 0.3s;\n          transition-duration: 0.3s;\n  -webkit-transition-delay: 0s;\n          transition-delay: 0s;\n  -webkit-transform: scale(1);\n          transform: scale(1);\n}\n.button-scale[data-v-db384bc8]:active {\n  -webkit-transform: scale(1.5);\n          transform: scale(1.5);\n}\n.dof-slider-button-touching[data-v-db384bc8] {\n  -webkit-transform: scale(1.5);\n          transform: scale(1.5);\n}\n.dof-slider-scales[data-v-db384bc8] {\n  position: relative;\n  margin-top: 0.21333rem;\n  height: 0.32rem;\n}\n.dof-slider-thin-bar[data-v-db384bc8] {\n  position: absolute;\n}\n.dof-slider-thin-bar-left[data-v-db384bc8] {\n  position: absolute;\n  height: 0.05333rem;\n  top: 0px;\n  left: 0px;\n}\n.dof-slider-thin-bar-right[data-v-db384bc8] {\n  position: absolute;\n  height: 0.05333rem;\n  top: 0px;\n  right: 0px;\n}\n.dof-slider-disabled-mask[data-v-db384bc8] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton[data-v-db384bc8] {\n  opacity: 0;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-slider/index.vue?4e7e383a"],"names":[],"mappings":";AA2ZA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA;gCACA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;CACA;AACA;EACA,+CAAA;EAAA,uCAAA;EAAA,+BAAA;EAAA,kDAAA;EACA,kCAAA;UAAA,0BAAA;EACA,6BAAA;UAAA,qBAAA;EACA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;CACA;AACA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,2CAAA;CACA;AACA;EACA,WAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div\n    :class=\"['dof-slider']\"\n    :style=\"disabledStyle\"\n    @touchstart=\"onTouchStart\"\n    @horizontalpan=\"onTouchMove\"\n    @touchend=\"onTouchEnd\"\n  >\n    <div class=\"dof-slider-track\" ref=\"track\" :style=\"trackStyle\" :key=\"_isColmo + 'slider'\">\n      <div v-if=\"isGradientBar\" class=\"dof-slider-thin-bar\" :style=\"thinBarStyle\">\n        <div\n          class=\"dof-slider-thin-bar-left\"\n          v-if=\"_gradientBarConfig.mid\"\n          :style=\"{\n            backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.mid})`,\n            width: midWidth + _buttonSize / 2 + 1 + 'px'\n          }\"\n        ></div>\n        <div\n          v-if=\"_gradientBarConfig.mid\"\n          class=\"dof-slider-thin-bar-right\"\n          :style=\"{\n            backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.mid}, ${_gradientBarConfig.end})`,\n            width: midWidth + _buttonSize / 2 + 'px'\n          }\"\n        ></div>\n        <div\n          class=\"dof-slider-thin-bar-left\"\n          v-if=\"!_gradientBarConfig.mid\"\n          :style=\"{\n            backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.end})`,\n            right: 0 + 'px'\n          }\"\n        ></div>\n      </div>\n      <div v-if=\"!isGradientBar\" :style=\"lineStyle\"></div>\n      <div :class=\"['dof-slider-bar']\" ref=\"bar\" :style=\"barStyle\">\n        <div\n          v-if=\"!isGradientBar\"\n          :style=\"smallBarStyle\"\n          :class=\"[barColor || isGradientBar ? '' : `dof-slider-bar--${this.theme}`]\"\n        ></div>\n        <div\n          :class=\"['dof-slider-button', isGradientBar ? 'button-scale' : '', _isColmo && disabled ? 'hideButton' : '']\"\n          v-for=\"(itemStyle, i) in buttonStyle\"\n          :key=\"i + disabled\"\n          :style=\"itemStyle\"\n        ></div>\n      </div>\n    </div>\n    <div class=\"dof-slider-scales\" v-if=\"$slots.default\">\n      <slot></slot>\n    </div>\n    <div class=\"dof-slider-disabled-mask\" v-if=\"isGradientBar && disabled\" @touchstart=\"() => {}\"></div>\n  </div>\n</template>\n\n<script>\nimport { getBoundingClientRect } from '../utils/dom.js'\nimport { clamp } from '../utils/math-extension.js'\nimport { Touch } from '../utils/touch.js'\nimport ColmoMixin from '../../mixins/colmo'\n\nexport default {\n  mixins: [ColmoMixin],\n  props: {\n    value: {\n      type: [Number, Array], // Number为单点滑杆， Array为双侧滑杆\n      required: true\n    },\n    min: {\n      type: Number,\n      default: 0\n    },\n    max: {\n      type: Number,\n      default: 100\n    },\n    step: {\n      type: Number,\n      default: 1\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    readonly: {\n      type: Boolean,\n      default: false\n    },\n    trackHeight: {\n      type: Number,\n      default: 40\n    },\n    trackColor: {\n      type: String,\n      default: '#F2F2F2'\n    },\n    theme: {\n      type: String,\n      default: 'brand'\n    },\n    barColor: {\n      type: String,\n      default: ''\n    },\n    buttonColor: {\n      type: String,\n      default: '#ffffff'\n    },\n    buttonSize: {\n      type: Number,\n      default: 0\n    },\n    delay: {\n      type: Number,\n      default: 50\n    },\n    gradientBarConfig: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  model: {\n    prop: 'value',\n    event: 'input'\n  },\n  data() {\n    return {\n      touch: Touch.Create(),\n      current: 0,\n      startValue: 0,\n      width: 0,\n      dragTargetIndex: null, // 0 1\n      startRight: null,\n      prevScreenX: null,\n      isTouching: false,\n      isShow: false\n    }\n  },\n  watch: {\n    barStyle() {\n      this.isShow = true\n    }\n  },\n  computed: {\n    _gradientBarConfig() {\n      if (this.gradientBarConfig.start && this.gradientBarConfig.end) return this.gradientBarConfig\n      return this._isColmo ? { start: '#124AFE', mid: '#ffffff', end: '#E55225' } : {}\n    },\n    _buttonSize() {\n      if (this.buttonSize) return this.buttonSize\n      return this._isColmo ? 40 : 24\n    },\n    // 是否双侧\n    isBoth() {\n      return Object.prototype.toString.call(this.value) === '[object Array]'\n    },\n    // 是否细bar\n    isGradientBar() {\n      return this._gradientBarConfig.start && this._gradientBarConfig.end\n    },\n    scope() {\n      return this.max - this.min\n    },\n    interactive() {\n      return !this.disabled && !this.readonly\n    },\n    _trackHeight() {\n      if (this.isGradientBar || this.trackHeight < this._buttonSize) return this._buttonSize * 1.6\n      return this.trackHeight\n    },\n    trackStyle() {\n      const res = {\n        height: `${this._trackHeight}px`,\n        backgroundColor: this.trackColor,\n        borderRadius: `${this._trackHeight / 2}px`\n      }\n      // 细bar样式\n      if (this.isGradientBar || this.trackHeight < this._buttonSize) {\n        res.backgroundColor = 'transparent'\n      }\n      return res\n    },\n    barStyle() {\n      let percent = 0\n      if (this.isBoth) {\n        percent = (Math.min(this.value[1], this.max) - Math.max(this.value[0], this.min)) / this.scope\n      } else {\n        percent = (this.value - this.min) / this.scope\n      }\n\n      // const width = ((this.value - this.min) / this.scope) * this.width\n      // const widthCss = clamp(width+this._trackHeight, this._trackHeight, this.width)\n\n      // fix: 修复value带来的width小于this._trackHeight时，bar宽度不变\n      const width = percent * this.width\n      let widthCss = this._trackHeight\n      if (percent < 0) {\n        widthCss = this._trackHeight\n      } else if (percent > 1) {\n        widthCss = this.width + this._trackHeight\n      } else {\n        // 正常滑动\n        widthCss = width + this._trackHeight\n      }\n      const res = {\n        width: `${widthCss}px`,\n        borderRadius: `${this._trackHeight / 2}px`,\n        height: `${this._trackHeight}px`\n      }\n\n      if (this.isBoth) res.left = ((Math.max(this.value[0], this.min) - this.min) / this.scope) * this.width + 'px'\n\n      // if (this.barColor) {\n      //   res.backgroundColor = this.barColor\n      // }\n      // 细bar样式\n      // if (this.isGradientBar) {\n      res.backgroundColor = 'transparent'\n      // }\n      return res\n    },\n    smallBarStyle() {\n      const buttonPadding = this.trackHeight > this._buttonSize ? 0 : (this._trackHeight - this._buttonSize) / 2 + 1\n      const res = {\n        position: 'absolute',\n        top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n        left: `${buttonPadding}px`,\n        right: `${buttonPadding}px`,\n        height: this.trackHeight,\n        borderRadius: `${this.trackHeight / 2}px`\n      }\n      if (this.barColor) {\n        res.backgroundColor = this.barColor\n      }\n      return res\n    },\n    buttonStyle() {\n      const buttonSize = this._buttonSize\n      const res = {\n        top: `${(this._trackHeight - buttonSize) / 2}px`,\n        width: `${buttonSize}px`,\n        height: `${buttonSize}px`,\n        borderRadius: `${buttonSize / 2}px`,\n        backgroundColor: this.buttonColor\n      }\n      const buttonPadding = (this._trackHeight - buttonSize) / 2\n      return this.isBoth\n        ? [\n            { ...res, left: `${buttonPadding}px` },\n            { ...res, right: `${buttonPadding}px` }\n          ]\n        : [{ ...res, right: `${buttonPadding}px` }]\n    },\n    lineStyle() {\n      const buttonPadding = (this._trackHeight - this._buttonSize) / 2 + 1\n      const res = {\n        position: 'absolute',\n        top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n        left: `${buttonPadding}px`,\n        right: `${buttonPadding}px`,\n        height: `${this.trackHeight}px`,\n        borderRadius: `${this.trackHeight / 2}px`\n      }\n      if (this.trackColor) {\n        res.backgroundColor = this.trackColor\n      }\n      return res\n    },\n    thinBarStyle() {\n      const buttonPadding = (this._trackHeight - this._buttonSize) / 2\n      const res = {\n        top: `${(this._trackHeight - 4) / 2}px`,\n        left: `${buttonPadding}px`,\n        right: `${buttonPadding}px`,\n        height: '4px'\n      }\n      return res\n    },\n    midWidth() {\n      return this.width / 2\n    },\n    disabledStyle() {\n      if (!this.isShow) return { opacity: 0 }\n      return this.isGradientBar && this.disabled ? { opacity: 0.3 } : { opacity: 1 }\n    }\n  },\n  mounted() {\n    getBoundingClientRect(\n      this.$refs.track,\n      res => {\n        if (res.result) {\n          // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度\n          this.width = res.size.width - this._trackHeight\n        }\n      },\n      this.delay\n    )\n  },\n  methods: {\n    async onTouchStart(e) {\n      if (!this.interactive) {\n        return\n      }\n      if (this.isGradientBar) this.isTouching = true\n      this.touch.start(e)\n\n      if (this.isBoth) {\n        let { left, right } = await this.getBarRect()\n        let startX = this.touch.startX\n        this.startRight = right\n        this.dragTargetIndex = Math.abs(left - startX) < Math.abs(right - startX) ? 0 : 1\n        this.current = this.value[this.dragTargetIndex]\n      } else {\n        this.current = this.value\n      }\n\n      this.startValue = this.format(this.current)\n    },\n    onTouchMove(e) {\n      if (!this.interactive) {\n        return\n      }\n\n      this.touch.move(e)\n\n      const delta = this.touch.deltaX\n      if (this.isBoth && this.value[0] === this.value[1]) {\n        this.dragTargetIndex = e.changedTouches[0].screenX > this.prevScreenX ? 1 : 0\n        if (delta === 0) {\n          this.dragTargetIndex = this.touch.startX >= this.startRight ? 1 : 0\n        }\n      }\n\n      const total = this.width\n      const diff = (delta / total) * this.scope\n\n      this.current = this.startValue + diff\n\n      this.update(this.current)\n      this.prevScreenX = e.changedTouches[0].screenX\n    },\n    async onTouchEnd(e) {\n      if (!this.interactive) {\n        return\n      }\n      this.isTouching = false\n      // 点按\n      if (this.startValue === this.current) {\n        const total = this.width\n        let { left, right } = await this.getBarRect()\n        const diff = ((this.touch.startX - (this.dragTargetIndex === 0 ? left : right)) / total) * this.scope\n        this.current = this.startValue + diff\n      }\n      this.update(this.current, true)\n      this.$emit('dragend', e)\n    },\n    format(value) {\n      const min = +this.min\n      const max = +this.max\n      const step = +this.step\n\n      let val = clamp(value, min, max)\n      if (this.isBoth) {\n        this.dragTargetIndex === 1 && (val = clamp(value, this.value[0], max))\n        this.dragTargetIndex === 0 && (val = clamp(value, min, this.value[1]))\n      }\n\n      const diff = Math.round((val - min) / step) * step\n\n      return min + diff\n    },\n    update(value, end = false) {\n      let val = null\n      if (this.isBoth) {\n        if (this.dragTargetIndex === 0) {\n          val = [this.format(value), this.value[1]]\n        }\n        if (this.dragTargetIndex === 1) {\n          val = [this.value[0], this.format(value)]\n        }\n      } else {\n        val = this.format(value)\n      }\n      ;(!this.isBoth || this.dragTargetIndex !== null) && this.$emit('input', val)\n      if (end) {\n        this.$emit('change', val)\n      }\n    },\n    getBarRect() {\n      return new Promise((resolve, reject) => {\n        getBoundingClientRect(\n          this.$refs.bar,\n          res => {\n            if (res.result) {\n              resolve({\n                left: res.size.left,\n                right: res.size.right\n              })\n            }\n          },\n          0\n        )\n      })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.dof-slider {\n  flex-direction: column;\n  position: relative;\n}\n\n.dof-slider-track {\n  position: relative;\n}\n\n.dof-slider-bar {\n  position: relative;\n  overflow: hidden;\n  /* transition-property: width;\n  transition-duration: 100ms; */\n}\n\n.dof-slider-bar--brand {\n  background-color: #267aff;\n}\n\n.dof-slider-bar--purple {\n  background-color: #995efc;\n}\n.dof-slider-bar--blue-purple {\n  background-color: #6575ff;\n}\n.dof-slider-bar--blue {\n  background-color: #29c3ff;\n}\n.dof-slider-bar--cyan {\n  background-color: #00cbb8;\n}\n.dof-slider-bar--yellow {\n  background-color: #ffaa10;\n}\n.dof-slider-bar--orange {\n  background-color: #ff8225;\n}\n.dof-slider-bar--orange-red {\n  background-color: #ff6a4c;\n}\n.dof-slider-bar--gray-offline {\n  background-color: #7c879b;\n}\n\n.dof-slider-button {\n  position: absolute;\n}\n.button-scale {\n  transition-property: transform;\n  transition-duration: 0.3s;\n  transition-delay: 0s;\n  transform: scale(1);\n}\n.button-scale:active {\n  transform: scale(1.5);\n}\n.dof-slider-button-touching {\n  transform: scale(1.5);\n}\n.dof-slider-scales {\n  position: relative;\n  margin-top: 16px;\n  height: 24px;\n}\n.dof-slider-thin-bar {\n  position: absolute;\n}\n.dof-slider-thin-bar-left {\n  position: absolute;\n  height: 4px;\n  top: 0px;\n  left: 0px;\n}\n.dof-slider-thin-bar-right {\n  position: absolute;\n  height: 4px;\n  top: 0px;\n  right: 0px;\n}\n.dof-slider-disabled-mask {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton {\n  opacity: 0;\n}\n</style>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.dof-slider[data-v-db384bc8] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  position: relative;\n}\n.dof-slider-track[data-v-db384bc8] {\n  position: relative;\n}\n.dof-slider-bar[data-v-db384bc8] {\n  position: relative;\n  overflow: hidden;\n  /* transition-property: width;\n  transition-duration: 100ms; */\n}\n.dof-slider-bar--brand[data-v-db384bc8] {\n  background-color: #267aff;\n}\n.dof-slider-bar--purple[data-v-db384bc8] {\n  background-color: #995efc;\n}\n.dof-slider-bar--blue-purple[data-v-db384bc8] {\n  background-color: #6575ff;\n}\n.dof-slider-bar--blue[data-v-db384bc8] {\n  background-color: #29c3ff;\n}\n.dof-slider-bar--cyan[data-v-db384bc8] {\n  background-color: #00cbb8;\n}\n.dof-slider-bar--yellow[data-v-db384bc8] {\n  background-color: #ffaa10;\n}\n.dof-slider-bar--orange[data-v-db384bc8] {\n  background-color: #ff8225;\n}\n.dof-slider-bar--orange-red[data-v-db384bc8] {\n  background-color: #ff6a4c;\n}\n.dof-slider-bar--gray-offline[data-v-db384bc8] {\n  background-color: #7c879b;\n}\n.dof-slider-button[data-v-db384bc8] {\n  position: absolute;\n}\n.button-scale[data-v-db384bc8] {\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n  -webkit-transition-duration: 0.3s;\n          transition-duration: 0.3s;\n  -webkit-transition-delay: 0s;\n          transition-delay: 0s;\n  -webkit-transform: scale(1);\n          transform: scale(1);\n}\n.button-scale[data-v-db384bc8]:active {\n  -webkit-transform: scale(1.5);\n          transform: scale(1.5);\n}\n.dof-slider-button-touching[data-v-db384bc8] {\n  -webkit-transform: scale(1.5);\n          transform: scale(1.5);\n}\n.dof-slider-scales[data-v-db384bc8] {\n  position: relative;\n  margin-top: 0.21333rem;\n  height: 0.32rem;\n}\n.dof-slider-thin-bar[data-v-db384bc8] {\n  position: absolute;\n}\n.dof-slider-thin-bar-left[data-v-db384bc8] {\n  position: absolute;\n  height: 0.05333rem;\n  top: 0px;\n  left: 0px;\n}\n.dof-slider-thin-bar-right[data-v-db384bc8] {\n  position: absolute;\n  height: 0.05333rem;\n  top: 0px;\n  right: 0px;\n}\n.dof-slider-disabled-mask[data-v-db384bc8] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton[data-v-db384bc8] {\n  opacity: 0;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-slider/index.vue?614d6d06"],"names":[],"mappings":";AA6aA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA;gCACA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;CACA;AACA;EACA,+CAAA;EAAA,uCAAA;EAAA,+BAAA;EAAA,kDAAA;EACA,kCAAA;UAAA,0BAAA;EACA,6BAAA;UAAA,qBAAA;EACA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;CACA;AACA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,2CAAA;CACA;AACA;EACA,WAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div\n    :class=\"['dof-slider']\"\n    :style=\"disabledStyle\"\n    @touchstart=\"onTouchStart\"\n    @horizontalpan=\"onTouchMove\"\n    @touchend=\"onTouchEnd\"\n  >\n    <div class=\"dof-slider-track\" ref=\"track\" :style=\"trackStyle\" :key=\"_isColmo + 'slider'\">\n      <div v-if=\"isGradientBar\" class=\"dof-slider-thin-bar\" :style=\"thinBarStyle\">\n        <div\n          class=\"dof-slider-thin-bar-left\"\n          v-if=\"_gradientBarConfig.mid\"\n          :style=\"{\n            backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.mid})`,\n            width: midWidth + _buttonSize / 2 + 1 + 'px'\n          }\"\n        ></div>\n        <div\n          v-if=\"_gradientBarConfig.mid\"\n          class=\"dof-slider-thin-bar-right\"\n          :style=\"{\n            backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.mid}, ${_gradientBarConfig.end})`,\n            width: midWidth + _buttonSize / 2 + 'px'\n          }\"\n        ></div>\n        <div\n          class=\"dof-slider-thin-bar-left\"\n          v-if=\"!_gradientBarConfig.mid\"\n          :style=\"{\n            backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.end})`,\n            right: 0 + 'px'\n          }\"\n        ></div>\n      </div>\n      <div v-if=\"!isGradientBar\" :style=\"lineStyle\"></div>\n      <div :class=\"['dof-slider-bar']\" ref=\"bar\" :style=\"barStyle\">\n        <div\n          v-if=\"!isGradientBar\"\n          :style=\"smallBarStyle\"\n          :class=\"[barColor || isGradientBar ? '' : `dof-slider-bar--${this.theme}`]\"\n        ></div>\n        <div\n          :class=\"['dof-slider-button', isGradientBar ? 'button-scale' : '', _isColmo && disabled ? 'hideButton' : '']\"\n          v-for=\"(itemStyle, i) in buttonStyle\"\n          :key=\"i + disabled\"\n          :style=\"itemStyle\"\n        ></div>\n      </div>\n    </div>\n    <div class=\"dof-slider-scales\" v-if=\"$slots.default\">\n      <slot></slot>\n    </div>\n    <div class=\"dof-slider-disabled-mask\" v-if=\"isGradientBar && disabled\" @touchstart=\"maskTouchStart\"></div>\n  </div>\n</template>\n\n<script>\n// import { getBoundingClientRect } from '../utils/dom.js'\nimport { clamp } from '../utils/math-extension.js'\nimport { Touch } from '../utils/touch.js'\nimport ColmoMixin from '../../mixins/colmo'\nconst dom = weex.requireModule('dom')\n\nconst getBoundingClientRect = (element, func, delay = 50) => {\n  setTimeout(() => dom && dom.getComponentRect(element, func), delay)\n}\n\nexport default {\n  mixins: [ColmoMixin],\n  props: {\n    value: {\n      type: [Number, Array], // Number为单点滑杆， Array为双侧滑杆\n      required: true\n    },\n    min: {\n      type: Number,\n      default: 0\n    },\n    max: {\n      type: Number,\n      default: 100\n    },\n    step: {\n      type: Number,\n      default: 1\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    readonly: {\n      type: Boolean,\n      default: false\n    },\n    trackHeight: {\n      type: Number,\n      default: 40\n    },\n    trackColor: {\n      type: String,\n      default: '#F2F2F2'\n    },\n    theme: {\n      type: String,\n      default: 'brand'\n    },\n    barColor: {\n      type: String,\n      default: ''\n    },\n    buttonColor: {\n      type: String,\n      default: '#ffffff'\n    },\n    buttonSize: {\n      type: Number,\n      default: 0\n    },\n    delay: {\n      type: Number,\n      default: 50\n    },\n    gradientBarConfig: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  model: {\n    prop: 'value',\n    event: 'input'\n  },\n  data() {\n    return {\n      touch: Touch.Create(),\n      current: 0,\n      startValue: 0,\n      width: 0,\n      dragTargetIndex: null, // 0 1\n      startRight: null,\n      prevScreenX: null,\n      isTouching: false,\n      isShow: false,\n      getWidthRectTime: 0\n    }\n  },\n  watch: {\n    barStyle() {\n      this.isShow = true\n    }\n  },\n  computed: {\n    _gradientBarConfig() {\n      if (this.gradientBarConfig.start && this.gradientBarConfig.end) return this.gradientBarConfig\n      return this._isColmo ? { start: '#124AFE', mid: '#ffffff', end: '#E55225' } : {}\n    },\n    _buttonSize() {\n      if (this.buttonSize) return this.buttonSize\n      return this._isColmo ? 40 : 24\n    },\n    // 是否双侧\n    isBoth() {\n      return Object.prototype.toString.call(this.value) === '[object Array]'\n    },\n    // 是否细bar\n    isGradientBar() {\n      return this._gradientBarConfig.start && this._gradientBarConfig.end\n    },\n    scope() {\n      return this.max - this.min\n    },\n    interactive() {\n      return !this.disabled && !this.readonly\n    },\n    _trackHeight() {\n      if (this.isGradientBar || this.trackHeight < this._buttonSize) return this._buttonSize * 1.6\n      return this.trackHeight\n    },\n    trackStyle() {\n      const res = {\n        height: `${this._trackHeight}px`,\n        backgroundColor: this.trackColor,\n        borderRadius: `${this._trackHeight / 2}px`\n      }\n      // 细bar样式\n      if (this.isGradientBar || this.trackHeight < this._buttonSize) {\n        res.backgroundColor = 'transparent'\n      }\n      return res\n    },\n    barStyle() {\n      let percent = 0\n      if (this.isBoth) {\n        percent = (Math.min(this.value[1], this.max) - Math.max(this.value[0], this.min)) / this.scope\n      } else {\n        percent = (this.value - this.min) / this.scope\n      }\n\n      // const width = ((this.value - this.min) / this.scope) * this.width\n      // const widthCss = clamp(width+this._trackHeight, this._trackHeight, this.width)\n\n      // fix: 修复value带来的width小于this._trackHeight时，bar宽度不变\n      const width = percent * this.width\n      let widthCss = this._trackHeight\n      if (percent < 0) {\n        widthCss = this._trackHeight\n      } else if (percent > 1) {\n        widthCss = this.width + this._trackHeight\n      } else {\n        // 正常滑动\n        widthCss = width + this._trackHeight\n      }\n      const res = {\n        width: `${widthCss}px`,\n        borderRadius: `${this._trackHeight / 2}px`,\n        height: `${this._trackHeight}px`\n      }\n\n      if (this.isBoth) res.left = ((Math.max(this.value[0], this.min) - this.min) / this.scope) * this.width + 'px'\n\n      // if (this.barColor) {\n      //   res.backgroundColor = this.barColor\n      // }\n      // 细bar样式\n      // if (this.isGradientBar) {\n      res.backgroundColor = 'transparent'\n      // }\n      return res\n    },\n    smallBarStyle() {\n      const buttonPadding = this.trackHeight > this._buttonSize ? 0 : (this._trackHeight - this._buttonSize) / 2 + 1\n      const res = {\n        position: 'absolute',\n        top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n        left: `${buttonPadding}px`,\n        right: `${buttonPadding}px`,\n        height: `${this.trackHeight}px`,\n        borderRadius: `${this.trackHeight / 2}px`\n      }\n      if (this.barColor) {\n        res.backgroundColor = this.barColor\n      }\n      return res\n    },\n    buttonStyle() {\n      const buttonSize = this._buttonSize\n      const res = {\n        top: `${(this._trackHeight - buttonSize) / 2}px`,\n        width: `${buttonSize}px`,\n        height: `${buttonSize}px`,\n        borderRadius: `${buttonSize / 2}px`,\n        backgroundColor: this.buttonColor\n      }\n      const buttonPadding = (this._trackHeight - buttonSize) / 2\n      return this.isBoth\n        ? [\n            { ...res, left: `${buttonPadding}px` },\n            { ...res, right: `${buttonPadding}px` }\n          ]\n        : [{ ...res, right: `${buttonPadding}px` }]\n    },\n    lineStyle() {\n      const buttonPadding = (this._trackHeight - this._buttonSize) / 2 + 1\n      const res = {\n        position: 'absolute',\n        top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n        left: `${buttonPadding}px`,\n        right: `${buttonPadding}px`,\n        height: `${this.trackHeight}px`,\n        borderRadius: `${this.trackHeight / 2}px`\n      }\n      if (this.trackColor) {\n        res.backgroundColor = this.trackColor\n      }\n      return res\n    },\n    thinBarStyle() {\n      const buttonPadding = (this._trackHeight - this._buttonSize) / 2\n      const res = {\n        top: `${(this._trackHeight - 4) / 2}px`,\n        left: `${buttonPadding}px`,\n        right: `${buttonPadding}px`,\n        height: '4px'\n      }\n      return res\n    },\n    midWidth() {\n      return this.width / 2\n    },\n    disabledStyle() {\n      if (!this.isShow) return { opacity: 0 }\n      return this.isGradientBar && this.disabled ? { opacity: 0.3 } : { opacity: 1 }\n    }\n  },\n  mounted() {\n    this.getRect()\n  },\n  methods: {\n    getRect() {\n      getBoundingClientRect(\n        this.$refs.track,\n        res => {\n          if (res.result && res.size.width !== 0) {\n            // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度\n            this.width = res.size.width - this._trackHeight\n          } else {\n            this.getWidthRectTime < 6\n              ? setTimeout(() => {\n                  this.getWidthRectTime++\n                  this.getRect()\n                }, 50)\n              : (this.width = res.size.width - this._trackHeight)\n          }\n        },\n        this.delay\n      )\n    },\n    async onTouchStart(e) {\n      if (!this.interactive) {\n        return\n      }\n      if (this.isGradientBar) this.isTouching = true\n      this.touch.start(e)\n\n      if (this.isBoth) {\n        let { left, right } = await this.getBarRect()\n        let startX = this.touch.startX\n        this.startRight = right\n        this.dragTargetIndex = Math.abs(left - startX) < Math.abs(right - startX) ? 0 : 1\n        this.current = this.value[this.dragTargetIndex]\n      } else {\n        this.current = this.value\n      }\n\n      this.startValue = this.format(this.current)\n    },\n    onTouchMove(e) {\n      if (!this.interactive) {\n        return\n      }\n\n      this.touch.move(e)\n\n      const delta = this.touch.deltaX\n      if (this.isBoth && this.value[0] === this.value[1]) {\n        this.dragTargetIndex = e.changedTouches[0].screenX > this.prevScreenX ? 1 : 0\n        if (delta === 0) {\n          this.dragTargetIndex = this.touch.startX >= this.startRight ? 1 : 0\n        }\n      }\n\n      const total = this.width\n      const diff = (delta / total) * this.scope\n\n      this.current = this.startValue + diff\n      this.prevScreenX = e.changedTouches[0].screenX\n\n      if (delta === 0) return\n      this.update(this.current)\n    },\n    async onTouchEnd(e) {\n      if (!this.interactive) {\n        return\n      }\n      this.isTouching = false\n      // 点按\n      if (this.startValue === this.current) {\n        const total = this.width\n        let { left, right } = await this.getBarRect()\n        const diff = ((this.touch.startX - (this.dragTargetIndex === 0 ? left : right)) / total) * this.scope\n        this.current = this.startValue + diff\n      }\n      this.update(this.current, true)\n      this.$emit('dragend', e)\n    },\n    format(value) {\n      const min = +this.min\n      const max = +this.max\n      const step = +this.step\n\n      let val = clamp(value, min, max)\n      if (this.isBoth) {\n        this.dragTargetIndex === 1 && (val = clamp(value, this.value[0], max))\n        this.dragTargetIndex === 0 && (val = clamp(value, min, this.value[1]))\n      }\n\n      const diff = Math.round((val - min) / step) * step\n\n      return min + diff\n    },\n    update(value, end = false) {\n      let val = null\n      if (this.isBoth) {\n        if (this.dragTargetIndex === 0) {\n          val = [this.format(value), this.value[1]]\n        }\n        if (this.dragTargetIndex === 1) {\n          val = [this.value[0], this.format(value)]\n        }\n      } else {\n        val = this.format(value)\n      }\n      ;(!this.isBoth || this.dragTargetIndex !== null) && this.$emit('input', val)\n      if (end) {\n        this.$emit('change', val)\n      }\n    },\n    getBarRect() {\n      return new Promise((resolve, reject) => {\n        getBoundingClientRect(\n          this.$refs.bar,\n          res => {\n            if (res.result) {\n              resolve({\n                left: res.size.left,\n                right: res.size.right\n              })\n            }\n          },\n          0\n        )\n      })\n    },\n    maskTouchStart() {}\n  }\n}\n</script>\n\n<style scoped>\n.dof-slider {\n  flex-direction: column;\n  position: relative;\n}\n\n.dof-slider-track {\n  position: relative;\n}\n\n.dof-slider-bar {\n  position: relative;\n  overflow: hidden;\n  /* transition-property: width;\n  transition-duration: 100ms; */\n}\n\n.dof-slider-bar--brand {\n  background-color: #267aff;\n}\n\n.dof-slider-bar--purple {\n  background-color: #995efc;\n}\n.dof-slider-bar--blue-purple {\n  background-color: #6575ff;\n}\n.dof-slider-bar--blue {\n  background-color: #29c3ff;\n}\n.dof-slider-bar--cyan {\n  background-color: #00cbb8;\n}\n.dof-slider-bar--yellow {\n  background-color: #ffaa10;\n}\n.dof-slider-bar--orange {\n  background-color: #ff8225;\n}\n.dof-slider-bar--orange-red {\n  background-color: #ff6a4c;\n}\n.dof-slider-bar--gray-offline {\n  background-color: #7c879b;\n}\n\n.dof-slider-button {\n  position: absolute;\n}\n.button-scale {\n  transition-property: transform;\n  transition-duration: 0.3s;\n  transition-delay: 0s;\n  transform: scale(1);\n}\n.button-scale:active {\n  transform: scale(1.5);\n}\n.dof-slider-button-touching {\n  transform: scale(1.5);\n}\n.dof-slider-scales {\n  position: relative;\n  margin-top: 16px;\n  height: 24px;\n}\n.dof-slider-thin-bar {\n  position: absolute;\n}\n.dof-slider-thin-bar-left {\n  position: absolute;\n  height: 4px;\n  top: 0px;\n  left: 0px;\n}\n.dof-slider-thin-bar-right {\n  position: absolute;\n  height: 4px;\n  top: 0px;\n  right: 0px;\n}\n.dof-slider-disabled-mask {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton {\n  opacity: 0;\n}\n</style>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -11314,7 +11314,7 @@ var _mixSelectableChild = __webpack_require__(38);
 
 var _transition = __webpack_require__(41);
 
-var _dom = __webpack_require__(13);
+var _dom = __webpack_require__(16);
 
 var _arrow_up = __webpack_require__(381);
 
@@ -11460,6 +11460,8 @@ exports.default = {
           _this.bodyHeight = res.size.height;
           if (_this.collapsed_) {
             _this.collapseBody(0);
+          } else {
+            _this.expandeBody();
           }
         });
       });
@@ -12870,7 +12872,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 // import util from './setting/util';
 
 
-var _dofImage = __webpack_require__(15);
+var _dofImage = __webpack_require__(14);
 
 var _dofImage2 = _interopRequireDefault(_dofImage);
 
@@ -14278,7 +14280,7 @@ var _dofIconfont2 = _interopRequireDefault(_dofIconfont);
 
 var _transition = __webpack_require__(41);
 
-var _dom = __webpack_require__(13);
+var _dom = __webpack_require__(16);
 
 var _arrow_up = __webpack_require__(387);
 
@@ -14519,7 +14521,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dofImage = __webpack_require__(15);
+var _dofImage = __webpack_require__(14);
 
 var _dofImage2 = _interopRequireDefault(_dofImage);
 
@@ -15520,6 +15522,7 @@ Object.defineProperty(exports, "__esModule", {
 //
 //
 //
+//
 
 exports.default = {
   props: {
@@ -16452,7 +16455,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _range = __webpack_require__(388);
 
-var _dom = __webpack_require__(13);
+var _dom = __webpack_require__(16);
 
 exports.default = {
   props: {
@@ -18586,7 +18589,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 //
 //
 
-var _dofMask = __webpack_require__(16);
+var _dofMask = __webpack_require__(15);
 
 var _dofMask2 = _interopRequireDefault(_dofMask);
 
@@ -19389,7 +19392,7 @@ var _dofOverlay = __webpack_require__(8);
 
 var _dofOverlay2 = _interopRequireDefault(_dofOverlay);
 
-var _dofImage = __webpack_require__(15);
+var _dofImage = __webpack_require__(14);
 
 var _dofImage2 = _interopRequireDefault(_dofImage);
 
@@ -21349,7 +21352,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dofMask = __webpack_require__(16);
+var _dofMask = __webpack_require__(15);
 
 var _dofMask2 = _interopRequireDefault(_dofMask);
 
@@ -23147,7 +23150,6 @@ function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, a
 //
 //
 //
-//
 
 var env = weex.config.env;
 
@@ -24378,7 +24380,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dofCell = __webpack_require__(14);
+var _dofCell = __webpack_require__(13);
 
 var _dofCell2 = _interopRequireDefault(_dofCell);
 
@@ -24608,7 +24610,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dofCell = __webpack_require__(14);
+var _dofCell = __webpack_require__(13);
 
 var _dofCell2 = _interopRequireDefault(_dofCell);
 
@@ -27032,7 +27034,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dofMask = __webpack_require__(16);
+var _dofMask = __webpack_require__(15);
 
 var _dofMask2 = _interopRequireDefault(_dofMask);
 
@@ -28778,7 +28780,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dom = __webpack_require__(13);
+var _dom = __webpack_require__(16);
 
 var _colmo = __webpack_require__(3);
 
@@ -28950,7 +28952,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 //
 //
 
-var _dom = __webpack_require__(13);
+// import { getBoundingClientRect } from '../utils/dom.js'
+
 
 var _mathExtension = __webpack_require__(420);
 
@@ -28964,6 +28967,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
 
+var dom = weex.requireModule('dom');
+
+var getBoundingClientRect = function getBoundingClientRect(element, func) {
+  var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+
+  setTimeout(function () {
+    return dom && dom.getComponentRect(element, func);
+  }, delay);
+};
+
 exports.default = {
   mixins: [_colmo2.default],
   props: {
@@ -29040,7 +29053,8 @@ exports.default = {
       startRight: null,
       prevScreenX: null,
       isTouching: false,
-      isShow: false
+      isShow: false,
+      getWidthRectTime: 0
     };
   },
 
@@ -29135,7 +29149,7 @@ exports.default = {
         top: (this._trackHeight - this.trackHeight) / 2 + 'px',
         left: buttonPadding + 'px',
         right: buttonPadding + 'px',
-        height: this.trackHeight,
+        height: this.trackHeight + 'px',
         borderRadius: this.trackHeight / 2 + 'px'
       };
       if (this.barColor) {
@@ -29189,17 +29203,25 @@ exports.default = {
     }
   },
   mounted: function mounted() {
-    var _this = this;
-
-    (0, _dom.getBoundingClientRect)(this.$refs.track, function (res) {
-      if (res.result) {
-        // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度
-        _this.width = res.size.width - _this._trackHeight;
-      }
-    }, this.delay);
+    this.getRect();
   },
 
   methods: {
+    getRect: function getRect() {
+      var _this = this;
+
+      getBoundingClientRect(this.$refs.track, function (res) {
+        if (res.result && res.size.width !== 0) {
+          // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度
+          _this.width = res.size.width - _this._trackHeight;
+        } else {
+          _this.getWidthRectTime < 6 ? setTimeout(function () {
+            _this.getWidthRectTime++;
+            _this.getRect();
+          }, 50) : _this.width = res.size.width - _this._trackHeight;
+        }
+      }, this.delay);
+    },
     onTouchStart: function onTouchStart(e) {
       var _this2 = this;
 
@@ -29275,9 +29297,10 @@ exports.default = {
       var diff = delta / total * this.scope;
 
       this.current = this.startValue + diff;
+      this.prevScreenX = e.changedTouches[0].screenX;
 
+      if (delta === 0) return;
       this.update(this.current);
-      this.prevScreenX = e.changedTouches[0].screenX;
     },
     onTouchEnd: function onTouchEnd(e) {
       var _this3 = this;
@@ -29367,7 +29390,7 @@ exports.default = {
       var _this4 = this;
 
       return new Promise(function (resolve, reject) {
-        (0, _dom.getBoundingClientRect)(_this4.$refs.bar, function (res) {
+        getBoundingClientRect(_this4.$refs.bar, function (res) {
           if (res.result) {
             resolve({
               left: res.size.left,
@@ -29376,7 +29399,8 @@ exports.default = {
           }
         }, 0);
       });
-    }
+    },
+    maskTouchStart: function maskTouchStart() {}
   }
 };
 
@@ -30498,7 +30522,7 @@ var _utils = __webpack_require__(4);
 
 var _utils2 = _interopRequireDefault(_utils);
 
-var _dofCell = __webpack_require__(14);
+var _dofCell = __webpack_require__(13);
 
 var _dofCell2 = _interopRequireDefault(_dofCell);
 
@@ -30686,7 +30710,6 @@ var animation = weex.requireModule('animation'); //
 //
 //
 //
-//
 
 var modal = weex.requireModule('modal');
 var dom = weex.requireModule('dom');
@@ -30777,7 +30800,12 @@ exports.default = {
         this.movingDistance(webEndX - this.webStarX, node, this.$refs.skid[i]);
       }
     },
-
+    handleHorizontalpan: function handleHorizontalpan(e, item, index) {
+      !this.isAndroid && this.onPanStart(e, item, index, item.rightItem ? item.rightItem.length : 0);
+    },
+    handlePanEnd: function handlePanEnd(e, item, index) {
+      this.onPanEnd(e, item, index);
+    },
 
     // 使用官方的pan事件解决某些ios设备使用@swipe不能滑动的问题
     onPanStart: function onPanStart(e, node, i, len) {
@@ -30790,8 +30818,9 @@ exports.default = {
         this.mobileX = 0;
       }
       this.saveIdx = i;
-      !_utils2.default.env.isWeb() ? this.mobile(e, node, i, len) : this.web(e, node, i);
-      e.stopPropagation();
+      this.mobile(e, node, i, len);
+      // !Utils.env.isWeb() ? this.mobile(e, node, i, len) : this.web(e, node, i)
+      // e.stopPropagation()
     },
     web: function web(e, node, i) {
       this.webStarX = e.changedTouches[0].pageX;
@@ -30860,7 +30889,8 @@ exports.default = {
         _this2.cellCanClick = true;
       }, 100);
     },
-    slideMenu: function slideMenu(e, index, length) {
+    slideMenu: function slideMenu(e, index, item) {
+      var length = item.rightItem.length;
       this.cellCanClick = false;
       var listItems = this.$refs.menuItem;
       var ele = this.$refs.menuItem[index];
@@ -31769,6 +31799,10 @@ var _dofSpinner = __webpack_require__(11);
 
 var _dofSpinner2 = _interopRequireDefault(_dofSpinner);
 
+var _utils2 = __webpack_require__(4);
+
+var _utils3 = _interopRequireDefault(_utils2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 //
@@ -31980,6 +32014,7 @@ exports.default = {
     rightDotStyle: function rightDotStyle() {
       var offset = 46;
       if (this._isColmo && this.type === 'default' || this.type === 'colmo') offset = 50;
+      if (_utils3.default.env.isWeb()) offset = 46;
       return {
         backgroundColor: this._dotColor,
         transform: 'translateX(' + offset + 'px) scale(2.25)'
@@ -33001,7 +33036,7 @@ exports.default = {
         isActiveTitleBold: false,
         bgColor: '#151617',
         titleColor: 'rgba(255,255,255,0.4)',
-        activeTitleColor: 'rgba(255,255,255,0.8);',
+        activeTitleColor: 'rgba(255,255,255,0.8)',
         boxBgColor: '#151617',
         activeBoxBgColor: '#151617',
         activeBottomColor: '#B35336',
@@ -45782,10 +45817,10 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
   }, [(_vm._isColmo) ? _c('dof-switch', {
     attrs: {
       "checked": !_vm.collapsed_,
-      "data-evt-dof-change": ""
+      "data-evt-dofChange": ""
     },
     on: {
-      "dof-change": _vm.onCollapse
+      "dofChange": _vm.onCollapse
     }
   }) : _c('figure', {
     ref: "arrow",
@@ -48471,7 +48506,6 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     class: ['u-popover-inner', _vm.theme !== 'white' && 'u-popover-theme-dark'],
     style: (_vm._px2rem(_vm.popoverInnerStyle, 75)),
     attrs: {
-      "scroll-direction": "horizontal",
       "show-scrollbar": "false"
     }
   }, _vm._l((_vm.buttons), function(item, i) {
@@ -49466,11 +49500,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }, [_vm._v(_vm._s(tab.label.length > _vm.labelMaxLen ? tab.label.slice(0, _vm.labelMaxLen) + '...' : tab.label))])]), _vm._v(" "), (i !== _vm.dataLen - 1) ? _c('div', {
       staticClass: "tabLine weex-ct weex-div",
       style: (_vm._px2rem(Object.assign({
-        backgroundColor: _vm.bgColor,
-        'border-left-color': _vm.touchActive === i ? _vm.touchColor : 'transparent',
-        'border-right-color': _vm.touchActive - 1 === i ? _vm.touchColor : 'transparent',
-        'border-left-width': !(_vm.tabActive === i || _vm.tabActive - 1 === i) ? '0px' : '2px',
-        'border-right-width': !(_vm.tabActive === i || _vm.tabActive - 1 === i) ? '0px' : '3px'
+        backgroundColor: _vm.bgColor
       }, _vm.tabLineStyle), 75)),
       attrs: {
         "weex-type": "div"
@@ -49478,7 +49508,6 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }, [_c('div', {
       staticClass: "tabLineMaskDown weex-ct weex-div",
       style: (_vm._px2rem(Object.assign({
-        'border-color': _vm.tabActive === i || _vm.tabActive - 1 === i ? _vm.activeBorderColor : 'transparent',
         'background-color': _vm.touchActive - 1 === i ? _vm.touchColor : _vm.bgColor
       }, _vm.maskStyle), 75)),
       attrs: {
@@ -49495,8 +49524,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }), _vm._v(" "), _c('div', {
       staticClass: "border-top weex-ct weex-div",
       style: ({
-        'border-color': _vm.tabActive === i ? _vm.activeBorderColor : _vm.borderColor,
-        width: _vm._px2rem(_vm.tabActive - 1 === i ? _vm.itemHeight / 4 - 1 + 'px' : _vm.itemHeight / 4 + 3 + 'px', 75)
+        'border-color': _vm.tabActive === i ? _vm.activeBorderColor : _vm.borderColor
       }),
       attrs: {
         "weex-type": "div"
@@ -49505,7 +49533,16 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
       staticClass: "border-bottom weex-ct weex-div",
       style: (_vm._px2rem(Object.assign({
         'background-color': _vm.tabActive - 1 === i ? _vm.activeBorderColor : _vm.borderColor
-      }, _vm.fakeBorderStyle), 75)),
+      }), 75)),
+      attrs: {
+        "weex-type": "div"
+      }
+    }), _vm._v(" "), _c('div', {
+      staticClass: "slash weex-ct weex-div",
+      style: ({
+        left: _vm._px2rem(_vm.itemHeight / 8 - 1 + 'px', 75),
+        'background-color': _vm.tabActive === i || _vm.tabActive - 1 === i ? _vm.activeBorderColor : 'transparent'
+      }),
       attrs: {
         "weex-type": "div"
       }
@@ -50035,7 +50072,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     attrs: {
       "weex-type": "div"
     }
-  }, [(_vm.isAndroid) ? _c('div', {
+  }, [(!_vm.isIOS) ? _c('div', {
     staticClass: "container weex-ct weex-div",
     style: ({
       width: _vm._px2rem(_vm._cellWidth + 'px', 75),
@@ -50061,7 +50098,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
       on: {
         "swipe": function($event) {
           $event.stopPropagation();
-          return _vm.slideMenu($event, index, item.rightItem.length)
+          return _vm.slideMenu($event, index, item)
         },
         "touchend": function($event) {
           $event.stopPropagation();
@@ -50170,10 +50207,12 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         "data-evt-panend": ""
       },
       on: {
-        "horizontalpan": function (e) { return !_vm.isAndroid && _vm.onPanStart(e, item, index, item.rightItem ? item.rightItem.length : 0); },
+        "horizontalpan": function($event) {
+          return _vm.handleHorizontalpan(_vm.event, item, index)
+        },
         "panend": function($event) {
           $event.stopPropagation();
-          return (function (e) { return _vm.onPanEnd(e, item, index); })($event)
+          return _vm.handlePanEnd(_vm.event, item, index)
         }
       }
     }, [(_vm.padding) ? _c('div', {
@@ -51727,7 +51766,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     on: {
       "touchstart": function($event) {
         $event.stopPropagation();
-        return (function () {})($event)
+        return _vm.maskTouchStart($event)
       }
     }
   }) : _vm._e()])