浏览代码

fix: input适配

guoxiaoxiao8 4 年之前
父节点
当前提交
703b2815be

+ 2 - 0
src/sites/mobile-taro/vue/.gitignore

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

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

@@ -1,10 +1,10 @@
 export default {
   pages: [
-    // 'pages/inputnumber/demo',
-    // 'pages/calendaritem/index.taro'
+    'pages/input/demo',
+    'pages/popup/demo',
+    'pages/inputnumber/demo',
     'pages/calendar/demo',
     'pages/textarea/demo',
-    'pages/input/demo',
     'pages/button/demo'
   ],
   window: {

+ 1 - 0
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'

+ 148 - 0
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>

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

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

+ 14 - 4
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,7 +48,8 @@ import {
   reactive,
   PropType,
   CSSProperties,
-  toRefs
+  toRefs,
+  getCurrentInstance
 } from 'vue';
 import { useLockScroll } from './../../../../../../packages/__VUE/popup/use-lock-scroll';
 import { overlayProps } from './../overlay/index.taro.vue';
@@ -115,7 +116,8 @@ export const popupProps = {
 export default create({
   children: [overlay],
   components: {
-    'nut-overlay': overlay
+    'nut-overlay': overlay,
+    'nut-icon': Icon
   },
   props: {
     ...popupProps
@@ -132,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,
@@ -213,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}`);