feat(Calendar): add popable prop

src/calendar/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-日历组件用于选择日期或日期区间，可以与 [弹出层](#/zh-CN/popup)、[单元格](#/zh-CN/cell)、[输入框](#/zh-CN/field) 等组件配合使用
+日历组件用于选择日期或日期区间
 
 ### 引入
 
@@ -17,26 +17,19 @@ Vue.use(Calendar);
 
 ### 选择单个日期
 
-下面演示了结合单元格、弹出层来使用日历组件的用法。
+下面演示了结合单元格来使用日历组件的用法，点击单元格后唤起日历组件。
 
 ```html
-<!-- 点击单元格后唤起日历组件 -->
 <van-cell
   title="选择单个日期"
   :value="selectedDate"
   @click="showCalendar = true"
 />
 
-<!-- 使用弹出层组件作为日历的容器 -->
+<van-calendar
-<van-popup
   v-model="showCalendar"
-  round
+  @select="onSelect"
-  closeable
+/>
-  position="bottom"
-  style="height: 80vh;"
->
-  <van-calendar @select="onSelect" />
-</van-popup>
 ```
 
 ```js
@@ -87,6 +80,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
+| v-model | 是否显示日历弹窗 | *boolean* | `false` | - |
 | type | 选择类型，`single`表示选择单个日期，<br>`range`表示选择日期区间 | *string* | `single` | - |
 | title | 日历标题 | *string* | `日期选择` | - |
 | min-date | 最小日期 | *Date*  | 当前日期 | - |
@@ -95,6 +89,7 @@ export default {
 | row-height | 日期所在行的高度 | *number* | `64` | - |
 | button-text | 确认按钮的文字 | *string* | `确定` | - |
 | button-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |
+| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` | - |
 | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
 

src/calendar/demo/index.vue

@@ -8,15 +8,11 @@
         @click="toggle('selectSingleDate', true)"
       />
 
-      <van-popup
+      <van-calendar
         v-model="show.selectSingleDate"
-        round
+        :poppable="false"
-        closeable
+        @select="onSelect($event, 'selectSingleDate')"
-        position="bottom"
+      />
-        style="height: 80vh;"
-      >
-        <van-calendar @select="onSelect($event, 'selectSingleDate')" />
-      </van-popup>
 
       <van-cell
         is-link
@@ -25,18 +21,11 @@
         @click="toggle('selectDateRange', true)"
       />
 
-      <van-popup
-        v-model="show.selectDateRange"
-        round
-        closeable
-        position="bottom"
-        style="height: 80vh;"
-      >
       <van-calendar
+        v-model="show.selectDateRange"
         type="range"
         @select="onSelect($event, 'selectDateRange')"
       />
-      </van-popup>
     </demo-block>
   </demo-section>
 </template>

src/calendar/index.js

@@ -11,6 +11,7 @@ import {
   RENDER_OFFSET
 } from './utils';
 
+import Popup from '../popup';
 import Button from '../button';
 import Month from './components/Month';
 import Header from './components/Header';
@@ -18,6 +19,7 @@ import Header from './components/Header';
 export default createComponent({
   props: {
     title: String,
+    value: Boolean,
     buttonText: String,
     defaultDate: [Date, Array],
     buttonDisabledText: String,
@@ -42,6 +44,10 @@ export default createComponent({
       type: Number,
       default: ROW_HEIGHT
     },
+    poppable: {
+      type: Boolean,
+      default: true
+    },
     showMark: {
       type: Boolean,
       default: true
@@ -76,17 +82,31 @@ export default createComponent({
   },
 
   watch: {
+    value(val) {
+      if (val) {
+        this.initRect();
+      }
+    },
+
     defaultDate(val) {
       this.currentDate = val;
     }
   },
 
   mounted() {
-    this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
+    if (!this.poppable) {
-    this.onScroll();
+      this.initRect();
+    }
   },
 
   methods: {
+    initRect() {
+      this.$nextTick(() => {
+        this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
+        this.onScroll();
+      });
+    },
+
     getInitialDate() {
       const { type, defaultDate, minDate } = this;
 
@@ -155,6 +175,10 @@ export default createComponent({
       }
     },
 
+    togglePopup(val) {
+      this.$emit('input', val);
+    },
+
     onConfirmRange() {
       this.$emit('select', this.currentDate);
     },
@@ -213,10 +237,9 @@ export default createComponent({
           {this.genFooterContent()}
         </div>
       );
-    }
     },
 
-  render() {
+    genCalendar() {
       return (
         <div class={bem()}>
           <Header
@@ -233,4 +256,24 @@ export default createComponent({
         </div>
       );
     }
+  },
+
+  render() {
+    if (this.poppable) {
+      return (
+        <Popup
+          round
+          closeable
+          value={this.value}
+          position="bottom"
+          class={bem('popup')}
+          onInput={this.togglePopup}
+        >
+          {this.genCalendar()}
+        </Popup>
+      );
+    }
+
+    return this.genCalendar();
+  }
 });

src/calendar/index.less

@@ -4,6 +4,11 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  background-color: @white;
+
+  &__popup {
+    height: 80%;
+  }
 
   &__header {
     flex-shrink: 0;