From 98557a5b44744d70c820e2a9e6aa3c809012f669 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Sun, 30 Jan 2022 00:23:16 +0800
Subject: [PATCH] feat: 新增压窗屏

---
 examples/router/routes.js                  |  6 ++++++
 examples/views/docs/component/landscape.md | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/landscape/index.scss              | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/landscape/index.vue               | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 242 insertions(+), 0 deletions(-)
 create mode 100644 examples/views/docs/component/landscape.md
 create mode 100644 packages/landscape/index.scss
 create mode 100644 packages/landscape/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index ca4d66e..e0c752a 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -128,6 +128,12 @@ const _components = [
     group: '业务组件',
     children: [
       {
+        path: 'landscape',
+        name: 'landscape',
+        meta: { title: 'Landscape 压窗屏' },
+        component: () => import('@/views/docs/component/landscape.md'),
+      },
+      {
         path: 'platenumber',
         name: 'platenumber',
         meta: { title: 'Platenumber 车牌号' },
diff --git a/examples/views/docs/component/landscape.md b/examples/views/docs/component/landscape.md
new file mode 100644
index 0000000..5c5383a
--- /dev/null
+++ b/examples/views/docs/component/landscape.md
@@ -0,0 +1,98 @@
+# Landscape 压窗屏
+
+## 基本用法
+
+::: snippet 常用于推送图片展示
+
+```html
+<template>
+  <div class="landscape-demo">
+    <zui-button @click="showPic=true">图片广告</zui-button>
+    <zui-landscape v-model="showPic">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+    </zui-landscape>
+
+    <zui-button @click.native="showMaskClosable=true">点击蒙层关闭</zui-button>
+    <zui-landscape v-model="showMaskClosable" mask-closable @click="onClick">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+    </zui-landscape>
+
+    <zui-button @click="showNoMask=true">无蒙层</zui-button>
+    <zui-landscape v-model="showNoMask" :has-mask="false">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+    </zui-landscape>
+
+    <zui-button @click="showCustomTransition=true">自定义动画</zui-button>
+    <zui-landscape v-model="showCustomTransition" transition="zui-bounce">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+    </zui-landscape>
+
+    <zui-button @click="showFullScreen=true">全屏</zui-button>
+    <zui-landscape v-model="showFullScreen" full-screen>
+      <p>今天晚上，很好的月光。</p>
+      <p>我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？</p>
+      <p>我怕得有理。</p>
+      <p>今天全没月光，我知道不妙。早上小心出门，赵贵翁的眼色便怪：似乎怕我，似乎想害我。还有七八个人，交头接耳的议论我，张着嘴，对我笑了一笑；我便从头直冷到脚根，晓得他们布置，都已妥当了。</p>
+      <p>我可不怕，仍旧走我的路。前面一伙小孩子，也在那里议论我；眼色也同赵贵翁一样，脸色也铁青。我想我同小孩子有什么仇，他也这样。忍不住大声说，“你告诉我！”他们可就跑了。</p>
+      <p>我想：我同赵贵翁有什么仇，同路上的人又有什么仇；只有廿年以前，把古久先生的陈年流水簿子⑶，踹了一脚，古久先生很不高兴。赵贵翁虽然不认识他，一定也听到风声，代抱不平；约定路上的人，同我作冤对。但是小孩子呢？那时候，他们还没有出世，何以今天也睁着怪眼睛，似乎怕我，似乎想害我。这真教我怕，教我纳罕而且伤心。</p>
+      <p>我明白了。这是他们娘老子教的！</p>
+      <p>晚上总是睡不着。凡事须得研究，才会明白。</p>
+      <p>他们——也有给知县打枷过的，也有给绅士掌过嘴的，也有衙役占了他妻子的，也有老子娘被债主逼死的；他们那时候的脸色，全没有昨天这么怕，也没有这么凶。</p>
+      <p>最奇怪的是昨天街上的那个女人，打他儿子，嘴里说道，“老子呀！我要咬你几口才出气！”他眼睛却看着我。我出了一惊，遮掩不住；那青面獠牙的一伙人，便都哄笑起来。陈老五赶上前，硬把我拖回家中了。</p>
+      <p>拖我回家，家里的人都装作不认识我；他们的脸色，也全同别人一样。进了书房，便反扣上门，宛然是关了一只鸡鸭。这一件事，越教我猜不出底细。</p>
+      <p>前几天，狼子村的佃户来告荒，对我大哥说，他们村里的一个大恶人，给大家打死了；几个人便挖出他的心肝来，用油煎炒了吃，可以壮壮胆子。我插了一句嘴，佃户和大哥便都看我几眼。今天才晓得他们的眼光，全同外面的那伙人一模一样。</p>
+    </zui-landscape>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showPic: false,
+      showMaskClosable: false,
+      showNoMask: false,
+      showCustomTransition: false,
+      showFullScreen: false,
+    }
+  },
+  methods: {
+    onClick() {
+      alert('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.landscape-demo {
+  height: 60vh;
+  width: 480px;
+  position: relative;
+  overflow: hidden;
+  background: #f5f5f5;
+  padding: 1rem;
+}
+</style>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+v-model | 是否展示	 | Boolean | - | false
+full-screen | 是否全屏 | Boolean | - | false
+has-mask | 是否有蒙层 | Boolean | - | true
+mask-closable | 是否可以通过点击蒙层关闭 | Boolean | - | false
+transition | 弹出层过渡动画 | String | zui-fade, zui-punch | zui-punch
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+show | 弹出层展示事件 | -
+hide | 弹出层隐藏事件 | -
\ No newline at end of file
diff --git a/packages/landscape/index.scss b/packages/landscape/index.scss
new file mode 100644
index 0000000..81ecebd
--- /dev/null
+++ b/packages/landscape/index.scss
@@ -0,0 +1,59 @@
+.zui-landscape {
+  &.is-full {
+    .zui-popup-box {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+    .zui-landscape-body {
+      width: 100%;
+      height: 100%;
+      background: #FFF;
+    }
+    .zui-landscape-content {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    .zui-icon.zui-landscape-close {
+      position: absolute;
+      right: 2rem;
+      top: 1rem;
+      margin: auto;
+    }
+  }
+  .zui-popup, .zui-popup-box {
+    z-index: 1600;
+  }
+  .zui-icon.zui-landscape-close {
+    position: relative;
+    display: block;
+    margin: 2rem auto 1rem auto;
+    font-size: 2rem;
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    text-align: center;
+    color: #FFF;
+    &.dark {
+      color: #111A34;
+      opacity: 0.5;
+    }
+  }
+  .zui-landscape-content {
+    width: 70%;
+    margin: auto;
+    // width: 270px;
+    font-size: 1rem;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    box-sizing: border-box;
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/landscape/index.vue b/packages/landscape/index.vue
new file mode 100644
index 0000000..38440bd
--- /dev/null
+++ b/packages/landscape/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="zui-landscape" :class="{ 'is-full': fullScreen }">
+    <zui-popup
+      v-model="isLandscapeShow"
+      :mask-closable="maskClosable"
+      prevent-scroll
+      prevent-scroll-exclude=".zui-landscape-content"
+      :has-mask="!fullScreen && hasMask"
+      :transition="transition"
+      @input="$emit('input', false)"
+      @show="$emit('show')"
+      @hide="$emit('hide')"
+    >
+      <div class="zui-landscape-body" :class="{ scroll }" @click="$_click">
+        <div class="zui-landscape-content">
+          <slot></slot>
+        </div>
+        <zui-icon class="zui-landscape-close" :class="{ dark: !hasMask || fullScreen }" @click="$_close" :name="fullScreen ? 'close' : 'close'" />
+      </div>
+    </zui-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Landscape',
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    scroll: {
+      type: Boolean,
+      default: false,
+    },
+    fullScreen: {
+      type: Boolean,
+      default: false,
+    },
+    hasMask: {
+      type: Boolean,
+      default: true,
+    },
+    maskClosable: {
+      type: Boolean,
+      default: false,
+    },
+    transition: {
+      type: String,
+      default() {
+        return this.fullScreen ? 'zui-fade' : 'zui-punch';
+      },
+    },
+  },
+  data() {
+    return {
+      isLandscapeShow: this.value,
+    };
+  },
+  watch: {
+    value(val) {
+      this.isLandscapeShow = val;
+    },
+  },
+  methods: {
+    // MARK: private methods
+    $_close() {
+      this.isLandscapeShow = false;
+    },
+    $_click() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
--
libgit2 0.21.0