+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| packages | +
+
+ |
+ 0% | +0/14 | +0% | +0/6 | +0% | +0/4 | +0% | +0/13 | +
| packages/mixins | +
+
+ |
+ 57.69% | +15/26 | +35% | +7/20 | +83.33% | +5/6 | +57.69% | +15/26 | +
| packages/yqm-button | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
| packages/yqm-button/src | +
+
+ |
+ 85.71% | +6/7 | +66.67% | +4/6 | +100% | +2/2 | +85.71% | +6/7 | +
| packages/yqm-modal | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
| packages/yqm-modal/src | +
+
+ |
+ 66.67% | +10/15 | +66.67% | +4/6 | +66.67% | +2/3 | +66.67% | +10/15 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| packages | +
+
+ |
+ 0% | +0/14 | +0% | +0/6 | +0% | +0/4 | +0% | +0/13 | +
| packages/mixins | +
+
+ |
+ 57.69% | +15/26 | +35% | +7/20 | +83.33% | +5/6 | +57.69% | +15/26 | +
| packages/yqm-button | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
| packages/yqm-button/src | +
+
+ |
+ 85.71% | +6/7 | +66.67% | +4/6 | +100% | +2/2 | +85.71% | +6/7 | +
| packages/yqm-modal | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
| packages/yqm-modal/src | +
+
+ |
+ 66.67% | +10/15 | +66.67% | +4/6 | +66.67% | +2/3 | +66.67% | +10/15 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/14 | +0% | +0/6 | +0% | +0/4 | +0% | +0/13 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import yqmButton from './yqm-button' +import yqmModal from './yqm-modal' +import './style/common.css' + +const components = [ + yqmButton, + yqmModal +] + +const baseSize = 75 + // 设置 rem 函数 +function setRem() { + // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 + const scale = document.documentElement.clientWidth / 750 + // 设置页面根节点字体大小 + document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' + + //或者设置屏幕宽度高于720时固定fontSize + // var oHtml = document.documentElement + // var aWidth = oHtml.getBoundingClientRect().width + // if (aWidth < 720) { + // oHtml.style.fontSize = aWidth / 15 + "px" + // } else { + // oHtml.style.fontSize = 720 / 15 + "px" + // } +} +// 初始化 +setRem() + // 改变窗口大小时重新设置 rem +window.onresize = function() { + setRem() +} + +// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册 +const install = (Vue) => { + if (install.installed) { + return + } + components.map(component => Vue.component(component.name, component)) +} + +// 判断是否是直接引入文件 +if (typeof window !== 'undefined' && window.Vue) { + install(window.Vue) +} + +export default { + // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 + install, + ...components +} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| style-apply.mixin.js | +
+
+ |
+ 57.69% | +15/26 | +35% | +7/20 | +83.33% | +5/6 | +57.69% | +15/26 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 | + + + + + | import styleApplyMixin from './style-apply.mixin';
+
+export {
+ styleApplyMixin,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 | + + + + + + + + + + + + + + + + + +16x + + + +16x + + + +12x +12x +12x +12x +12x +12x +12x + +12x + + + + + + + +12x + + +12x + +12x + +12x + + +4x + + + + + + + + + + + + | function getBackgroundStyle(color, image) { + const backgroundColor = color || ''; + const backgroundImage = image ? `url(${image}) no-repeat top center/100% auto` : ''; + console.log({ backgroundColor, backgroundImage }, { + background: [ + backgroundColor, + backgroundImage, + ].join(' '), + }); + return { + background: [ + backgroundColor, + backgroundImage, + ].join(' '), + }; +} + +function calcResponsivePx(number) { + return number === '' ? 'auto' : `${calcResponsivePxNumber(number)}px`; +} + +function calcResponsivePxNumber(number) { + return innerWidth * number / 750; +} + +function getPositionStyle(options) { + const style = {}; + Object.keys(options).forEach((key) => { + let realKey = key; + let realValue = options[key]; + console.log('realValue: ', key, realValue); + Eif (/left|top|width|height|lineHeight|marginTop|marginBottom|marginBetween/i.test(key) && /^-?\d+\.?\d*?$/.test(realValue)) { + realValue = calcResponsivePx(options[key]); + } + Iif (key === 'left') { + if (realValue.indexOf('-') > -1) { + realKey = 'right'; + realValue = realValue.replace('-', ''); + } else if (options[key] === '') { + realValue = '50%'; + style.transform = 'translateX(-50%)'; + } + } else Iif (options[key] === '') { + return true; + } + style[realKey] = realValue; + }); + console.log({ style }); + // style.position = 'fixed'; + return style; +} +function getFontSize(size) { + return size === '' ? 'inherit' : calcResponsivePx(size); +} + +export default { + methods: { + calcResponsivePx, + getBackgroundStyle, + getPositionStyle, + getFontSize, + calcResponsivePxNumber + }, +}; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 | + + + + + + + | import yqmButton from './src/yqm-button' + +yqmButton.install = (Vue) => { + Vue.component(yqmButton.name, yqmButton) +} + +export default yqmButton + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| yqm-button.vue | +
+
+ |
+ 85.71% | +6/7 | +66.67% | +4/6 | +100% | +2/2 | +85.71% | +6/7 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +4x + + + + +2x +1x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | <template>
+ <div
+ :style="[{
+ ...getPositionStyle({
+ height
+ }),
+ display: block ? 'flex' : 'inline-flex',
+ fontSize: getFontSize(fontSize ? fontSize : Math.min(width,height) * 0.45),
+ opacity: disabled ? '0.7' : '1'
+ },
+ plain ? {
+ border: `1px solid ${color}`,
+ color
+ } : {
+ background
+ },
+ circle ? {
+ borderRadius: '50%',
+ ...getPositionStyle({
+ height: width
+ })
+ } : {
+ borderRadius: round ? `${Math.min(width,height) / 2}px` : '5px',
+ },
+ fullScreen ? {
+ width: '100%'
+ } : {
+ ...getPositionStyle({
+ width
+ })
+ }
+ ]"
+ :class="['yqmButton']"
+ @click="handleClick"
+ >
+ <div class="slot-wrapper">
+ <div class="pre">
+ <slot name="pre"></slot>
+ </div>
+ <div class="default">
+ <slot></slot>
+ </div>
+ <div class="append">
+ <slot name="append"></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { styleApplyMixin } from '../../mixins/index';
+export default {
+ name: "yqmButton",
+ mixins: [styleApplyMixin],
+ /**
+ * width: 按钮的宽，不用加单位，自适应
+ * height: 按钮的高，不用加单位，自适应
+ * color: 按钮的颜色，可以传入linear-gradient渐变色
+ * backgroundImage: 按钮的背景图
+ * plain: 是否镂空
+ * round: 是否圆角
+ * block: 是否为块级元素
+ * fontSize: 按钮文字大小，如不传将自适应按钮宽高
+ * disabled: 按钮是否禁用
+ * circle: 是否圆形，以width为直径
+ * navigateTo: 按钮点击跳转路由配置，可以是路径或者是route对象
+ * fullScreen: 是否为宽屏样式
+ */
+ props: {
+ width: {
+ type: [String,Number],
+ default: 120
+ },
+ height: {
+ type: [String,Number],
+ default: 70
+ },
+ color: {
+ type: String,
+ default: '#fbbd08'
+ },
+ backgroundImage: {
+ type: String,
+ default: ''
+ },
+ plain: {
+ type: Boolean,
+ default: false
+ },
+ round: {
+ type: Boolean,
+ default: false
+ },
+ block: {
+ type: Boolean,
+ default: true
+ },
+ fontSize: {
+ type: [String,Number],
+ default: ''
+ },
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ circle: {
+ type: Boolean,
+ default: false
+ },
+ navigateTo: {
+ type: [String,Object],
+ default: ''
+ },
+ fullScreen: {
+ type: Boolean,
+ default: false
+ }
+ },
+ computed: {
+ background(){
+ return this.backgroundImage ? `url('${this.backgroundImage}') no-repeat center center/contain` : this.color
+ }
+ },
+ methods: {
+ handleClick(){
+ if (this.disabled){
+ return
+ }
+ this.$emit('click')
+I if (this.navigateTo){
+ this.$router.push(this.navigateTo)
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+ .yqmButton{
+ position: relative;
+ justify-content: center;
+ align-items: center;
+ color: #f8f8f8;
+ user-select: none;
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: transparent; /* 防止ios点击出现选中效果 */
+ box-sizing: border-box;
+ padding: 0 20px;
+
+ .slot-wrapper{
+ height: 100%;
+ position: relative;
+ //border: green 1px solid;
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ align-items: center;
+
+ div{
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ //border: red 1px solid;
+ }
+ }
+ }
+</style>
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 | + + + + + + | import yqmModal from './src/yqm-modal' + +yqmModal.install = (Vue) => { + Vue.component(yqmModal.name, yqmModal) +} + +export default yqmModal |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| yqm-modal.vue | +
+
+ |
+ 66.67% | +10/15 | +66.67% | +4/6 | +66.67% | +2/3 | +66.67% | +10/15 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x +2x + +2x + +2x +2x + + + +2x +2x + + + +2x + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | <template>
+ <div class="yqmModal" v-show="isShow">
+ <div
+ v-if="mask"
+ class="modal-mask"
+ @touchend="clickClose"
+ :style="[{ background: `${maskbgc}` }]"
+ ></div>
+
+ <div
+ class="modal-content"
+ :style="[
+ {
+ ...getPositionStyle({
+ width,
+ }),
+ ...getPositionStyle({
+ height,
+ }),
+ },
+ ]"
+ >
+ <div class="content">
+ <slot name="content"></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+
+<script>
+import { styleApplyMixin } from "../../mixins/index";
+
+export default {
+ name: "yqmModal",
+ mixins: [styleApplyMixin],
+
+ /**
+ * width: 模态框的宽，不用加单位，自适应
+ * height: 模态框的高，不用加单位，自适应
+ * mask: 是否有遮罩层
+ * maskbgc: 遮罩层背景颜色
+ * clickThrough: 是否允许点击穿透
+ * slide: 打开模态框后是否可以滚动
+ *
+ * modalShow:模态框show事件
+ * modalHide:模态框hide事件
+ */
+
+ props: {
+ width: {
+ type: [String, Number],
+ default: 250,
+ },
+ height: {
+ type: [String, Number],
+ default: 200,
+ },
+ mask: {
+ type: [Boolean],
+ default: true,
+ },
+ maskbgc: {
+ type: String,
+ default: "rgba(0,0,0,.5)",
+ },
+ clickThrough: {
+ type: Boolean,
+ default: false,
+ },
+ slide: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ mounted() {
+ // 是否禁用滚动条 记录当前位置 利用top固定
+E if (!this.slide) {
+ let scrollTop =
+ document.body.scrollTop || document.documentElement.scrollTop;
+ this.scrollTop = scrollTop;
+
+ document.body.style.position = "fixed";
+ document.body.style.top = `-${this.scrollTop}px`;
+ }
+
+ // 是否点击穿透
+E if (!this.clickThrough) {
+ console.log("1");
+ }
+
+ // 提供modalShow方法
+ this.$emit("modalShow");
+ },
+
+ data() {
+ return {
+ isShow: true,
+ scrollTop: 0,
+ };
+ },
+
+ methods: {
+ clickClose() {
+ // 关闭模态框 回滚到原先位置
+ this.isShow = !this.isShow;
+ document.body.style.position = "static";
+ document.body.style.top = "0px";
+ window.scrollTo(0, this.scrollTop);
+
+ // 提供modalHide方法
+ this.$emit("modalHide");
+ },
+ },
+};
+</script>
+
+
+<style scoped lang="scss">
+.yqmModal {
+ position: relative;
+
+ .modal-content {
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 0.125rem;
+ background-color: #fff;
+ box-shadow: 0.0625rem 0.0625rem 0.0625rem #666666;
+ z-index: 1000;
+
+ .content {
+ height: 100%;
+ }
+ }
+ .modal-mask {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 999;
+ }
+}
+</style> |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/14 | +0% | +0/6 | +0% | +0/4 | +0% | +0/13 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import yqmButton from './yqm-button' +import yqmModal from './yqm-modal' +import './style/common.css' + +const components = [ + yqmButton, + yqmModal +] + +const baseSize = 75 + // 设置 rem 函数 +function setRem() { + // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 + const scale = document.documentElement.clientWidth / 750 + // 设置页面根节点字体大小 + document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' + + //或者设置屏幕宽度高于720时固定fontSize + // var oHtml = document.documentElement + // var aWidth = oHtml.getBoundingClientRect().width + // if (aWidth < 720) { + // oHtml.style.fontSize = aWidth / 15 + "px" + // } else { + // oHtml.style.fontSize = 720 / 15 + "px" + // } +} +// 初始化 +setRem() + // 改变窗口大小时重新设置 rem +window.onresize = function() { + setRem() +} + +// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册 +const install = (Vue) => { + if (install.installed) { + return + } + components.map(component => Vue.component(component.name, component)) +} + +// 判断是否是直接引入文件 +if (typeof window !== 'undefined' && window.Vue) { + install(window.Vue) +} + +export default { + // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 + install, + ...components +} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| style-apply.mixin.js | +
+
+ |
+ 57.69% | +15/26 | +35% | +7/20 | +83.33% | +5/6 | +57.69% | +15/26 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 | + + + + + | import styleApplyMixin from './style-apply.mixin';
+
+export {
+ styleApplyMixin,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 | + + + + + + + + + + + + + + + + + +16x + + + +16x + + + +12x +12x +12x +12x +12x +12x +12x + +12x + + + + + + + +12x + + +12x + +12x + +12x + + +4x + + + + + + + + + + + + | function getBackgroundStyle(color, image) { + const backgroundColor = color || ''; + const backgroundImage = image ? `url(${image}) no-repeat top center/100% auto` : ''; + console.log({ backgroundColor, backgroundImage }, { + background: [ + backgroundColor, + backgroundImage, + ].join(' '), + }); + return { + background: [ + backgroundColor, + backgroundImage, + ].join(' '), + }; +} + +function calcResponsivePx(number) { + return number === '' ? 'auto' : `${calcResponsivePxNumber(number)}px`; +} + +function calcResponsivePxNumber(number) { + return innerWidth * number / 750; +} + +function getPositionStyle(options) { + const style = {}; + Object.keys(options).forEach((key) => { + let realKey = key; + let realValue = options[key]; + console.log('realValue: ', key, realValue); + Eif (/left|top|width|height|lineHeight|marginTop|marginBottom|marginBetween/i.test(key) && /^-?\d+\.?\d*?$/.test(realValue)) { + realValue = calcResponsivePx(options[key]); + } + Iif (key === 'left') { + if (realValue.indexOf('-') > -1) { + realKey = 'right'; + realValue = realValue.replace('-', ''); + } else if (options[key] === '') { + realValue = '50%'; + style.transform = 'translateX(-50%)'; + } + } else Iif (options[key] === '') { + return true; + } + style[realKey] = realValue; + }); + console.log({ style }); + // style.position = 'fixed'; + return style; +} +function getFontSize(size) { + return size === '' ? 'inherit' : calcResponsivePx(size); +} + +export default { + methods: { + calcResponsivePx, + getBackgroundStyle, + getPositionStyle, + getFontSize, + calcResponsivePxNumber + }, +}; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 | + + + + + + + | import yqmButton from './src/yqm-button' + +yqmButton.install = (Vue) => { + Vue.component(yqmButton.name, yqmButton) +} + +export default yqmButton + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| yqm-button.vue | +
+
+ |
+ 85.71% | +6/7 | +66.67% | +4/6 | +100% | +2/2 | +85.71% | +6/7 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +4x + + + + +2x +1x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | <template>
+ <div
+ :style="[{
+ ...getPositionStyle({
+ height
+ }),
+ display: block ? 'flex' : 'inline-flex',
+ fontSize: getFontSize(fontSize ? fontSize : Math.min(width,height) * 0.45),
+ opacity: disabled ? '0.7' : '1'
+ },
+ plain ? {
+ border: `1px solid ${color}`,
+ color
+ } : {
+ background
+ },
+ circle ? {
+ borderRadius: '50%',
+ ...getPositionStyle({
+ height: width
+ })
+ } : {
+ borderRadius: round ? `${Math.min(width,height) / 2}px` : '5px',
+ },
+ fullScreen ? {
+ width: '100%'
+ } : {
+ ...getPositionStyle({
+ width
+ })
+ }
+ ]"
+ :class="['yqmButton']"
+ @click="handleClick"
+ >
+ <div class="slot-wrapper">
+ <div class="pre">
+ <slot name="pre"></slot>
+ </div>
+ <div class="default">
+ <slot></slot>
+ </div>
+ <div class="append">
+ <slot name="append"></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { styleApplyMixin } from '../../mixins/index';
+export default {
+ name: "yqmButton",
+ mixins: [styleApplyMixin],
+ /**
+ * width: 按钮的宽，不用加单位，自适应
+ * height: 按钮的高，不用加单位，自适应
+ * color: 按钮的颜色，可以传入linear-gradient渐变色
+ * backgroundImage: 按钮的背景图
+ * plain: 是否镂空
+ * round: 是否圆角
+ * block: 是否为块级元素
+ * fontSize: 按钮文字大小，如不传将自适应按钮宽高
+ * disabled: 按钮是否禁用
+ * circle: 是否圆形，以width为直径
+ * navigateTo: 按钮点击跳转路由配置，可以是路径或者是route对象
+ * fullScreen: 是否为宽屏样式
+ */
+ props: {
+ width: {
+ type: [String,Number],
+ default: 120
+ },
+ height: {
+ type: [String,Number],
+ default: 70
+ },
+ color: {
+ type: String,
+ default: '#fbbd08'
+ },
+ backgroundImage: {
+ type: String,
+ default: ''
+ },
+ plain: {
+ type: Boolean,
+ default: false
+ },
+ round: {
+ type: Boolean,
+ default: false
+ },
+ block: {
+ type: Boolean,
+ default: true
+ },
+ fontSize: {
+ type: [String,Number],
+ default: ''
+ },
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ circle: {
+ type: Boolean,
+ default: false
+ },
+ navigateTo: {
+ type: [String,Object],
+ default: ''
+ },
+ fullScreen: {
+ type: Boolean,
+ default: false
+ }
+ },
+ computed: {
+ background(){
+ return this.backgroundImage ? `url('${this.backgroundImage}') no-repeat center center/contain` : this.color
+ }
+ },
+ methods: {
+ handleClick(){
+ if (this.disabled){
+ return
+ }
+ this.$emit('click')
+I if (this.navigateTo){
+ this.$router.push(this.navigateTo)
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+ .yqmButton{
+ position: relative;
+ justify-content: center;
+ align-items: center;
+ color: #f8f8f8;
+ user-select: none;
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: transparent; /* 防止ios点击出现选中效果 */
+ box-sizing: border-box;
+ padding: 0 20px;
+
+ .slot-wrapper{
+ height: 100%;
+ position: relative;
+ //border: green 1px solid;
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ align-items: center;
+
+ div{
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ //border: red 1px solid;
+ }
+ }
+ }
+</style>
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 | + + + + + + | import yqmModal from './src/yqm-modal' + +yqmModal.install = (Vue) => { + Vue.component(yqmModal.name, yqmModal) +} + +export default yqmModal |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| yqm-modal.vue | +
+
+ |
+ 66.67% | +10/15 | +66.67% | +4/6 | +66.67% | +2/3 | +66.67% | +10/15 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x +2x + +2x + +2x +2x + + + +2x +2x + + + +2x + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | <template>
+ <div class="yqmModal" v-show="isShow">
+ <div
+ v-if="mask"
+ class="modal-mask"
+ @touchend="clickClose"
+ :style="[{ background: `${maskbgc}` }]"
+ ></div>
+
+ <div
+ class="modal-content"
+ :style="[
+ {
+ ...getPositionStyle({
+ width,
+ }),
+ ...getPositionStyle({
+ height,
+ }),
+ },
+ ]"
+ >
+ <div class="content">
+ <slot name="content"></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+
+<script>
+import { styleApplyMixin } from "../../mixins/index";
+
+export default {
+ name: "yqmModal",
+ mixins: [styleApplyMixin],
+
+ /**
+ * width: 模态框的宽，不用加单位，自适应
+ * height: 模态框的高，不用加单位，自适应
+ * mask: 是否有遮罩层
+ * maskbgc: 遮罩层背景颜色
+ * clickThrough: 是否允许点击穿透
+ * slide: 打开模态框后是否可以滚动
+ *
+ * modalShow:模态框show事件
+ * modalHide:模态框hide事件
+ */
+
+ props: {
+ width: {
+ type: [String, Number],
+ default: 250,
+ },
+ height: {
+ type: [String, Number],
+ default: 200,
+ },
+ mask: {
+ type: [Boolean],
+ default: true,
+ },
+ maskbgc: {
+ type: String,
+ default: "rgba(0,0,0,.5)",
+ },
+ clickThrough: {
+ type: Boolean,
+ default: false,
+ },
+ slide: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ mounted() {
+ // 是否禁用滚动条 记录当前位置 利用top固定
+E if (!this.slide) {
+ let scrollTop =
+ document.body.scrollTop || document.documentElement.scrollTop;
+ this.scrollTop = scrollTop;
+
+ document.body.style.position = "fixed";
+ document.body.style.top = `-${this.scrollTop}px`;
+ }
+
+ // 是否点击穿透
+E if (!this.clickThrough) {
+ console.log("1");
+ }
+
+ // 提供modalShow方法
+ this.$emit("modalShow");
+ },
+
+ data() {
+ return {
+ isShow: true,
+ scrollTop: 0,
+ };
+ },
+
+ methods: {
+ clickClose() {
+ // 关闭模态框 回滚到原先位置
+ this.isShow = !this.isShow;
+ document.body.style.position = "static";
+ document.body.style.top = "0px";
+ window.scrollTo(0, this.scrollTop);
+
+ // 提供modalHide方法
+ this.$emit("modalHide");
+ },
+ },
+};
+</script>
+
+
+<style scoped lang="scss">
+.yqmModal {
+ position: relative;
+
+ .modal-content {
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 0.125rem;
+ background-color: #fff;
+ box-shadow: 0.0625rem 0.0625rem 0.0625rem #666666;
+ z-index: 1000;
+
+ .content {
+ height: 100%;
+ }
+ }
+ .modal-mask {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 999;
+ }
+}
+</style> |