新增弹窗宽度、位置、可全屏三个配置

Author: simsir-lin

components/dialog-wxapp/dialog.js

@@ -3,7 +3,7 @@
  * Github: https://github.com/simsir-lin
  * Email: 15986907592@163.com
  */
- 
+
 Component({
   properties: {
     visible: {
@@ -42,27 +42,65 @@ Component({
     closeOnClickModal: {
       type: Boolean,
       value: true
+    },
+    fullscreen: {
+      type: Boolean,
+      value: false
+    },
+    width: {
+      type: Number,
+      value: 85
+    },
+    position: {
+      type: String,
+      value: 'center',
+      observer: function (newVal) {
+        this.setData({
+          _posttion: this.checkPosition(newVal) ? newVal : 'center'
+        })
+      }
     }
   },
   data: {
+    positions: ['center', 'top', 'bottom'],
+    _posttion: 'center'
   },
   attached: function () {
+    this.setData({
+      _posttion: this.checkPosition(this.data.position) ? this.data.position : 'center'
+    })
+    if (!this.dataset.model) {
+      console.warn("dialog-wxapp: dataset 'model' undefined")
+    }
   },
   moved: function () {
   },
   detached: function () {
   },
 
   methods: {
+    checkPosition: function (val) {
+      return this.data.positions.indexOf(val) >= 0;
+    },
     touchstart: function () {
       if (this.data.closeOnClickModal) {
-        this.triggerEvent('close');
+        this.close();
+      }
+    },
+    closedialog: function () {
+      if (this.dataset.model) {
+        let currentPage = getCurrentPages().pop();
+        let data = {};
+        data[this.dataset.model] = false;
+        currentPage.setData(data);
       }
     },
     close: function () {
+      this.closedialog();
       this.triggerEvent('close');
     },
     confirm: function () {
+      this.closedialog();
       this.triggerEvent('confirm');
     }
   }

components/dialog-wxapp/dialog.wxml

@@ -6,8 +6,8 @@
 
 <view class="dialog-wxapp" wx:if="{{visible}}">
   <view class='dialog-wxapp-mask' style="background: rgba(0, 0, 0, {{opacity}});" catchtouchstart="touchstart"></view>
-  <view class="dialog-wxapp-main">
-    <view class="dialog-wxapp-container {{animation ? 'dialog-wxapp-animation':''}}">
+  <view class="dialog-wxapp-main" style="height:{{fullscreen ? '100%':'auto'}};{{position == 'center' ? 'top: 50%; transform: translateY(-50%);' : position == 'top' ? 'top:0;' : 'bottom:0;'}}">
+    <view class="dialog-wxapp-container {{animation ? 'dialog-wxapp-animation':''}}" style="width: {{fullscreen ? '100' : width}}%; height:{{fullscreen ? '100%':'auto'}};">
       <view class='dialog-wxapp-container__title' wx:if="{{title.length>0}}">
         <view>{{ title }}</view>
         <view>

components/dialog-wxapp/dialog.wxss

@@ -40,15 +40,12 @@ view, input, text {
 }
 
 .dialog-wxapp-main {
-  position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
+  position: fixed;  
   z-index: 10001;
   width: 100vw;
 }
 
-.dialog-wxapp-container {
-  width: 85vw;
+.dialog-wxapp-container {  
   margin: 0 auto;
   background: #fff;
   z-index: 10001;

pages/index/index.js

@@ -4,16 +4,41 @@ Page({
     options: {
       showclose: true,
       showfooter: true,
-      closeonclickmodal: true
+      closeonclickmodal: true,
+      fullscreen: false
     },
     title: 'dialog title',
-    opacity: '0.4'
+    opacity: '0.4',
+    width: '85',
+    position: 'center',
+    positions: [{
+      title: '居中',
+      value: 'center'
+    }, {
+      title: '顶部',
+      value: 'top'
+    }, {
+      title: '底部',
+      value: 'bottom'
+    }],
+    positionIndex: 0
+  },
+  handlePickerChange: function (e) {
+    this.setData({
+      position: this.data.positions[e.detail.value].value,
+      positionIndex: e.detail.value
+    })
   },
   handleSliderChange: function (e) {
     this.setData({
       opacity: e.detail.value
     })
   },
+  handleWidthInput: function (e) {
+    this.setData({
+      width: e.detail.value
+    })
+  },
   handleInput: function (e) {
     this.setData({
       title: e.detail.value
@@ -27,12 +52,13 @@ Page({
   },
   showDialog: function () {
     this.setData({
-      dialogvisible: !this.data.dialogvisible
+      dialogvisible: true
     })
   },
   handleClose: function () {
-    this.setData({
-      dialogvisible: false
+    wx.showToast({
+      title: 'close dialog',
+      icon: 'none'
     })
   },
   handleOpen: function () {
@@ -42,8 +68,9 @@ Page({
     })
   },
   handleConfirm: function () {
-    this.setData({
-      dialogvisible: false
+    wx.showToast({
+      title: 'confirm',
+      icon: 'none'
     })
   },
   onLoad: function (options) {

pages/index/index.wxml

@@ -1,11 +1,20 @@
 <view class="container">
-  <dialog visible="{{dialogvisible}}" title="{{title}}" opacity="{{opacity}}" show-close="{{options.showclose}}" show-footer="{{options.showfooter}}" close-on-click-modal="{{options.closeonclickmodal}}" bindclose="handleClose" bindopen="handleOpen" bindconfirm="handleConfirm">
+  <dialog data-model="dialogvisible" visible="{{dialogvisible}}" position="{{position}}" title="{{title}}" fullscreen="{{options.fullscreen}}" opacity="{{opacity}}" show-close="{{options.showclose}}" show-footer="{{options.showfooter}}" width="{{width}}"
+    close-on-click-modal="{{options.closeonclickmodal}}" bindclose="handleClose" bindopen="handleOpen" bindconfirm="handleConfirm">
     <view style='height:20vh;'>
       这是插入的内容
     </view>
   </dialog>
-  <view class='title'>
-    <input value='{{title}}' bindinput='handleInput' placeholder='弹窗标题'></input>
+  <view class='inputs'>
+    <view>
+      <text>弹窗标题：</text>
+      <input value='{{title}}' bindinput='handleInput' placeholder='弹窗标题'></input>
+    </view>
+    <view>
+      <text>弹窗宽度：</text>
+      <input value='{{width}}' type='number' style='width:100rpx' bindinput='handleWidthInput' placeholder='弹窗宽度'></input>
+      <text>%</text>
+    </view>
   </view>
   <view class='form'>
     <view class='form-group'>
@@ -20,16 +29,33 @@
         <switch checked="{{options.showfooter}}" bindchange='handleChange' data-model="showfooter" />
       </view>
     </view>
+    <view class='form-group'>
+      <view>是否全屏</view>
+      <view>
+        <switch checked="{{options.fullscreen}}" bindchange='handleChange' data-model="fullscreen" />
+      </view>
+    </view>
     <view class='form-group'>
       <view>是否可以点击modal关闭Dialog</view>
       <view>
         <switch checked="{{options.closeonclickmodal}}" bindchange='handleChange' data-model="closeonclickmodal" />
       </view>
     </view>
+    <view class='form-group'>
+      <view>弹窗位置</view>
+      <view>
+        <picker bindchange="handlePickerChange" value="{{positionIndex}}" range="{{positions}}" range-key="title">
+          <view>
+            {{ positions[positionIndex].title }}
+            <text style='margin-left: 10rpx;'>></text>
+          </view>
+        </picker>
+      </view>
+    </view>
     <view>
       <view>遮罩层透明度</view>
       <view style='padding:30rpx 0;'>
-        <slider bindchange="handleSliderChange" value="{{opacity}}" min="0.1" step="0.1" max="1"/>
+        <slider bindchange="handleSliderChange" value="{{opacity}}" min="0.1" step="0.1" max="1" />
       </view>
     </view>
     <button bindtap='showDialog'>打开弹窗(Open Dialog)</button>

pages/index/index.wxss

@@ -17,13 +17,22 @@
   font-size: 32rpx;
 }
 
-.title {
+.inputs {
   height: 60vw;
   background: #eee;
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 }
-.title input {
+
+.inputs input {
   border-bottom: 1px solid #ccc;
-}
+}
+
+.inputs>view {
+  width: 70vw;
+  display: flex;
+  align-items: center;
+  margin: 10rpx 0;
+}