upd: taro popup

src/sites/mobile-taro/vue/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+/dist

src/sites/mobile-taro/vue/dist/app.json

@@ -1 +1 @@
-{"pages":["pages/button/demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
+{"pages":["pages/popup/demo","pages/inputnumber/demo","pages/button/demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}

src/sites/mobile-taro/vue/dist/app.wxss

@@ -976,3 +976,5 @@ to {
 .nut-button--square {
   border-radius: 0;
 }
+
+@import "./common.wxss";

src/sites/mobile-taro/vue/dist/pages/button/demo.js

@@ -128,6 +128,7 @@
           componentName = _createComponent.componentName,
           create = _createComponent.create;
 
+        console.log(wx);
         /* harmony default export */ __webpack_exports__['a'] = create({
           props: {
             color: String,
@@ -555,11 +556,11 @@
 
         function render(_ctx, _cache, $props, $setup, $data, $options) {
           var _component_nut_button = Object(
-            vue__WEBPACK_IMPORTED_MODULE_0__[/* resolveComponent */ 's']
+            vue__WEBPACK_IMPORTED_MODULE_0__[/* resolveComponent */ 'w']
           )('nut-button');
 
           return (
-            Object(vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'q'])(),
+            Object(vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'u'])(),
             Object(vue__WEBPACK_IMPORTED_MODULE_0__[/* createBlock */ 'e'])(
               'view',
               _hoisted_1,
@@ -579,7 +580,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_4];
                         }),
@@ -599,7 +600,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_5];
                         }),
@@ -616,7 +617,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_6];
                         }),
@@ -639,7 +640,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_8];
                         }),
@@ -656,7 +657,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_9];
                         }),
@@ -673,7 +674,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_10];
                         }),
@@ -698,7 +699,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_13];
                         }),
@@ -716,7 +717,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_14];
                         }),
@@ -741,7 +742,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_17];
                         }),
@@ -760,7 +761,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_18];
                         }),
@@ -779,7 +780,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_19];
                         }),
@@ -804,7 +805,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_22];
                         }),
@@ -821,7 +822,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_23];
                         }),
@@ -852,7 +853,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_26];
                         }),
@@ -871,7 +872,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_27];
                         }),
@@ -908,7 +909,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_30];
                         }),
@@ -936,7 +937,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_33];
                         }),
@@ -953,7 +954,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_34];
                         }),
@@ -971,7 +972,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_35];
                         }),
@@ -996,7 +997,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_38];
                         }),
@@ -1020,7 +1021,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_41];
                         }),
@@ -1038,7 +1039,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_42];
                         }),
@@ -1055,7 +1056,7 @@
                       },
                       {
                         default: Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'y']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* withCtx */ 'D']
                         )(function() {
                           return [_hoisted_43];
                         }),
@@ -1097,11 +1098,11 @@
         };
         function render(_ctx, _cache, $props, $setup, $data, $options) {
           var _component_nut_icon = Object(
-            vue__WEBPACK_IMPORTED_MODULE_0__[/* resolveComponent */ 's']
+            vue__WEBPACK_IMPORTED_MODULE_0__[/* resolveComponent */ 'w']
           )('nut-icon');
 
           return (
-            Object(vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'q'])(),
+            Object(vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'u'])(),
             Object(vue__WEBPACK_IMPORTED_MODULE_0__[/* createBlock */ 'e'])(
               'view',
               {
@@ -1123,7 +1124,7 @@
                   [
                     _ctx.loading
                       ? (Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'q']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'u']
                         )(),
                         Object(
                           vue__WEBPACK_IMPORTED_MODULE_0__[
@@ -1140,7 +1141,7 @@
                         )('v-if', true),
                     _ctx.icon && !_ctx.loading
                       ? (Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'q']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'u']
                         )(),
                         Object(
                           vue__WEBPACK_IMPORTED_MODULE_0__[
@@ -1165,7 +1166,7 @@
                         )('v-if', true),
                     _ctx.$slots.default
                       ? (Object(
-                          vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'q']
+                          vue__WEBPACK_IMPORTED_MODULE_0__[/* openBlock */ 'u']
                         )(),
                         Object(
                           vue__WEBPACK_IMPORTED_MODULE_0__[
@@ -1182,7 +1183,7 @@
                           [
                             Object(
                               vue__WEBPACK_IMPORTED_MODULE_0__[
-                                /* renderSlot */ 'r'
+                                /* renderSlot */ 'v'
                               ]
                             )(_ctx.$slots, 'default')
                           ],

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,8 +1,5 @@
 export default {
-  pages: [
-    // 'pages/inputnumber/demo',
-    'pages/button/demo'
-  ],
+  pages: ['pages/popup/demo', 'pages/inputnumber/demo', 'pages/button/demo'],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',

src/sites/mobile-taro/vue/src/pages/button/index.taro.vue

@@ -14,6 +14,7 @@
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from './../../../../../../packages/utils/create';
 const { componentName, create } = createComponent('button');
+console.log(wx);
 
 export type ButtonType =
   | 'default'

src/sites/mobile-taro/vue/src/pages/overlay/index.taro.vue

@@ -13,7 +13,7 @@
 </template>
 <script lang="ts">
 import { CSSProperties, PropType, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from './../../../../../../packages/utils/create';
 const { componentName, create } = createComponent('overlay');
 const overlayProps = {
   visible: {
@@ -83,5 +83,5 @@ export default create({
 });
 </script>
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/overlay/index.scss';
 </style>

src/sites/mobile-taro/vue/src/pages/popup/demo.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell
+      title="展示弹出层"
+      is-link
+      @click="state.showBasic = true"
+    ></nut-cell>
+    <nut-popup
+      pop-class="popclass"
+      :style="{ padding: '30px 50px' }"
+      v-model:visible="state.showBasic"
+      :z-index="100"
+      >正文</nut-popup
+    >
+    <h2>弹出位置</h2>
+    <nut-cell title="顶部弹出" is-link @click="state.showTop = true"></nut-cell>
+    <nut-popup
+      position="top"
+      :style="{ height: '20%' }"
+      v-model:visible="state.showTop"
+    ></nut-popup>
+    <nut-cell
+      title="底部弹出"
+      is-link
+      @click="state.showBottom = true"
+    ></nut-cell>
+    <nut-popup
+      position="bottom"
+      :style="{ height: '20%' }"
+      v-model:visible="state.showBottom"
+    ></nut-popup>
+    <nut-cell
+      title="左侧弹出"
+      is-link
+      @click="state.showLeft = true"
+    ></nut-cell>
+    <nut-popup
+      position="left"
+      :style="{ width: '20%', height: '100%' }"
+      v-model:visible="state.showLeft"
+    ></nut-popup>
+    <nut-cell
+      title="右侧弹出"
+      is-link
+      @click="state.showRight = true"
+    ></nut-cell>
+    <nut-popup
+      position="right"
+      :style="{ width: '20%', height: '100%' }"
+      v-model:visible="state.showRight"
+    ></nut-popup>
+    <h2>关闭图标</h2>
+    <nut-cell
+      title="关闭图标"
+      is-link
+      @click="state.showIcon = true"
+    ></nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable
+      :style="{ height: '20%' }"
+      v-model:visible="state.showIcon"
+    ></nut-popup>
+    <nut-cell
+      title="图标位置"
+      is-link
+      @click="state.showIconPosition = true"
+    ></nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable
+      close-icon-position="top-left"
+      :style="{ height: '20%' }"
+      v-model:visible="state.showIconPosition"
+    ></nut-popup>
+    <nut-cell
+      title="自定义图标"
+      is-link
+      @click="state.showCloseIcon = true"
+    ></nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable
+      close-icon-position="top-left"
+      close-icon="heart"
+      :style="{ height: '20%' }"
+      v-model:visible="state.showCloseIcon"
+    ></nut-popup>
+    <h2>圆角弹框</h2>
+    <nut-cell
+      title="圆角弹框"
+      is-link
+      @click="state.showRound = true"
+    ></nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable
+      round
+      :style="{ height: '30%' }"
+      v-model:visible="state.showRound"
+    ></nut-popup>
+    <h2>指定挂载节点</h2>
+    <nut-cell
+      title="指定挂载节点"
+      is-link
+      @click="state.showTeleport = true"
+    ></nut-cell>
+    <nut-popup
+      :style="{ padding: '30px 50px' }"
+      teleport="#app"
+      v-model:visible="state.showTeleport"
+      >app</nut-popup
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Popup from './index.taro.vue';
+import Cell from './../cell/index.taro.vue';
+const { createDemo } = createComponent('popup');
+export default createDemo({
+  props: {},
+  components: {
+    'nut-cell': Cell,
+    'nut-popup': Popup
+  },
+  setup() {
+    const state = reactive({
+      showBasic: false,
+      showTop: false,
+      showBottom: false,
+      showLeft: false,
+      showRight: false,
+      showIcon: false,
+      showIconPosition: false,
+      showCloseIcon: false,
+      showRound: false,
+      showCombination: false
+    });
+    return { state };
+  }
+});
+</script>
+
+<style lang="scss"></style>

src/sites/mobile-taro/vue/src/pages/popup/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Popup'
+};

src/sites/mobile-taro/vue/src/pages/popup/index.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport :to="teleport">
+  <view>
     <nut-overlay
       v-if="overlay"
       :visible="visible"
@@ -34,7 +34,7 @@
         </nut-icon>
       </view>
     </Transition>
-  </Teleport>
+  </view>
 </template>
 <script lang="ts">
 import {
@@ -48,12 +48,14 @@ import {
   reactive,
   PropType,
   CSSProperties,
-  toRefs
+  toRefs,
+  getCurrentInstance
 } from 'vue';
-import { useLockScroll } from './use-lock-scroll';
-import { overlayProps } from './../overlay/index.vue';
-import overlay from '@/packages/__VUE/overlay/index.vue';
-import { createComponent } from '@/packages/utils/create';
+import { useLockScroll } from './../../../../../../packages/__VUE/popup/use-lock-scroll';
+import { overlayProps } from './../overlay/index.taro.vue';
+import overlay from './../overlay/index.taro.vue';
+import Icon from './../icon/index.taro.vue';
+import { createComponent } from './../../../../../../packages/utils/create';
 const { componentName, create } = createComponent('popup');
 
 let _zIndex = 2000;
@@ -114,7 +116,8 @@ export const popupProps = {
 export default create({
   children: [overlay],
   components: {
-    'nut-overlay': overlay
+    'nut-overlay': overlay,
+    'nut-icon': Icon
   },
   props: {
     ...popupProps
@@ -131,6 +134,7 @@ export default create({
   ],
 
   setup(props, { emit }) {
+    const { proxy } = getCurrentInstance() as any;
     const state = reactive({
       zIndex: props.zIndex ? (props.zIndex as number) : _zIndex,
       showSlot: true,
@@ -212,6 +216,13 @@ export default create({
     };
 
     onMounted(() => {
+      // document.getElementById('app').appendChild(proxy.$el);
+      const query = wx.createSelectorQuery();
+      console.log(query.in(proxy));
+      query.selectViewport().scrollOffset();
+      query.exec(res => {
+        // console.log(res[0].scrollTop)
+      });
       props.transition
         ? (state.transitionName = props.transition)
         : (state.transitionName = `popup-slide-${props.position}`);
@@ -278,5 +289,5 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/popup/index.scss';
 </style>