action sheet component

docs/examples-dist/actionsheet.vue

@@ -0,0 +1,72 @@
+<template><section class="demo-actionsheet"><h1 class="demo-title">actionsheet</h1><example-block title="基础用法">
+                <div class="zan-row">
+  <zan-button @click="show1 = true">弹出actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show1" :actions="actions1">
+</zan-actionsheet>
+
+              </example-block><example-block title="带取消按钮的ActionSheet">
+                <div class="zan-row">
+  <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
+</zan-actionsheet>
+
+              </example-block><example-block title="带标题的ActionSheet">
+                <div class="zan-row">
+  <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
+  <p>一些内容</p>
+</zan-actionsheet>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b actionsheet {
+    .actionsheet-wx {
+      color: #06BF04;
+    }
+
+    .zan-button {
+      margin-left: 15px;
+    }
+
+    .title-actionsheet p {
+      padding: 20px;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false,
+      actions1: [
+        {
+          name: '微信安全支付',
+          className: 'actionsheet-wx'
+        },
+        {
+          name: '支付宝支付',
+          loading: true
+        },
+        {
+          name: '有赞E卡',
+          subname: '（剩余260.50元）'
+        },
+        {
+          name: '信用卡支付'
+        },
+        {
+          name: '其他支付方式'
+        }
+      ]
+    };
+  }
+}
+</script>

docs/examples-dist/popup.vue

@@ -3,7 +3,7 @@
   <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
 </div>
 <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
-  xxxx
+  <zan-button @click="handlePopupButtonClick" type="primary">从中间弹出popup</zan-button>
 </zan-popup>
 
 <div class="zan-row">
@@ -23,8 +23,8 @@
 <div class="zan-row">
   <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
 </div>
-<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
-  一些内容
+<zan-popup v-model="popupShow4" class="zan-popup-4">
+  从中间弹出popup
 </zan-popup>
 
 
@@ -33,6 +33,13 @@
 <style>
 @component-namespace demo {
   @b popup {
+    .zan-popup-1 {
+      width: 100%;
+      height: 200px;
+      box-sizing: border-box;
+      padding: 20px;
+    }
+
     .zan-popup-4 {
       width: 60%;
       height: 200px;
@@ -60,6 +67,12 @@ export default {
         }, 2000);
       }
     }
+  },
+
+  methods: {
+    handlePopupButtonClick() {
+      this.popupShow4 = true;
+    }
   }
 };
 </script>

docs/examples-docs/actionsheet.md

@@ -0,0 +1,88 @@
+<style>
+@component-namespace demo {
+  @b actionsheet {
+    .actionsheet-wx {
+      color: #06BF04;
+    }
+
+    .zan-button {
+      margin-left: 15px;
+    }
+
+    .title-actionsheet p {
+      padding: 20px;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false,
+      actions1: [
+        {
+          name: '微信安全支付',
+          className: 'actionsheet-wx'
+        },
+        {
+          name: '支付宝支付',
+          loading: true
+        },
+        {
+          name: '有赞E卡',
+          subname: '（剩余260.50元）'
+        },
+        {
+          name: '信用卡支付'
+        },
+        {
+          name: '其他支付方式'
+        }
+      ]
+    };
+  }
+}
+</script>
+
+## ActionSheet
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<div class="zan-row">
+  <zan-button @click="show1 = true">弹出actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show1" :actions="actions1">
+</zan-actionsheet>
+```
+:::
+
+### 带取消按钮的ActionSheet
+
+:::demo 带取消按钮的ActionSheet
+```html
+<div class="zan-row">
+  <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
+</zan-actionsheet>
+```
+:::
+
+### 带标题的ActionSheet
+
+:::demo 带标题的ActionSheet
+```html
+<div class="zan-row">
+  <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
+  <p>一些内容</p>
+</zan-actionsheet>
+```
+:::

docs/nav.config.json

@@ -89,6 +89,10 @@
         {
           "groupName": "JS组件",
           "list": [
+            {
+              "path": "/actionsheet",
+              "title": "ActionSheet"
+            },
             {
               "path": "/tab",
               "title": "Tab"