feat(fullscreen): add beforeChange props (#61)

example/src/demo/pc/fullscreen/before-change.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="tiny-fullscreen-demo">
+    <label class="checkbox"> <input v-model="pageOnly" type="checkbox" name="button" /> pageOnly </label>
+    <label class="checkbox"> <input v-model="teleport" type="checkbox" name="button" /> teleport </label>
+    <tiny-fullscreen
+      :teleport="teleport"
+      :page-only="pageOnly"
+      :z-index="999"
+      :fullscreen="fullscreen"
+      :before-change="beforeChange"
+      @update:fullscreen="fullscreen = $event"
+    >
+      <div
+        class="tiny-fullscreen-wrapper"
+        style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #333"
+      >
+        <button type="button" @click="toggle">
+          {{ fullscreen ? 'Exit Fullscreen' : 'Request Fullscreen' }}
+        </button>
+        <img src="static/images/8.jpg" />
+      </div>
+    </tiny-fullscreen>
+  </div>
+</template>
+
+<script>
+import { Fullscreen, Modal } from '@opentiny/vue'
+
+export default {
+  name: 'ComponentExample',
+  components: {
+    TinyFullscreen: Fullscreen
+  },
+  data() {
+    return {
+      fullscreen: false,
+      teleport: true,
+      pageOnly: false
+    }
+  },
+  methods: {
+    toggle() {
+      this.fullscreen = !this.fullscreen
+    },
+    beforeChange(done) {
+      Modal.message('全屏切换功能已被拦截，必须调用 done 方法才能执行全屏状态的切换，2s后将自动调用 done 方法切换全屏状态')
+      setTimeout(done, 2000)
+    }
+  }
+}
+</script>

example/src/docs/zh-CN/fullscreen/before-change.md

@@ -0,0 +1,18 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-tips-messagebox"/>
+</p>
+
+## Fullscreen 全屏显示
+
+<nova-uxlink widget-name="Fullscreen"></nova-uxlink>
+
+</div>
+
+### 全屏/退出全屏前的回调
+
+<nova-demo-view link="fullscreen/before-change"></nova-demo-view>
+
+<br>
+
+<nova-attributes link="fullscreen"></nova-attributes>

example/src/nav.config.comp.json

@@ -4342,7 +4342,12 @@
         {
           "path": "/fullscreen",
           "name": "Fullscreen 全屏显示",
-          "children": []
+          "children": [
+            {
+              "path": "/fullscreen/before-change",
+              "name": "全屏/退出全屏前的回调"
+            }
+          ]
         }
       ]
     }

example/src/route.config.comp2.js

@@ -404,6 +404,11 @@ export default [
     meta: { title: '全屏显示-Fullscreen 全屏显示', lang: 'zh-CN', sign: 'component' },
     component: () => import(/* webpackChunkName: 'v3-fullscreen' */ './docs/zh-CN/fullscreen/basic-usage.md')
   },
+  {
+    path: 'fullscreen/before-change',
+    meta: { title: '全屏显示-Fullscreen 全屏显示-全屏/退出全屏前的回调', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-fullscreen' */ './docs/zh-CN/fullscreen/before-change.md')
+  },
   {
     path: 'user',
     meta: {

packages/fullscreen/src/index.vue

@@ -53,7 +53,8 @@ export default {
     zIndex: {
       type: Number,
       default: 0
-    }
+    },
+    beforeChange: Function
   },
   setup(props, context) {
     return setup({ props, context, renderless, api, mono: true })