feat(landscape): add 'mask-closable' for landscape.[#36]

CHANGELOG.md

@@ -3,6 +3,10 @@ title: 更新日志
 ---
 
 <!-- CUTOFF -->
+### 1.0.7
+`2018-04-24`
+- 为Landscape组件增加`mask-closable`选项
+
 ### 1.0.6
 `2018-04-20`
 - 修复issue#29

components/landscape/README.md

@@ -24,6 +24,7 @@ Vue.component(Landscape.name, Landscape)
 |v-model|是否展示|Boolean|`false`|
 |has-mask|是否有蒙层|Boolean|`true`|
 |scroll|内容区域是否可以滚动|Boolean|`false`|
+|mask-closable|是否可以通过点击蒙层关闭|Boolean|`false`|
 
 #### Landscape Events
 

components/landscape/demo/cases/demo0.vue

@@ -1,27 +1,32 @@
 <template>
   <div class="md-example-child md-example-child-landscape">
     <md-button @click.native="showPic=true">图片广告</md-button>
-      <md-landscape v-model="showPic">
+    <md-landscape v-model="showPic">
-        <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
-      </md-landscape>
+    </md-landscape>
 
-      <md-button @click.native="showNoMask=true">无蒙层</md-button>
+    <md-button @click.native="showMaskClosable=true">点击蒙层关闭</md-button>
-      <md-landscape v-model="showNoMask" :has-mask="false">
+    <md-landscape v-model="showMaskClosable" :mask-closable="true">
-        <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
-      </md-landscape>
+    </md-landscape>
 
-      <md-button @click.native="showScroll=true">滚动区域</md-button>
+    <md-button @click.native="showNoMask=true">无蒙层</md-button>
-      <md-landscape v-model="showScroll" :scroll="true">
+    <md-landscape v-model="showNoMask" :has-mask="false">
-        <div class="scroll-area">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
-          <h1>滚动区域</h1>
+    </md-landscape>
-          <p v-for="i in 20" :key="i">第{{i}}行</p>
-        </div>
-      </md-landscape>
 
-      <md-button @click.native="showListen=true">监听事件</md-button>
+    <md-button @click.native="showScroll=true">滚动区域</md-button>
-      <md-landscape v-model="showListen" @show="alert('已弹出')" @hide="alert('已隐藏')">
+    <md-landscape v-model="showScroll" :scroll="true">
-        <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+      <div class="scroll-area">
-      </md-landscape>
+        <h1>滚动区域</h1>
+        <p v-for="i in 20" :key="i">第{{i}}行</p>
+      </div>
+    </md-landscape>
+
+    <md-button @click.native="showListen=true">监听事件</md-button>
+    <md-landscape v-model="showListen" @show="alert('已弹出')" @hide="alert('已隐藏')">
+      <img src="//manhattan.didistatic.com/static/manhattan/do1_6VL7HL8TYaUMsIfygfpz">
+    </md-landscape>
   </div>
 </template>
 
@@ -41,6 +46,7 @@ export default {
       showNoMask: false,
       showScroll: false,
       showListen: false,
+      showMaskClosable: false,
     }
   },
   methods: {

components/landscape/index.vue

@@ -2,7 +2,7 @@
   <div class="md-landscape">
 		<md-popup
       v-model="isLandscapeShow"
-      :mask-closable="false"
+      :mask-closable="maskClosable"
       prevent-scroll
       :prevent-scroll-exclude="scroll ? '.content' : null"
       :has-mask="hasMask"
@@ -46,6 +46,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    maskClosable: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -73,7 +77,7 @@ export default {
 .md-landscape
   .content
     position relative
-    width 540px
+    min-width 540px
     min-height 500px
     font-size 28px
     text-align center

docs/examples/css/index.1a1fb26.css

@@ -0,0 +1 @@
+.md-home{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff}.md-home .md-home-logo{position:absolute;top:30%;left:50%;transform:translateX(-50%)}.md-home .md-home-name{position:absolute;width:100%;top:45%;left:0;font-size:.36rem;font-weight:300;color:#666;text-align:center}.md-home .md-home-name span.word5 .char1,.md-home .md-home-name span.word5 .char2,.md-home .md-home-name span.word5 .char3,.md-home .md-home-name span.word6 .char1,.md-home .md-home-name span.word7 .char1{color:#333}.md-home .md-home-time{position:absolute;top:50%;color:#666}.md-home .md-home-copyright,.md-home .md-home-time{width:100%;left:0;font-size:.2rem;text-align:center}.md-home .md-home-copyright{position:fixed;bottom:.2rem;font-weight:300;color:#999}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}li,ol{list-style:none}.mand{position:relative;min-height:100%;max-width:7.5rem;font-size-adjust:none;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling:touch;font-family:-apple-system,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,STHeiti,Microsoft YaHei,Microsoft JhengHei,Source Han Sans SC,Noto Sans CJK SC,Source Han Sans CN,Noto Sans SC,Source Han Sans TC,Noto Sans CJK TC,WenQuanYi Micro Hei,SimSun,sans-serif!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f3f4f5}.mand .md-nav{position:relative;display:-ms-flexbox;display:box;display:flex;padding:.32rem .2rem}.mand .md-nav p{position:relative;display:inline-block;line-height:1}.mand .md-nav p.home{top:.05rem;width:.36rem;height:.32rem}.mand .md-nav p.home i{position:absolute;left:0;width:100%;height:.04rem;background:rgba(0,0,0,.4);border-radius:.02rem}.mand .md-nav p.home i:first-of-type{top:0}.mand .md-nav p.home i:nth-of-type(2){top:50%;width:70%;margin-top:-.02rem}.mand .md-nav p.home i:nth-of-type(3){bottom:0}.mand .md-nav p.name{margin-left:.32rem;font-size:.42rem;font-weight:500;color:#333}.mand .md-nav p.name-zh{top:.09rem;margin-left:.12rem;font-size:.3rem;font-weight:400;color:#666}.mand .md-example-wrapper{position:relative;z-index:3;padding:.2rem}.mand .md-example-wrapper:after{content:"";display:table;clear:both}.mand .md-example-wrapper .md-example .md-example-section{margin-bottom:.3rem;color:#333}.mand .md-example-wrapper .md-example .md-example-section:after{content:"";display:table;clear:both}.mand .md-example-wrapper .md-example .md-example-section .md-example-title{float:left;width:100%;font-size:.28rem;font-weight:500}.mand .md-example-wrapper .md-example .md-example-section .md-example-title a{margin-right:.05rem;background:#3ca0e6;color:#fff;padding:.05rem .1rem;border-radius:.04rem;font-size:.24rem;font-weight:300;line-height:.28rem;text-decoration:none}.mand .md-example-wrapper .md-example .md-example-section .md-example-describe{float:left;width:100%;margin-top:.15rem;font-size:.24rem;font-weight:300;color:#666}.mand .md-example-wrapper .md-example .md-example-section .md-example-content{float:left;width:100%;position:relative;margin-top:.2rem;box-sizing:border-box}.md-dialog pre{width:100%;padding:.2rem .1rem;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;font-size:.2rem;background:#f3f4f5;border-radius:.04rem}@media screen and (min-width:749px){.mand{margin-left:-3.6rem;left:50%}}

docs/examples/index.html

@@ -13,7 +13,8 @@
     *{margin:0;padding:0;list-style:0;-webkit-touch-callout:none;}
     html{touch-action: manipulation;background:#f3f4f5;}
     </style>
-  <link rel="stylesheet" href="/mand-mobile/examples/mand-mobile-example.css">
+  <link rel="stylesheet" href="/mand-mobile/examples/index.1a1fb26.css">
+<link rel="stylesheet" href="/mand-mobile/examples/mand-mobile-example.css">
 </head>
   <body>
     <div id="app"></div>
@@ -24,5 +25,43 @@
     <!-- built files will be auto injected -->
   
 
+<script type="text/javascript" src="/mand-mobile/examples/action-bar.815f130.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/action-sheet.b81a333.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/agree.fed20bd.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/button.d43b851.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/captcha.a478c52.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/cashier.c9ae9cf.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/category.358951e.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/chart.f0fcbe9.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/codebox.35a343a.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/date-picker.fed1327.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/dialog.c373813.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/drop-menu.39b915e.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/field.40a5cf5.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/icon.bfbad77.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/image-reader.5960d1f.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/image-viewer.a60cb6c.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/index.7022f73.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/input-item.cbf8e6a.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/landscape.298c598.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/manifest.d38081f.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/notice-bar.c48aaad.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/number-keyboard.9dcb3fa.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/picker.76355b2.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/popup.019abe0.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/radio.3e99159.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/result-page.5d929ec.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/selector.ab6c832.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/stepper.ba39894.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/steps.c23befe.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/swiper.4a4caf1.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/switch.db361ac.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/tab-bar.765bdbe.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/tab-picker.c851463.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/tabs.9546212.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/tag.e06a569.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/tip.67996f8.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/toast.3ac6250.js"></script>
+<script type="text/javascript" src="/mand-mobile/examples/vendor.95f3acf.js"></script>
 <script type="text/javascript" src="/mand-mobile/examples/mand-mobile-example.js"></script>
 </body></html>

docs/examples/js/manifest.d38081f.js

@@ -0,0 +1 @@
+!function(e){function t(r){if(a[r])return a[r].exports;var n=a[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var r=window.webpackJsonp;window.webpackJsonp=function(a,o,c){for(var i,u,f,s=0,p=[];s<a.length;s++)u=a[s],n[u]&&p.push(n[u][0]),n[u]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(r&&r(a,o,c);p.length;)p.shift()();if(c)for(s=0;s<c.length;s++)f=t(t.s=c[s]);return f};var a={},n={37:0};t.e=function(e){function r(){i.onerror=i.onload=null,clearTimeout(u);var t=n[e];0!==t&&(t&&t[1](new Error("Loading chunk "+e+" failed.")),n[e]=void 0)}var a=n[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var o=new Promise(function(t,r){a=n[e]=[t,r]});a[2]=o;var c=document.getElementsByTagName("head")[0],i=document.createElement("script");i.type="text/javascript",i.charset="utf-8",i.async=!0,i.timeout=12e4,t.nc&&i.setAttribute("nonce",t.nc),i.src=t.p+"js/"+({0:"category",1:"tabs",2:"tab-bar",3:"steps",4:"swiper",5:"result-page",6:"stepper",7:"radio",8:"toast",9:"input-item",10:"tip",11:"chart",12:"selector",13:"drop-menu",14:"button",15:"number-keyboard",16:"field",17:"tag",18:"switch",19:"codebox",20:"agree",21:"date-picker",22:"picker",23:"image-reader",24:"icon",25:"action-bar",26:"popup",27:"notice-bar",28:"dialog",29:"cashier",30:"captcha",31:"landscape",32:"image-viewer",33:"action-sheet",34:"tab-picker"}[e]||e)+"."+{0:"358951e",1:"9546212",2:"765bdbe",3:"c23befe",4:"4a4caf1",5:"5d929ec",6:"ba39894",7:"3e99159",8:"3ac6250",9:"cbf8e6a",10:"67996f8",11:"f0fcbe9",12:"ab6c832",13:"39b915e",14:"d43b851",15:"9dcb3fa",16:"40a5cf5",17:"e06a569",18:"db361ac",19:"35a343a",20:"fed20bd",21:"fed1327",22:"76355b2",23:"5960d1f",24:"bfbad77",25:"815f130",26:"019abe0",27:"c48aaad",28:"c373813",29:"c9ae9cf",30:"a478c52",31:"298c598",32:"a60cb6c",33:"b81a333",34:"c851463"}[e]+".js";var u=setTimeout(r,12e4);return i.onerror=i.onload=r,c.appendChild(i),o},t.m=e,t.c=a,t.d=function(e,r,a){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="//static.ins.xiaojukeji.com/static/manhattan/mand-mobile/",t.oe=function(e){throw console.error(e),e}}([]);

docs/index.html

@@ -30,5 +30,5 @@
     <script crossOrigin="Anonymous" src="//webapp.didistatic.com/static/webapp/shield/z/omega/omega/0.2.7/omega.min.js"></script>
     <script async defer src="//buttons.github.io/buttons.js"></script>
     <!-- built files will be auto injected -->
-  <script type="text/javascript" src="/mand-mobile/static/js/manifest.794cf738.js"></script><script type="text/javascript" src="/mand-mobile/static/js/vendor.b46908c4.js"></script><script type="text/javascript" src="/mand-mobile/static/js/app.78b46c74.js"></script></body>
+  <script type="text/javascript" src="/mand-mobile/static/js/manifest.4de8c0ab.js"></script><script type="text/javascript" src="/mand-mobile/static/js/vendor.fd4ded7f.js"></script><script type="text/javascript" src="/mand-mobile/static/js/app.d2125c6c.js"></script></body>
 </html>