Commit 98557a5b44744d70c820e2a9e6aa3c809012f669
1 parent
b4db79b0
Exists in
master
feat: 新增压窗屏
Showing
4 changed files
with
242 additions
and
0 deletions
Show diff stats
examples/router/routes.js
| ... | ... | @@ -128,6 +128,12 @@ const _components = [ |
| 128 | 128 | group: '业务组件', |
| 129 | 129 | children: [ |
| 130 | 130 | { |
| 131 | + path: 'landscape', | |
| 132 | + name: 'landscape', | |
| 133 | + meta: { title: 'Landscape 压窗屏' }, | |
| 134 | + component: () => import('@/views/docs/component/landscape.md'), | |
| 135 | + }, | |
| 136 | + { | |
| 131 | 137 | path: 'platenumber', |
| 132 | 138 | name: 'platenumber', |
| 133 | 139 | meta: { title: 'Platenumber 车牌号' }, | ... | ... |
| ... | ... | @@ -0,0 +1,98 @@ |
| 1 | +# Landscape 压窗屏 | |
| 2 | + | |
| 3 | +## 基本用法 | |
| 4 | + | |
| 5 | +::: snippet 常用于推送图片展示 | |
| 6 | + | |
| 7 | +```html | |
| 8 | +<template> | |
| 9 | + <div class="landscape-demo"> | |
| 10 | + <zui-button @click="showPic=true">图片广告</zui-button> | |
| 11 | + <zui-landscape v-model="showPic"> | |
| 12 | + <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz"> | |
| 13 | + </zui-landscape> | |
| 14 | + | |
| 15 | + <zui-button @click.native="showMaskClosable=true">点击蒙层关闭</zui-button> | |
| 16 | + <zui-landscape v-model="showMaskClosable" mask-closable @click="onClick"> | |
| 17 | + <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz"> | |
| 18 | + </zui-landscape> | |
| 19 | + | |
| 20 | + <zui-button @click="showNoMask=true">无蒙层</zui-button> | |
| 21 | + <zui-landscape v-model="showNoMask" :has-mask="false"> | |
| 22 | + <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz"> | |
| 23 | + </zui-landscape> | |
| 24 | + | |
| 25 | + <zui-button @click="showCustomTransition=true">自定义动画</zui-button> | |
| 26 | + <zui-landscape v-model="showCustomTransition" transition="zui-bounce"> | |
| 27 | + <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz"> | |
| 28 | + </zui-landscape> | |
| 29 | + | |
| 30 | + <zui-button @click="showFullScreen=true">全屏</zui-button> | |
| 31 | + <zui-landscape v-model="showFullScreen" full-screen> | |
| 32 | + <p>今天晚上，很好的月光。</p> | |
| 33 | + <p>我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？</p> | |
| 34 | + <p>我怕得有理。</p> | |
| 35 | + <p>今天全没月光，我知道不妙。早上小心出门，赵贵翁的眼色便怪：似乎怕我，似乎想害我。还有七八个人，交头接耳的议论我，张着嘴，对我笑了一笑；我便从头直冷到脚根，晓得他们布置，都已妥当了。</p> | |
| 36 | + <p>我可不怕，仍旧走我的路。前面一伙小孩子，也在那里议论我；眼色也同赵贵翁一样，脸色也铁青。我想我同小孩子有什么仇，他也这样。忍不住大声说，“你告诉我！”他们可就跑了。</p> | |
| 37 | + <p>我想：我同赵贵翁有什么仇，同路上的人又有什么仇；只有廿年以前，把古久先生的陈年流水簿子⑶，踹了一脚，古久先生很不高兴。赵贵翁虽然不认识他，一定也听到风声，代抱不平；约定路上的人，同我作冤对。但是小孩子呢？那时候，他们还没有出世，何以今天也睁着怪眼睛，似乎怕我，似乎想害我。这真教我怕，教我纳罕而且伤心。</p> | |
| 38 | + <p>我明白了。这是他们娘老子教的！</p> | |
| 39 | + <p>晚上总是睡不着。凡事须得研究，才会明白。</p> | |
| 40 | + <p>他们——也有给知县打枷过的，也有给绅士掌过嘴的，也有衙役占了他妻子的，也有老子娘被债主逼死的；他们那时候的脸色，全没有昨天这么怕，也没有这么凶。</p> | |
| 41 | + <p>最奇怪的是昨天街上的那个女人，打他儿子，嘴里说道，“老子呀！我要咬你几口才出气！”他眼睛却看着我。我出了一惊，遮掩不住；那青面獠牙的一伙人，便都哄笑起来。陈老五赶上前，硬把我拖回家中了。</p> | |
| 42 | + <p>拖我回家，家里的人都装作不认识我；他们的脸色，也全同别人一样。进了书房，便反扣上门，宛然是关了一只鸡鸭。这一件事，越教我猜不出底细。</p> | |
| 43 | + <p>前几天，狼子村的佃户来告荒，对我大哥说，他们村里的一个大恶人，给大家打死了；几个人便挖出他的心肝来，用油煎炒了吃，可以壮壮胆子。我插了一句嘴，佃户和大哥便都看我几眼。今天才晓得他们的眼光，全同外面的那伙人一模一样。</p> | |
| 44 | + </zui-landscape> | |
| 45 | + </div> | |
| 46 | +</template> | |
| 47 | + | |
| 48 | +<script> | |
| 49 | +export default { | |
| 50 | + data() { | |
| 51 | + return { | |
| 52 | + showPic: false, | |
| 53 | + showMaskClosable: false, | |
| 54 | + showNoMask: false, | |
| 55 | + showCustomTransition: false, | |
| 56 | + showFullScreen: false, | |
| 57 | + } | |
| 58 | + }, | |
| 59 | + methods: { | |
| 60 | + onClick() { | |
| 61 | + alert('click') | |
| 62 | + } | |
| 63 | + } | |
| 64 | +} | |
| 65 | +</script> | |
| 66 | + | |
| 67 | +<style lang="scss"> | |
| 68 | +.landscape-demo { | |
| 69 | + height: 60vh; | |
| 70 | + width: 480px; | |
| 71 | + position: relative; | |
| 72 | + overflow: hidden; | |
| 73 | + background: #f5f5f5; | |
| 74 | + padding: 1rem; | |
| 75 | +} | |
| 76 | +</style> | |
| 77 | +``` | |
| 78 | + | |
| 79 | +::: | |
| 80 | + | |
| 81 | +## API | |
| 82 | + | |
| 83 | +## Attribute 属性 | |
| 84 | + | |
| 85 | +参数|说明|类型|可选值|默认值 | |
| 86 | +-|-|-|-|- | |
| 87 | +v-model | 是否展示 | Boolean | - | false | |
| 88 | +full-screen | 是否全屏 | Boolean | - | false | |
| 89 | +has-mask | 是否有蒙层 | Boolean | - | true | |
| 90 | +mask-closable | 是否可以通过点击蒙层关闭 | Boolean | - | false | |
| 91 | +transition | 弹出层过渡动画 | String | zui-fade, zui-punch | zui-punch | |
| 92 | + | |
| 93 | +## Events 事件 | |
| 94 | + | |
| 95 | +事件名称|说明|回调参数 | |
| 96 | +-|-|- | |
| 97 | +show | 弹出层展示事件 | - | |
| 98 | +hide | 弹出层隐藏事件 | - | |
| 0 | 99 | \ No newline at end of file | ... | ... |
| ... | ... | @@ -0,0 +1,59 @@ |
| 1 | +.zui-landscape { | |
| 2 | + &.is-full { | |
| 3 | + .zui-popup-box { | |
| 4 | + position: absolute; | |
| 5 | + top: 0; | |
| 6 | + right: 0; | |
| 7 | + bottom: 0; | |
| 8 | + left: 0; | |
| 9 | + } | |
| 10 | + .zui-landscape-body { | |
| 11 | + width: 100%; | |
| 12 | + height: 100%; | |
| 13 | + background: #FFF; | |
| 14 | + } | |
| 15 | + .zui-landscape-content { | |
| 16 | + width: 100%; | |
| 17 | + height: 100%; | |
| 18 | + overflow: auto; | |
| 19 | + -webkit-overflow-scrolling: touch; | |
| 20 | + } | |
| 21 | + .zui-icon.zui-landscape-close { | |
| 22 | + position: absolute; | |
| 23 | + right: 2rem; | |
| 24 | + top: 1rem; | |
| 25 | + margin: auto; | |
| 26 | + } | |
| 27 | + } | |
| 28 | + .zui-popup, .zui-popup-box { | |
| 29 | + z-index: 1600; | |
| 30 | + } | |
| 31 | + .zui-icon.zui-landscape-close { | |
| 32 | + position: relative; | |
| 33 | + display: block; | |
| 34 | + margin: 2rem auto 1rem auto; | |
| 35 | + font-size: 2rem; | |
| 36 | + width: 2rem; | |
| 37 | + height: 2rem; | |
| 38 | + line-height: 2rem; | |
| 39 | + text-align: center; | |
| 40 | + color: #FFF; | |
| 41 | + &.dark { | |
| 42 | + color: #111A34; | |
| 43 | + opacity: 0.5; | |
| 44 | + } | |
| 45 | + } | |
| 46 | + .zui-landscape-content { | |
| 47 | + width: 70%; | |
| 48 | + margin: auto; | |
| 49 | + // width: 270px; | |
| 50 | + font-size: 1rem; | |
| 51 | + overflow: auto; | |
| 52 | + -webkit-overflow-scrolling: touch; | |
| 53 | + box-sizing: border-box; | |
| 54 | + img { | |
| 55 | + max-width: 100%; | |
| 56 | + height: auto; | |
| 57 | + } | |
| 58 | + } | |
| 59 | +} | |
| 0 | 60 | \ No newline at end of file | ... | ... |
| ... | ... | @@ -0,0 +1,79 @@ |
| 1 | +<template> | |
| 2 | + <div class="zui-landscape" :class="{ 'is-full': fullScreen }"> | |
| 3 | + <zui-popup | |
| 4 | + v-model="isLandscapeShow" | |
| 5 | + :mask-closable="maskClosable" | |
| 6 | + prevent-scroll | |
| 7 | + prevent-scroll-exclude=".zui-landscape-content" | |
| 8 | + :has-mask="!fullScreen && hasMask" | |
| 9 | + :transition="transition" | |
| 10 | + @input="$emit('input', false)" | |
| 11 | + @show="$emit('show')" | |
| 12 | + @hide="$emit('hide')" | |
| 13 | + > | |
| 14 | + <div class="zui-landscape-body" :class="{ scroll }" @click="$_click"> | |
| 15 | + <div class="zui-landscape-content"> | |
| 16 | + <slot></slot> | |
| 17 | + </div> | |
| 18 | + <zui-icon class="zui-landscape-close" :class="{ dark: !hasMask || fullScreen }" @click="$_close" :name="fullScreen ? 'close' : 'close'" /> | |
| 19 | + </div> | |
| 20 | + </zui-popup> | |
| 21 | + </div> | |
| 22 | +</template> | |
| 23 | + | |
| 24 | +<script> | |
| 25 | +export default { | |
| 26 | + name: 'Landscape', | |
| 27 | + props: { | |
| 28 | + value: { | |
| 29 | + type: Boolean, | |
| 30 | + default: false, | |
| 31 | + }, | |
| 32 | + scroll: { | |
| 33 | + type: Boolean, | |
| 34 | + default: false, | |
| 35 | + }, | |
| 36 | + fullScreen: { | |
| 37 | + type: Boolean, | |
| 38 | + default: false, | |
| 39 | + }, | |
| 40 | + hasMask: { | |
| 41 | + type: Boolean, | |
| 42 | + default: true, | |
| 43 | + }, | |
| 44 | + maskClosable: { | |
| 45 | + type: Boolean, | |
| 46 | + default: false, | |
| 47 | + }, | |
| 48 | + transition: { | |
| 49 | + type: String, | |
| 50 | + default() { | |
| 51 | + return this.fullScreen ? 'zui-fade' : 'zui-punch'; | |
| 52 | + }, | |
| 53 | + }, | |
| 54 | + }, | |
| 55 | + data() { | |
| 56 | + return { | |
| 57 | + isLandscapeShow: this.value, | |
| 58 | + }; | |
| 59 | + }, | |
| 60 | + watch: { | |
| 61 | + value(val) { | |
| 62 | + this.isLandscapeShow = val; | |
| 63 | + }, | |
| 64 | + }, | |
| 65 | + methods: { | |
| 66 | + // MARK: private methods | |
| 67 | + $_close() { | |
| 68 | + this.isLandscapeShow = false; | |
| 69 | + }, | |
| 70 | + $_click() { | |
| 71 | + this.$emit('click'); | |
| 72 | + }, | |
| 73 | + }, | |
| 74 | +}; | |
| 75 | +</script> | |
| 76 | + | |
| 77 | +<style lang="scss"> | |
| 78 | +@import './index.scss'; | |
| 79 | +</style> | ... | ... |