dolphin-weex-ui 2.1.9 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/dist/index.native.js +25 -12
- package/dist/index.native.js.map +1 -1
- package/dist/index.web.js +33 -19
- package/dist/index.web.js.map +1 -1
- package/package.json +1 -1
- package/packages/dof-card/index.vue +2 -0
- package/packages/dof-modal/index.vue +1 -1
- package/packages/dof-popover2/colmo.css +2 -1
- package/packages/dof-popover2/index.vue +0 -1
- package/packages/dof-slider/index.vue +22 -11
- package/packages/dof-switch/index.vue +3 -0
package/dist/index.web.js
CHANGED
|
@@ -8373,7 +8373,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
8373
8373
|
|
|
8374
8374
|
|
|
8375
8375
|
// module
|
|
8376
|
-
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?c79720dc"],"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_\" @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 }\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":""}]);
|
|
8376
|
+
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":""}]);
|
|
8377
8377
|
|
|
8378
8378
|
// exports
|
|
8379
8379
|
|
|
@@ -8709,7 +8709,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
8709
8709
|
|
|
8710
8710
|
|
|
8711
8711
|
// module
|
|
8712
|
-
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":""}]);
|
|
8712
|
+
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":""}]);
|
|
8713
8713
|
|
|
8714
8714
|
// exports
|
|
8715
8715
|
|
|
@@ -8863,7 +8863,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
8863
8863
|
|
|
8864
8864
|
|
|
8865
8865
|
// module
|
|
8866
|
-
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":""}]);
|
|
8866
|
+
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":""}]);
|
|
8867
8867
|
|
|
8868
8868
|
// exports
|
|
8869
8869
|
|
|
@@ -8877,7 +8877,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
8877
8877
|
|
|
8878
8878
|
|
|
8879
8879
|
// module
|
|
8880
|
-
exports.push([module.i, "\n@media screen and (weex-theme: colmo) {\n.g-popover[data-v-70015f30] {\n box-shadow: 0px
|
|
8880
|
+
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":""}]);
|
|
8881
8881
|
|
|
8882
8882
|
// exports
|
|
8883
8883
|
|
|
@@ -8989,7 +8989,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
8989
8989
|
|
|
8990
8990
|
|
|
8991
8991
|
// module
|
|
8992
|
-
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":""}]);
|
|
8992
|
+
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":""}]);
|
|
8993
8993
|
|
|
8994
8994
|
// exports
|
|
8995
8995
|
|
|
@@ -9059,7 +9059,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
9059
9059
|
|
|
9060
9060
|
|
|
9061
9061
|
// module
|
|
9062
|
-
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
|
|
9062
|
+
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":""}]);
|
|
9063
9063
|
|
|
9064
9064
|
// exports
|
|
9065
9065
|
|
|
@@ -9423,7 +9423,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
9423
9423
|
|
|
9424
9424
|
|
|
9425
9425
|
// module
|
|
9426
|
-
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
|
|
9426
|
+
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":""}]);
|
|
9427
9427
|
|
|
9428
9428
|
// exports
|
|
9429
9429
|
|
|
@@ -9465,7 +9465,7 @@ exports = module.exports = __webpack_require__(0)(true);
|
|
|
9465
9465
|
|
|
9466
9466
|
|
|
9467
9467
|
// module
|
|
9468
|
-
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?f1c7a978"],"names":[],"mappings":";AAkaA;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 }\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 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 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":""}]);
|
|
9468
|
+
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":""}]);
|
|
9469
9469
|
|
|
9470
9470
|
// exports
|
|
9471
9471
|
|
|
@@ -11460,6 +11460,8 @@ exports.default = {
|
|
|
11460
11460
|
_this.bodyHeight = res.size.height;
|
|
11461
11461
|
if (_this.collapsed_) {
|
|
11462
11462
|
_this.collapseBody(0);
|
|
11463
|
+
} else {
|
|
11464
|
+
_this.expandeBody();
|
|
11463
11465
|
}
|
|
11464
11466
|
});
|
|
11465
11467
|
});
|
|
@@ -23148,7 +23150,6 @@ function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, a
|
|
|
23148
23150
|
//
|
|
23149
23151
|
//
|
|
23150
23152
|
//
|
|
23151
|
-
//
|
|
23152
23153
|
|
|
23153
23154
|
var env = weex.config.env;
|
|
23154
23155
|
|
|
@@ -29052,7 +29053,8 @@ exports.default = {
|
|
|
29052
29053
|
startRight: null,
|
|
29053
29054
|
prevScreenX: null,
|
|
29054
29055
|
isTouching: false,
|
|
29055
|
-
isShow: false
|
|
29056
|
+
isShow: false,
|
|
29057
|
+
getWidthRectTime: 0
|
|
29056
29058
|
};
|
|
29057
29059
|
},
|
|
29058
29060
|
|
|
@@ -29201,17 +29203,25 @@ exports.default = {
|
|
|
29201
29203
|
}
|
|
29202
29204
|
},
|
|
29203
29205
|
mounted: function mounted() {
|
|
29204
|
-
|
|
29205
|
-
|
|
29206
|
-
getBoundingClientRect(this.$refs.track, function (res) {
|
|
29207
|
-
if (res.result) {
|
|
29208
|
-
// 实际可滑动长度（可变化范围）= bar宽度 - btn宽度
|
|
29209
|
-
_this.width = res.size.width - _this._trackHeight;
|
|
29210
|
-
}
|
|
29211
|
-
}, this.delay);
|
|
29206
|
+
this.getRect();
|
|
29212
29207
|
},
|
|
29213
29208
|
|
|
29214
29209
|
methods: {
|
|
29210
|
+
getRect: function getRect() {
|
|
29211
|
+
var _this = this;
|
|
29212
|
+
|
|
29213
|
+
getBoundingClientRect(this.$refs.track, function (res) {
|
|
29214
|
+
if (res.result && res.size.width !== 0) {
|
|
29215
|
+
// 实际可滑动长度（可变化范围）= bar宽度 - btn宽度
|
|
29216
|
+
_this.width = res.size.width - _this._trackHeight;
|
|
29217
|
+
} else {
|
|
29218
|
+
_this.getWidthRectTime < 6 ? setTimeout(function () {
|
|
29219
|
+
_this.getWidthRectTime++;
|
|
29220
|
+
_this.getRect();
|
|
29221
|
+
}, 50) : _this.width = res.size.width - _this._trackHeight;
|
|
29222
|
+
}
|
|
29223
|
+
}, this.delay);
|
|
29224
|
+
},
|
|
29215
29225
|
onTouchStart: function onTouchStart(e) {
|
|
29216
29226
|
var _this2 = this;
|
|
29217
29227
|
|
|
@@ -31789,6 +31799,10 @@ var _dofSpinner = __webpack_require__(11);
|
|
|
31789
31799
|
|
|
31790
31800
|
var _dofSpinner2 = _interopRequireDefault(_dofSpinner);
|
|
31791
31801
|
|
|
31802
|
+
var _utils2 = __webpack_require__(4);
|
|
31803
|
+
|
|
31804
|
+
var _utils3 = _interopRequireDefault(_utils2);
|
|
31805
|
+
|
|
31792
31806
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31793
31807
|
|
|
31794
31808
|
//
|
|
@@ -32000,6 +32014,7 @@ exports.default = {
|
|
|
32000
32014
|
rightDotStyle: function rightDotStyle() {
|
|
32001
32015
|
var offset = 46;
|
|
32002
32016
|
if (this._isColmo && this.type === 'default' || this.type === 'colmo') offset = 50;
|
|
32017
|
+
if (_utils3.default.env.isWeb()) offset = 46;
|
|
32003
32018
|
return {
|
|
32004
32019
|
backgroundColor: this._dotColor,
|
|
32005
32020
|
transform: 'translateX(' + offset + 'px) scale(2.25)'
|
|
@@ -48491,7 +48506,6 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|
|
48491
48506
|
class: ['u-popover-inner', _vm.theme !== 'white' && 'u-popover-theme-dark'],
|
|
48492
48507
|
style: (_vm._px2rem(_vm.popoverInnerStyle, 75)),
|
|
48493
48508
|
attrs: {
|
|
48494
|
-
"scroll-direction": "horizontal",
|
|
48495
48509
|
"show-scrollbar": "false"
|
|
48496
48510
|
}
|
|
48497
48511
|
}, _vm._l((_vm.buttons), function(item, i) {
|