Merge branch 'taro-vue-test' of https://github.com/jdf2e/nutui into taro-vue-test

.gitignore

@@ -8,7 +8,9 @@ package-lock.json
 /cache
 /src/nutui.ts
 /src/packages/nutui.vue.ts
+/src/packages/nutui.taro.vue.ts
 /tsc/test
+/src/sites/mobile-taro/vue/dist
 
 
 # local env files

src/packages/__VUE/popup/index.vue

@@ -175,6 +175,7 @@ export default create({
     };
 
     const close = () => {
+      console.log(props.visible);
       if (props.visible) {
         unlockScroll();
         emit('update:visible', false);

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

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

src/sites/mobile-taro/vue/dist/common.js

@@ -0,0 +1,86 @@
+(wx['webpackJsonp'] = wx['webpackJsonp'] || []).push([
+  ['common'],
+  {
+    /***/ '../../../packages/utils/create/component.ts':
+      /*!**********************************************************************************************!*\
+  !*** /Users/yangxiaolu3/Documents/JD/workspace/nutui/src/packages/utils/create/component.ts ***!
+  \**********************************************************************************************/
+      /*! exports provided: createComponent */
+      /*! exports used: createComponent */
+      /***/ function(module, __webpack_exports__, __webpack_require__) {
+        'use strict';
+        /* harmony export (binding) */ __webpack_require__.d(
+          __webpack_exports__,
+          'a',
+          function() {
+            return createComponent;
+          }
+        );
+        /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
+          /*! vue */ '../../../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js'
+        );
+
+        function createComponent(name) {
+          var componentName = 'nut-' + name;
+          return {
+            componentName: componentName,
+            create: function(_component) {
+              _component.baseName = name;
+              _component.name = componentName;
+
+              _component.install = function(vue) {
+                var _component$children;
+
+                vue.component(_component.name, _component);
+                (_component === null || _component === void 0
+                  ? void 0
+                  : (_component$children = _component.children) === null ||
+                    _component$children === void 0
+                  ? void 0
+                  : _component$children.length) &&
+                  _component.children.forEach(function(item) {
+                    vue.component(item.name, item);
+                  });
+              };
+
+              return Object(
+                vue__WEBPACK_IMPORTED_MODULE_0__[/* defineComponent */ 'e']
+              )(_component);
+            },
+            createDemo: function(_component) {
+              _component.baseName = name;
+              _component.name = 'demo-' + name;
+              return Object(
+                vue__WEBPACK_IMPORTED_MODULE_0__[/* defineComponent */ 'e']
+              )(_component);
+            }
+          };
+        }
+
+        /***/
+      },
+
+    /***/ '../../../packages/utils/create/index.ts':
+      /*!******************************************************************************************!*\
+  !*** /Users/yangxiaolu3/Documents/JD/workspace/nutui/src/packages/utils/create/index.ts ***!
+  \******************************************************************************************/
+      /*! exports provided: createComponent */
+      /*! exports used: createComponent */
+      /***/ function(module, __webpack_exports__, __webpack_require__) {
+        'use strict';
+        /* harmony import */ var _component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
+          /*! ./component */ '../../../packages/utils/create/component.ts'
+        );
+        /* harmony reexport (safe) */ __webpack_require__.d(
+          __webpack_exports__,
+          'a',
+          function() {
+            return _component__WEBPACK_IMPORTED_MODULE_0__['a'];
+          }
+        );
+
+        /***/
+      }
+  }
+]);
+//# sourceMappingURL=common.js.map

src/sites/mobile-taro/vue/dist/pages/address/demo.json

@@ -0,0 +1 @@
+{"usingComponents":{"custom-wrapper":"../../custom-wrapper","comp":"../../comp"}}

src/sites/mobile-taro/vue/dist/pages/address/demo.wxml

@@ -0,0 +1,2 @@
+<import src="../../base.wxml"/>
+<template is="taro_tmpl" data="{{root:root}}" />

src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.json

@@ -0,0 +1 @@
+{"usingComponents":{"custom-wrapper":"../../custom-wrapper","comp":"../../comp"}}

src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.wxml

@@ -0,0 +1,2 @@
+<import src="../../base.wxml"/>
+<template is="taro_tmpl" data="{{root:root}}" />

src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.wxss

@@ -0,0 +1,315 @@
+view-block[data-v-355c0724] {
+  display: block;
+}
+@-webkit-keyframes nutFadeIn-355c0724 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes nutFadeIn-355c0724 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutFadeOut-355c0724 {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutFadeOut-355c0724 {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+.nutFade-enter-active[data-v-355c0724],
+.nutFadeIn[data-v-355c0724],
+.nutFade-leave-active[data-v-355c0724],
+.nutFadeOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutFade-enter-active[data-v-355c0724],
+.nutFadeIn[data-v-355c0724] {
+  -webkit-animation-name: nutFadeIn-355c0724;
+          animation-name: nutFadeIn-355c0724;
+}
+.nutFade-leave-active[data-v-355c0724],
+.nutFadeOut[data-v-355c0724] {
+  -webkit-animation-name: nutFadeOut-355c0724;
+          animation-name: nutFadeOut-355c0724;
+}
+@-webkit-keyframes nutZoomIn-355c0724 {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@keyframes nutZoomIn-355c0724 {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutZoomOut-355c0724 {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutZoomOut-355c0724 {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+.nutZoom-enter-active[data-v-355c0724],
+.nutZoomIn[data-v-355c0724],
+.nutZoom-leave-active[data-v-355c0724],
+.nutZoomOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutZoom-enter-active[data-v-355c0724],
+.nutZoomIn[data-v-355c0724] {
+  -webkit-animation-name: nutZoomIn-355c0724;
+          animation-name: nutZoomIn-355c0724;
+}
+.nutZoom-leave-active[data-v-355c0724],
+.nutZoomOut[data-v-355c0724] {
+  -webkit-animation-name: nutZoomOut-355c0724;
+          animation-name: nutZoomOut-355c0724;
+}
+@-webkit-keyframes nutEaseIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@keyframes nutEaseIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@-webkit-keyframes nutEaseOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+@keyframes nutEaseOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+.nutEase-enter-active[data-v-355c0724],
+.nutEaseIn[data-v-355c0724],
+.nutEase-leave-active[data-v-355c0724],
+.nutEaseOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutEase-enter-active[data-v-355c0724],
+.nutEaseIn[data-v-355c0724] {
+  -webkit-animation-name: nutEaseIn-355c0724;
+          animation-name: nutEaseIn-355c0724;
+}
+.nutEase-leave-active[data-v-355c0724],
+.nutEaseOut[data-v-355c0724] {
+  -webkit-animation-name: nutEaseOut-355c0724;
+          animation-name: nutEaseOut-355c0724;
+}
+@-webkit-keyframes nutDropIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@keyframes nutDropIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@-webkit-keyframes nutDropOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+@keyframes nutDropOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+.nutDrop-enter-active[data-v-355c0724],
+.nutDropIn[data-v-355c0724],
+.nutDrop-leave-active[data-v-355c0724],
+.nutDropOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutDrop-enter-active[data-v-355c0724],
+.nutDropIn[data-v-355c0724] {
+  -webkit-animation-name: nutDropIn-355c0724;
+          animation-name: nutDropIn-355c0724;
+}
+.nutDrop-leave-active[data-v-355c0724],
+.nutDropOut[data-v-355c0724] {
+  -webkit-animation-name: nutDropOut-355c0724;
+          animation-name: nutDropOut-355c0724;
+}
+@-webkit-keyframes rotation-355c0724 {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+@keyframes rotation-355c0724 {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+.nutRotate-enter-active[data-v-355c0724],
+.nutRotateIn[data-v-355c0724],
+.nutRotate-leave-active[data-v-355c0724],
+.nutRotateOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutRotate-enter-active[data-v-355c0724],
+.nutRotateIn[data-v-355c0724] {
+  -webkit-animation-name: nutRotateIn;
+          animation-name: nutRotateIn;
+}
+.nutRotate-leave-active[data-v-355c0724],
+.nutRotateOut[data-v-355c0724] {
+  -webkit-animation-name: nutRotateOut;
+          animation-name: nutRotateOut;
+}
+.infiniteUl[data-v-355c0724] {
+  height: 600rpx;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.infiniteLi[data-v-355c0724] {
+  margin-top: 20rpx;
+  font-size: 28rpx;
+  color: #646464;
+  text-align: center;
+}
+.loading[data-v-355c0724] {
+  display: block;
+  width: 100%;
+  text-align: center;
+}

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

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}

src/sites/mobile-taro/vue/project.private.config.json

@@ -0,0 +1,30 @@
+{
+  "setting": {},
+  "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/address/demo",
+          "pathName": "pages/address/demo",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/infiniteloading/demo",
+          "pathName": "pages/infiniteloading/demo",
+          "query": "",
+          "scene": null
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,337 @@
+<template>
+  <view class="demo">
+    <h2>选择自定义地址</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="one"
+      is-link
+      @click="showAddress"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="normal"
+      :province="province"
+      :city="city"
+      :country="country"
+      :town="town"
+      @change="cal => onChange(cal, 'normal')"
+      @close="close1"
+      custom-address-title="请选择所在地区"
+    ></nut-address>
+
+    <h2>选择已有地址</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="two"
+      is-link
+      @click="showAddressExist"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="exist"
+      type="exist"
+      :exist-address="existAddress"
+      @change="cal => onChange(cal, 'exist')"
+      @close="close2"
+      :is-show-custom-address="false"
+      @selected="selected"
+      exist-address-title="配送至"
+    ></nut-address>
+
+    <h2>自定义图标</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="three"
+      is-link
+      @click="showCustomImg"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="customImg"
+      type="exist"
+      :exist-address="existAddress"
+      @change="cal => onChange(cal, 'customImg')"
+      @close="close3"
+      :is-show-custom-address="false"
+      @selected="selected"
+      :default-icon="defaultIcon"
+      :selected-icon="selectedIcon"
+      :close-btn-icon="closeBtnIcon"
+    ></nut-address>
+
+    <h2>自定义地址与已有地址切换</h2>
+    <nut-cell
+      title="选择地址"
+      :desc="four"
+      is-link
+      @click="showAddressOther"
+    ></nut-cell>
+
+    <nut-address
+      v-model:visible="other"
+      type="exist"
+      :exist-address="existAddress"
+      :province="province"
+      :city="city"
+      :country="country"
+      :town="town"
+      :back-btn-icon="backBtnIcon"
+      @change="cal => onChange(cal, 'other')"
+      @close="close4"
+      @selected="selected"
+      custom-and-exist-title="选择其他地址"
+      @switch-module="switchModule"
+      @close-mask="closeMask"
+    ></nut-address>
+  </view>
+</template>
+
+<script lang="ts">
+import { reactive, ref, toRefs } from 'vue';
+
+import { createComponent } from './../../../../../../packages/utils/create';
+import Address from './index.taro.vue';
+import Cell from './../cell/index.taro.vue';
+const { createDemo } = createComponent('address');
+
+interface CalBack {
+  next: string;
+  value: string;
+  custom: string;
+}
+interface RegionData {
+  name: string;
+  [key: string]: any;
+}
+interface CalResult {
+  type: string;
+  data: AddressResult;
+}
+interface AddressList {
+  id?: string | number;
+  provinceName: string;
+  cityName: string;
+  countyName: string;
+  townName: string;
+  addressDetail: string;
+  selectedAddress: boolean;
+}
+interface AddressResult extends AddressList {
+  addressIdStr: string;
+  addressStr: string;
+  province: RegionData[];
+  city: RegionData[];
+  country: RegionData[];
+  town: RegionData[];
+}
+export default createDemo({
+  components: {
+    'nut-address': Address,
+    'nut-cell': Cell
+  },
+  props: {},
+  setup() {
+    const address = reactive({
+      province: [
+        { id: 1, name: '北京' },
+        { id: 2, name: '广西' },
+        { id: 3, name: '江西' },
+        { id: 4, name: '四川' }
+      ],
+      city: [
+        { id: 7, name: '朝阳区' },
+        { id: 8, name: '崇文区' },
+        { id: 9, name: '昌平区' },
+        { id: 6, name: '石景山区' }
+      ],
+      country: [
+        { id: 3, name: '八里庄街道' },
+        { id: 9, name: '北苑' },
+        { id: 4, name: '常营乡' }
+      ],
+      town: []
+    });
+
+    const showPopup = reactive({
+      normal: false,
+      exist: false,
+      customImg: false,
+      other: false
+    });
+
+    const icon = reactive({
+      selectedIcon: 'heart-fill',
+      defaultIcon: 'heart1',
+      closeBtnIcon: 'close',
+      backBtnIcon: 'left'
+    });
+
+    const existAddress = ref([
+      {
+        id: 1,
+        addressDetail: '',
+        cityName: '次渠镇',
+        countyName: '通州区',
+        provinceName: '北京市',
+        selectedAddress: true,
+        townName: ''
+      },
+      {
+        id: 2,
+        addressDetail: '',
+        cityName: '钓鱼岛全区',
+        countyName: '',
+        provinceName: '钓鱼岛',
+        selectedAddress: false,
+        townName: ''
+      },
+      {
+        id: 3,
+        addressDetail: '京东大厦',
+        cityName: '大兴区',
+        countyName: '科创十一街18号院',
+        provinceName: '北京市',
+        selectedAddress: false,
+        townName: ''
+      }
+    ]);
+
+    const text = reactive({
+      one: '请选择地址',
+      two: '请选择地址',
+      three: '请选择地址',
+      four: '请选择地址'
+    });
+
+    const showAddress = () => {
+      showPopup.normal = !showPopup.normal;
+    };
+
+    const onChange = (cal: CalBack, tag: string) => {
+      const name = (address as any)[cal.next];
+      if (name.length < 1) {
+        (showPopup as any)[tag] = false;
+      }
+    };
+    const close1 = (val: CalResult) => {
+      console.log(val);
+      text.one = val.data.addressStr;
+    };
+
+    const showAddressExist = () => {
+      showPopup.exist = true;
+    };
+
+    const close2 = (val: CalResult) => {
+      console.log(val);
+      if (val.type == 'exist') {
+        const {
+          provinceName,
+          cityName,
+          countyName,
+          townName,
+          addressDetail
+        } = val.data;
+        text.two =
+          provinceName + cityName + countyName + townName + addressDetail;
+      } else {
+        text.two = val.data.addressStr;
+      }
+    };
+    const selected = (
+      prevExistAdd: AddressList,
+      nowExistAdd: RegionData,
+      arr: AddressList[]
+    ) => {
+      console.log(prevExistAdd);
+      console.log(nowExistAdd);
+    };
+
+    const showAddressOther = () => {
+      showPopup.other = true;
+    };
+    const showCustomImg = () => {
+      showPopup.customImg = true;
+    };
+
+    const close3 = (val: CalResult) => {
+      console.log(val);
+      if (val.type == 'exist') {
+        const {
+          provinceName,
+          cityName,
+          countyName,
+          townName,
+          addressDetail
+        } = val.data;
+        text.three =
+          provinceName + cityName + countyName + townName + addressDetail;
+      } else {
+        text.three = val.data.addressStr;
+      }
+    };
+
+    const close4 = (val: CalResult) => {
+      console.log(val);
+      if (val.type == 'exist') {
+        const {
+          provinceName,
+          cityName,
+          countyName,
+          townName,
+          addressDetail
+        } = val.data;
+        text.four =
+          provinceName + cityName + countyName + townName + addressDetail;
+      } else {
+        text.four = val.data.addressStr;
+      }
+    };
+
+    const switchModule = (val: CalResult) => {
+      if (val.type == 'custom') {
+        console.log('点击了“选择其他地址”按钮');
+      } else {
+        console.log('点击了自定义地址左上角的返回按钮');
+      }
+    };
+
+    const closeMask = (val: CalResult) => {
+      console.log('关闭弹层', val);
+    };
+
+    return {
+      showAddress,
+      showPopup,
+      onChange,
+      close1,
+      showAddressExist,
+      close2,
+      selected,
+      existAddress,
+      showAddressOther,
+      showCustomImg,
+      close3,
+      close4,
+      switchModule,
+      closeMask,
+      ...toRefs(icon),
+      ...toRefs(text),
+      ...toRefs(showPopup),
+      ...toRefs(address)
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  .nut-cell {
+    align-items: center;
+
+    .nut-cell__value {
+      margin-right: 8px;
+    }
+  }
+}
+</style>

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

@@ -5,6 +5,7 @@
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
     v-model:visible="showPopup"
+    :class="classes"
   >
     <view-block class="nut-address">
       <view-block class="nut-address__header">
@@ -114,10 +115,13 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { reactive, ref, toRefs, watch, nextTick } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('address');
-import { TweenMax } from 'gsap';
+import { reactive, ref, toRefs, watch, nextTick, computed } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Icon from './../icon/index.taro.vue';
+import Popup from './../popup/index.taro.vue';
+
+const { create, componentName } = createComponent('address');
+
 interface RegionData {
   name: string;
   [key: string]: any;
@@ -207,6 +211,10 @@ export default create({
       default: 'left'
     }
   },
+  components: {
+    'nut-icon': Icon,
+    'nut-popup': Popup
+  },
   emits: [
     'update:visible',
     'type',
@@ -218,6 +226,13 @@ export default create({
   ],
 
   setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
     const regionLine = ref<null | HTMLElement>(null);
 
     const tabItemRef = reactive({
@@ -276,8 +291,8 @@ export default create({
       const name = (tabItemRef as any)[tabName.value[tabIndex.value]];
       nextTick(() => {
         if (name) {
-          const distance = name.offsetLeft;
-          TweenMax.to(regionLine.value, 0.5, { left: distance });
+          // const distance = name.offsetLeft;
+          // TweenMax.to(regionLine.value, 0.5, { left: distance });
         }
       });
     };
@@ -462,6 +477,7 @@ export default create({
     );
 
     return {
+      classes,
       showPopup,
       privateType,
       tabIndex,
@@ -487,5 +503,5 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/address/index.scss';
 </style>

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

@@ -0,0 +1,172 @@
+<template>
+  <view class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <ul class="infiniteUl" id="scroll">
+        <nut-infiniteloading
+          container-id="scroll"
+          :use-window="false"
+          :has-more="hasMore"
+          @load-more="loadMore"
+        >
+          <li
+            class="infiniteLi"
+            v-for="(item, index) in defultList"
+            :key="index"
+            >{{ item }}</li
+          >
+        </nut-infiniteloading>
+      </ul>
+    </nut-cell>
+
+    <h2>下拉刷新</h2>
+    <nut-cell>
+      <ul class="infiniteUl" id="refreshScroll">
+        <nut-infiniteloading
+          pull-icon="JD"
+          container-id="refreshScroll"
+          :use-window="false"
+          :is-open-refresh="true"
+          :has-more="refreshHasMore"
+          @load-more="refreshLoadMore"
+          @refresh="refresh"
+        >
+          <li
+            class="infiniteLi"
+            v-for="(item, index) in refreshList"
+            :key="index"
+            >{{ item }}</li
+          >
+        </nut-infiniteloading>
+      </ul>
+    </nut-cell>
+
+    <h2>自定义加载文案</h2>
+    <nut-cell>
+      <ul class="infiniteUl" id="customScroll">
+        <nut-infiniteloading
+          load-txt="loading"
+          load-more-txt="没有啦～"
+          container-id="customScroll"
+          :use-window="false"
+          :has-more="customHasMore"
+          @load-more="customLoadMore"
+        >
+          <li
+            class="infiniteLi"
+            v-for="(item, index) in customList"
+            :key="index"
+            >{{ item }}</li
+          >
+        </nut-infiniteloading>
+      </ul>
+    </nut-cell>
+  </view>
+</template>
+
+<script lang="ts">
+import { onMounted, ref, reactive, toRefs } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+const { createDemo } = createComponent('infiniteloading');
+import Toast from './../toast/index.taro.vue';
+export default createDemo({
+  props: {},
+  setup() {
+    const hasMore = ref(true);
+    const customHasMore = ref(true);
+    const refreshHasMore = ref(true);
+
+    const data = reactive({
+      defultList: [''],
+      customList: [''],
+      refreshList: ['']
+    });
+
+    const loadMore = done => {
+      setTimeout(() => {
+        const curLen = data.defultList.length;
+
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.defultList.push(`${i}`);
+        }
+
+        if (data.defultList.length > 30) hasMore.value = false;
+
+        done();
+      }, 500);
+    };
+
+    const customLoadMore = done => {
+      setTimeout(() => {
+        const curLen = data.customList.length;
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.customList.push(`${i}`);
+        }
+        if (data.customList.length > 30) customHasMore.value = false;
+        done();
+      }, 500);
+    };
+
+    const refreshLoadMore = done => {
+      setTimeout(() => {
+        const curLen = data.refreshList.length;
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.refreshList.push(`${i}`);
+        }
+        if (data.refreshList.length > 30) refreshHasMore.value = false;
+        done();
+      }, 500);
+    };
+
+    const refresh = done => {
+      setTimeout(() => {
+        Toast.success('刷新成功');
+        done();
+      }, 1000);
+    };
+
+    const init = () => {
+      for (let i = 0; i < 10; i++) {
+        data.defultList.push(`${i}`);
+        data.customList.push(`${i}`);
+        data.refreshList.push(`${i}`);
+      }
+    };
+    onMounted(() => {
+      init();
+    });
+
+    return {
+      loadMore,
+      hasMore,
+      customHasMore,
+      customLoadMore,
+      refreshHasMore,
+      refreshLoadMore,
+      refresh,
+      ...toRefs(data)
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
+}
+
+.loading {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+</style>

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

@@ -39,8 +39,9 @@ import {
   computed,
   CSSProperties
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from './../../../../../../packages/utils/create';
 const { componentName, create } = createComponent('infiniteloading');
+import Icon from './../icon/index.taro.vue';
 export default create({
   props: {
     hasMore: {
@@ -91,7 +92,9 @@ export default create({
     }
   },
   emits: ['scroll-change', 'load-more', 'refresh'],
-
+  components: {
+    'nut-icon': Icon
+  },
   setup(props, { emit, slots }) {
     const state = reactive({
       scrollEl: window as Window | HTMLElement | (Node & ParentNode),
@@ -283,5 +286,5 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/infiniteloading/index.scss';
 </style>

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

@@ -218,7 +218,7 @@ export default create({
     onMounted(() => {
       // document.getElementById('app').appendChild(proxy.$el);
       const query = wx.createSelectorQuery();
-      console.log(query.in(proxy));
+      // console.log(query.in(proxy));
       query.selectViewport().scrollOffset();
       query.exec(res => {
         // console.log(res[0].scrollTop)