upd: swiper

.gitignore

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

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

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

src/sites/mobile-taro/vue/config/index.js

@@ -25,6 +25,9 @@ const config = {
     options: {}
   },
   framework: 'vue3',
+  runtime: {
+    enableSizeAPIs: true
+  },
   mini: {
     postcss: {
       pxtransform: {

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

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

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

@@ -2,9 +2,9 @@
   ['common'],
   {
     /***/ '../../../packages/utils/create/component.ts':
-      /*!**********************************************************************************************!*\
-  !*** /Users/yangxiaolu3/Documents/JD/workspace/nutui/src/packages/utils/create/component.ts ***!
-  \**********************************************************************************************/
+      /*!***********************************************************************************************!*\
+  !*** /Users/suzigang/Downloads/project/nutui3.0/nutui/src/packages/utils/create/component.ts ***!
+  \***********************************************************************************************/
       /*! exports provided: createComponent */
       /*! exports used: createComponent */
       /***/ function(module, __webpack_exports__, __webpack_require__) {
@@ -61,9 +61,9 @@
       },
 
     /***/ '../../../packages/utils/create/index.ts':
-      /*!******************************************************************************************!*\
-  !*** /Users/yangxiaolu3/Documents/JD/workspace/nutui/src/packages/utils/create/index.ts ***!
-  \******************************************************************************************/
+      /*!*******************************************************************************************!*\
+  !*** /Users/suzigang/Downloads/project/nutui3.0/nutui/src/packages/utils/create/index.ts ***!
+  \*******************************************************************************************/
       /*! exports provided: createComponent */
       /*! exports used: createComponent */
       /***/ function(module, __webpack_exports__, __webpack_require__) {

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

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

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

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

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

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

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

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

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

@@ -1,315 +0,0 @@
-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

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

src/sites/mobile-taro/vue/package.json

@@ -36,17 +36,17 @@
   "author": "jdcfe",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "@tarojs/components": "^3.3.0-alpha.2",
-    "@tarojs/runtime": "^3.3.0-alpha.2",
-    "@tarojs/taro": "^3.3.0-alpha.2",
+    "@tarojs/components": "3.3.0-alpha.6",
+    "@tarojs/runtime": "3.3.0-alpha.6",
+    "@tarojs/taro": "3.3.0-alpha.6",
     "vue": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@tarojs/cli": "^3.3.0-alpha.2",
-    "@tarojs/mini-runner": "^3.3.0-alpha.2",
-    "@tarojs/plugin-html": "^3.3.0-alpha.2",
-    "@tarojs/webpack-runner": "^3.3.0-alpha.2",
+    "@tarojs/cli": "3.3.0-alpha.6",
+    "@tarojs/mini-runner": "3.3.0-alpha.6",
+    "@tarojs/plugin-html": "3.3.0-alpha.6",
+    "@tarojs/webpack-runner": "3.3.0-alpha.6",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",

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

@@ -1,11 +1,12 @@
 export default {
   pages: [
-    'pages/calendar/demo',
-    'pages/input/demo',
-    'pages/popup/demo',
-    'pages/inputnumber/demo',
-    'pages/textarea/demo',
-    'pages/button/demo'
+    'pages/swiper/demo'
+    // 'pages/calendar/demo',
+    // 'pages/input/demo',
+    // 'pages/popup/demo',
+    // 'pages/inputnumber/demo',
+    // 'pages/textarea/demo',
+    // 'pages/button/demo'
   ],
   window: {
     backgroundTextStyle: 'light',

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="demo">
+    <h2>基本用法</h2>
+    <view class="demo-box">
+      <nut-swiper
+        :init-page="page"
+        :pagination-visible="true"
+        pagination-color="#426543"
+      >
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+    </view>
+    <!-- <h2>自定义大小</h2>
+    <view class="demo-box">
+      <nut-swiper :init-page="page2" :loop="false" width="300">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+    </view>
+    <h2>自定义指示器</h2>
+    <view class="demo-box">
+      <nut-swiper :init-page="page3" :loop="true" @change="change">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+        <template v-slot:page>
+          <div class="page"> {{ current }}/4 </div>
+        </template>
+      </nut-swiper>
+    </view>
+    <h2>垂直方向</h2>
+    <view class="demo-box">
+      <nut-swiper
+        :init-page="page4"
+        :loop="true"
+        auto-play="3000"
+        direction="vertical"
+        height="150"
+        :pagination-visible="true"
+        style="height: 150px"
+      >
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+    </view> -->
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Swiper from './index.taro.vue';
+import SwiperItem from './../swiperitem/index.taro.vue';
+const { createDemo } = createComponent('swiper');
+export default createDemo({
+  props: {},
+  components: {
+    'nut-swiper': Swiper,
+    'nut-swiper-item': SwiperItem
+  },
+  setup() {
+    const state = reactive({
+      page: 2,
+      page2: 0,
+      page3: 0,
+      page4: 0,
+      current: 1,
+      list: [
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/128047/5/6706/178631/5f068cefE53bff564/4dd870d8932daecf.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg'
+      ]
+    });
+    const change = (index: number) => {
+      state.current = index + 1;
+    };
+    return {
+      ...toRefs(state),
+      change
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.demo-box {
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .page {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 46px;
+    height: 22px;
+    background: rgba(0, 0, 0, 0.33);
+    border-radius: 22px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+  }
+}
+</style>

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

@@ -50,13 +50,16 @@ import {
   ref,
   watch
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { useTouch } from './use-touch';
-import { useExpose } from '@/packages/utils/useExpose/index';
+import { createComponent } from './../../../../../../packages/utils/create';
+import { useTouch } from './../../../../../../packages/__VUE/swiper/use-touch';
+import { useExpose } from './../../../../../../packages/utils/useExpose/index';
 const { create, componentName } = createComponent('swiper');
-import swiperItem from '@/packages/__VUE/swiperitem/index.vue';
+// import swiperItem from './../swiperitem/index.taro.vue';
 export default create({
-  children: [swiperItem],
+  // children: [swiperItem],
+  // components: {
+  //   'nut-swiper-item': swiperItem
+  // },
   props: {
     width: {
       type: [Number, String],
@@ -80,7 +83,7 @@ export default create({
     },
     loop: {
       type: Boolean,
-      default: true
+      default: false
     },
     duration: {
       type: [Number, String],
@@ -201,6 +204,8 @@ export default create({
         targetOffset = range(targetOffset, minOffset.value, 0);
       }
 
+      console.log(targetOffset);
+
       return targetOffset;
     };
 
@@ -223,18 +228,26 @@ export default create({
       const targetActive = getActive(pace);
       const targetOffset = getOffset(targetActive, offset);
 
+      // console.log(targetActive, targetOffset)
+
       if (props.loop) {
         if (state.children[0] && targetOffset !== minOffset.value) {
           const rightBound = targetOffset < minOffset.value;
           (state.children[0] as any).setOffset(
             rightBound ? trackSize.value : 0
           );
+          // wx.createSelectorQuery().select(`.${(state.children[0] as any).$el.className}`).scrollOffset((rect) => {
+          //   rect.scrollLeft = rightBound ? trackSize.value : 0;
+          // }).exec();
         }
         if (state.children[childCount.value - 1] && targetOffset !== 0) {
           const leftBound = targetOffset > 0;
           (state.children[childCount.value - 1] as any).setOffset(
             leftBound ? -trackSize.value : 0
           );
+          // wx.createSelectorQuery().select(`.${(state.children[childCount.value - 1] as any).$el.className}`).scrollOffset((rect) => {
+          //   rect.scrollLeft = leftBound ? -trackSize.value : 0
+          // }).exec();
         }
       }
 
@@ -327,18 +340,28 @@ export default create({
 
     const init = (active: number = +props.initPage) => {
       stopAutoPlay();
-      state.rect = container.value.getBoundingClientRect();
-      active = Math.min(childCount.value - 1, active);
-      state.width = props.width ? +props.width : (state.rect as DOMRect).width;
-      state.height = props.height
-        ? +props.height
-        : (state.rect as DOMRect).height;
-      state.active = active;
-      state.offset = getOffset(state.active);
-      state.moving = true;
-      getStyle();
-
-      autoplay();
+      setTimeout(() => {
+        const query = wx
+          .createSelectorQuery()
+          .select(`.${container.value.className}`);
+        query
+          .boundingClientRect(rect => {
+            state.rect = rect;
+            active = Math.min(childCount.value - 1, active);
+            state.width = props.width
+              ? +props.width
+              : (state.rect as DOMRect).width;
+            state.height = props.height
+              ? +props.height
+              : (state.rect as DOMRect).height;
+            state.active = active;
+            state.offset = getOffset(state.active);
+            state.moving = true;
+            getStyle();
+            autoplay();
+          })
+          .exec();
+      }, 0);
     };
 
     const onTouchStart = (e: TouchEvent) => {
@@ -466,6 +489,6 @@ export default create({
 });
 </script>
 
-<style scoped lang="scss">
-@import 'index.scss';
+<style lang="scss">
+@import '../../../../../../packages/__VUE/swiper/index.scss';
 </style>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="demo">
+    <h2>基本用法</h2>
+    <view class="demo-box">
+      <nut-swiper> </nut-swiper>
+    </view>
+    <h2>直播轮播样式</h2>
+    <view class="demo-box">
+      <nut-swiper> </nut-swiper>
+    </view>
+    <h2>商品轮播样式</h2>
+    <view class="demo-box">
+      <nut-swiper> </nut-swiper>
+    </view>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { createDemo } = createComponent('swiper');
+export default createDemo({
+  props: {},
+  setup() {
+    const data = reactive({});
+    return {};
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -6,8 +6,8 @@
 
 <script lang="ts">
 import { computed, reactive, inject, getCurrentInstance, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { useExpose } from '@/packages/__VUE/swiper/use-expose';
+import { createComponent } from './../../../../../../packages/utils/create';
+import { useExpose } from './../../../../../../packages/utils/useExpose/index';
 const { create, componentName } = createComponent('swiper-item');
 interface IStyle {
   width?: string;
@@ -62,6 +62,6 @@ export default create({
 });
 </script>
 
-<style scoped lang="scss">
-@import 'index.scss';
+<style lang="scss">
+@import '../../../../../../packages/__VUE/swiperitem/index.scss';
 </style>