合并nutui.js冲突

src/nutui.js

@@ -1,152 +1,153 @@
-import { version } from "../package.json";
-import { packages as pkgList } from "./config.json";
-import { locale } from "./locales";
-import Cell from "./packages/cell/index.js";
-import "./packages/cell/cell.scss";
-import Dialog from "./packages/dialog/index.js";
-import "./packages/dialog/dialog.scss";
-import Icon from "./packages/icon/index.js";
-import "./packages/icon/icon.scss";
-import Toast from "./packages/toast/index.js";
-import "./packages/toast/toast.scss";
-import ActionSheet from "./packages/actionsheet/index.js";
-import "./packages/actionsheet/actionsheet.scss";
-import Tab from "./packages/tab/index.js";
-import "./packages/tab/tab.scss";
-import TabPanel from "./packages/tabpanel/index.js";
-import "./packages/tabpanel/tabpanel.scss";
-import TabBar from "./packages/tabbar/index.js";
-import "./packages/tabbar/tabbar.scss";
-import Calendar from "./packages/calendar/index.js";
-import "./packages/calendar/calendar.scss";
-import DatePicker from "./packages/datepicker/index.js";
-import "./packages/datepicker/datepicker.scss";
-import NavBar from "./packages/navbar/index.js";
-import "./packages/navbar/navbar.scss";
-import NoticeBar from "./packages/noticebar/index.js";
-import "./packages/noticebar/noticebar.scss";
-import Switch from "./packages/switch/index.js";
-import "./packages/switch/switch.scss";
-import Slider from "./packages/slider/index.js";
-import "./packages/slider/slider.scss";
-import Range from "./packages/range/index.js";
-import "./packages/range/range.scss";
-import Picker from "./packages/picker/index.js";
-import "./packages/picker/picker.scss";
-import Progress from "./packages/progress/index.js";
-import "./packages/progress/progress.scss";
-import Price from "./packages/price/index.js";
-import "./packages/price/price.scss";
-import Flex from "./packages/flex/index.js";
-import "./packages/flex/flex.scss";
-import Col from "./packages/col/index.js";
-import "./packages/col/col.scss";
-import Row from "./packages/row/index.js";
-import "./packages/row/row.scss";
-import Steps from "./packages/steps/index.js";
-import "./packages/steps/steps.scss";
-import Button from "./packages/button/index.js";
-import "./packages/button/button.scss";
-import Badge from "./packages/badge/index.js";
-import "./packages/badge/badge.scss";
-import Rate from "./packages/rate/index.js";
-import "./packages/rate/rate.scss";
-import Swiper from "./packages/swiper/index.js";
-import "./packages/swiper/swiper.scss";
-import Menu from "./packages/menu/index.js";
-import "./packages/menu/menu.scss";
-import Stepper from "./packages/stepper/index.js";
-import "./packages/stepper/stepper.scss";
-import ButtonGroup from "./packages/buttongroup/index.js";
-import "./packages/buttongroup/buttongroup.scss";
-import SearchBar from "./packages/searchbar/index.js";
-import "./packages/searchbar/searchbar.scss";
-import ImagePicker from "./packages/imagepicker/index.js";
-import "./packages/imagepicker/imagepicker.scss";
-import Radio from "./packages/radio/index.js";
-import "./packages/radio/radio.scss";
-import RadioGroup from "./packages/radiogroup/index.js";
-import "./packages/radiogroup/radiogroup.scss";
-import CheckBox from "./packages/checkbox/index.js";
-import "./packages/checkbox/checkbox.scss";
-import CheckBoxGroup from "./packages/checkboxgroup/index.js";
-import "./packages/checkboxgroup/checkboxgroup.scss";
-import ShortPassword from "./packages/shortpassword/index.js";
-import "./packages/shortpassword/shortpassword.scss";
-import Skeleton from "./packages/skeleton/index.js";
-import "./packages/skeleton/skeleton.scss";
-import Scroller from "./packages/scroller/index.js";
-import "./packages/scroller/scroller.scss";
-import BackTop from "./packages/backtop/index.js";
-import "./packages/backtop/backtop.scss";
-import CountDown from "./packages/countdown/index.js";
-import "./packages/countdown/countdown.scss";
-import InfiniteLoading from "./packages/infiniteloading/index.js";
-import "./packages/infiniteloading/infiniteloading.scss";
-import Uploader from "./packages/uploader/index.js";
-import "./packages/uploader/uploader.scss";
-import TextInput from "./packages/textinput/index.js";
-import "./packages/textinput/textinput.scss";
-import Avatar from "./packages/avatar/index.js";
-import "./packages/avatar/avatar.scss";
-import Lazyload from "./packages/lazyload/index.js";
-import "./packages/textbox/textbox.scss";
-import TextBox from "./packages/textbox/index.js";
-import Elevator from "./packages/elevator/index.js";
-import "./packages/elevator/elevator.scss";
-import Popup from "./packages/popup/index.js";
-import LeftSlip from "./packages/leftslip/index.js";
-import "./packages/leftslip/leftslip.scss";
+import {version} from '../package.json';
+import {packages as pkgList} from './config.json';
+import {locale} from './locales';
+import Cell from './packages/cell/index.js';
+import './packages/cell/cell.scss';
+import Dialog from './packages/dialog/index.js';
+import './packages/dialog/dialog.scss';
+import Icon from './packages/icon/index.js';
+import './packages/icon/icon.scss';
+import Toast from './packages/toast/index.js';
+import './packages/toast/toast.scss';
+import ActionSheet from './packages/actionsheet/index.js';
+import './packages/actionsheet/actionsheet.scss';
+import Tab from './packages/tab/index.js';
+import './packages/tab/tab.scss';
+import TabPanel from './packages/tabpanel/index.js';
+import './packages/tabpanel/tabpanel.scss';
+import TabBar from './packages/tabbar/index.js';
+import './packages/tabbar/tabbar.scss';
+import Calendar from './packages/calendar/index.js';
+import './packages/calendar/calendar.scss';
+import DatePicker from './packages/datepicker/index.js';
+import './packages/datepicker/datepicker.scss';
+import NavBar from './packages/navbar/index.js';
+import './packages/navbar/navbar.scss';
+import NoticeBar from './packages/noticebar/index.js';
+import './packages/noticebar/noticebar.scss';
+import Switch from './packages/switch/index.js';
+import './packages/switch/switch.scss';
+import Slider from './packages/slider/index.js';
+import './packages/slider/slider.scss';
+import Range from './packages/range/index.js';
+import './packages/range/range.scss';
+import Picker from './packages/picker/index.js';
+import './packages/picker/picker.scss';
+import Progress from './packages/progress/index.js';
+import './packages/progress/progress.scss';
+import Price from './packages/price/index.js';
+import './packages/price/price.scss';
+import Flex from './packages/flex/index.js';
+import './packages/flex/flex.scss';
+import Col from './packages/col/index.js';
+import './packages/col/col.scss';
+import Row from './packages/row/index.js';
+import './packages/row/row.scss';
+import Steps from './packages/steps/index.js';
+import './packages/steps/steps.scss';
+import Button from './packages/button/index.js';
+import './packages/button/button.scss';
+import Badge from './packages/badge/index.js';
+import './packages/badge/badge.scss';
+import Rate from './packages/rate/index.js';
+import './packages/rate/rate.scss';
+import Swiper from './packages/swiper/index.js';
+import './packages/swiper/swiper.scss';
+import Menu from './packages/menu/index.js';
+import './packages/menu/menu.scss';
+import Stepper from './packages/stepper/index.js';
+import './packages/stepper/stepper.scss';
+import ButtonGroup from './packages/buttongroup/index.js';
+import './packages/buttongroup/buttongroup.scss';
+import SearchBar from './packages/searchbar/index.js';
+import './packages/searchbar/searchbar.scss';
+import ImagePicker from './packages/imagepicker/index.js';
+import './packages/imagepicker/imagepicker.scss';
+import Radio from './packages/radio/index.js';
+import './packages/radio/radio.scss';
+import RadioGroup from './packages/radiogroup/index.js';
+import './packages/radiogroup/radiogroup.scss';
+import CheckBox from './packages/checkbox/index.js';
+import './packages/checkbox/checkbox.scss';
+import CheckBoxGroup from './packages/checkboxgroup/index.js';
+import './packages/checkboxgroup/checkboxgroup.scss';
+import ShortPassword from './packages/shortpassword/index.js';
+import './packages/shortpassword/shortpassword.scss';
+import Skeleton from './packages/skeleton/index.js';
+import './packages/skeleton/skeleton.scss';
+import Scroller from './packages/scroller/index.js';
+import './packages/scroller/scroller.scss';
+import BackTop from './packages/backtop/index.js';
+import './packages/backtop/backtop.scss';
+import CountDown from './packages/countdown/index.js';
+import './packages/countdown/countdown.scss';
+import InfiniteLoading from './packages/infiniteloading/index.js';
+import './packages/infiniteloading/infiniteloading.scss';
+import Uploader from './packages/uploader/index.js';
+import './packages/uploader/uploader.scss';
+import TextInput from './packages/textinput/index.js';
+import './packages/textinput/textinput.scss';
+import Avatar from './packages/avatar/index.js';
+import './packages/avatar/avatar.scss';
+import Lazyload from './packages/lazyload/index.js';
+import './packages/textbox/textbox.scss';
+import TextBox from './packages/textbox/index.js';
+import Elevator from './packages/elevator/index.js';
+import './packages/elevator/elevator.scss';
+import Popup from './packages/popup/index.js';
+import LeftSlip from './packages/leftslip/index.js';
+import './packages/leftslip/leftslip.scss';
 
+import './packages/popup/popup.scss';
 const packages = {
-  Cell,
-  Dialog,
-  Icon,
-  Toast,
-  ActionSheet,
-  Tab,
-  TabPanel,
-  TabBar,
-  Calendar,
-  DatePicker,
-  NavBar,
-  NoticeBar,
-  Switch,
-  Slider,
-  Range,
-  Picker,
-  Progress,
-  Price,
-  Flex,
-  Col,
-  Row,
-  Steps,
-  Button,
-  Badge,
-  Rate,
-  Swiper,
-  Menu,
-  Stepper,
-  ButtonGroup,
-  SearchBar,
-  ImagePicker,
-  Radio,
-  RadioGroup,
-  CheckBox,
-  CheckBoxGroup,
-  ShortPassword,
-  Skeleton,
-  Scroller,
-  BackTop,
-  CountDown,
-  InfiniteLoading,
-  Uploader,
-  TextInput,
-  TextBox,
-  Avatar,
-  Elevator,
-  Popup,
-  LeftSlip
+    Cell,
+    Dialog,
+    Icon,
+    Toast,
+    ActionSheet,
+    Tab,
+    TabPanel,
+    TabBar,
+    Calendar,
+    DatePicker,
+    NavBar,
+    NoticeBar,
+    Switch,
+    Slider,
+    Range,
+    Picker,
+    Progress,
+    Price,
+    Flex,
+    Col,
+    Row,
+    Steps,
+    Button,
+    Badge,
+    Rate,
+    Swiper,
+    Menu,
+    Stepper,
+    ButtonGroup,
+    SearchBar,
+    ImagePicker,
+    Radio,
+    RadioGroup,
+    CheckBox,
+    CheckBoxGroup,
+    ShortPassword,
+    Skeleton,
+    Scroller,
+    BackTop,
+    CountDown,
+    InfiniteLoading,
+    Uploader,
+    TextInput,
+    TextBox,
+    Avatar,
+    Elevator,
+    Popup,
+    LeftSlip
 };
 
 const components = {};
@@ -154,80 +155,79 @@ const methods = {};
 const filters = {};
 const directives = {};
 pkgList.map(item => {
-  const pkg = packages[item.name];
-  if (!pkg) return;
+    const pkg = packages[item.name];
+    if (!pkg) return;
 
-  if (item.type == "component") {
-    if (pkg.name) {
-      components[pkg.name] = pkg;
-    } else {
-      for (let n in pkg) {
-        components[n] = pkg[n];
-      }
+    if (item.type == 'component') {
+        if (pkg.name) {
+            components[pkg.name] = pkg;
+        } else {
+            for (let n in pkg) {
+                components[n] = pkg[n];
+            }
+        }
+    } else if (item.type == 'method') {
+        methods[item.name] = pkg;
+    } else if (item.type == 'filter') {
+        filters[item.name] = pkg;
+    } else if (item.type == 'directive') {
+        directives[item.name] = pkg;
     }
-  } else if (item.type == "method") {
-    methods[item.name] = pkg;
-  } else if (item.type == "filter") {
-    filters[item.name] = pkg;
-  } else if (item.type == "directive") {
-    directives[item.name] = pkg;
-  }
 });
 
 const install = function(Vue, opts = {}) {
-  if (install.installed) return;
+    if (install.installed) return;
 
-  if (opts.locale) {
-    Vue.config.lang = opts.locale;
-  }
+    if (opts.locale) {
+        Vue.config.lang = opts.locale;
+    }
 
-  if (opts.lang) locale(Vue.config.lang, opts.lang);
+    if (opts.lang) locale(Vue.config.lang, opts.lang);
 
-  for (let cptName in methods) {
-    if (Array.isArray(methods[cptName])) {
-      Vue.prototype["$" + cptName.toLowerCase()] = methods[cptName][0];
-      Vue.component(methods[cptName][1].name, methods[cptName][1]);
-    } else {
-      Vue.prototype["$" + cptName.toLowerCase()] = methods[cptName];
+    for (let cptName in methods) {
+        if (Array.isArray(methods[cptName])) {
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
+            Vue.component(methods[cptName][1].name, methods[cptName][1]);
+        } else {
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
+        }
     }
-  }
 
-  for (let cptName in components) {
-    if (components[cptName] && components[cptName].name) {
-      Vue.component(components[cptName].name, components[cptName]);
+    for (let cptName in components) {
+        if (components[cptName] && components[cptName].name) {
+            Vue.component(components[cptName].name, components[cptName]);
+        }
     }
-  }
 
-  for (let cptName in filters) {
-    if (filters[cptName] && filters[cptName].name) {
-      Vue.filter(cptName, filters[cptName]);
+    for (let cptName in filters) {
+        if (filters[cptName] && filters[cptName].name) {
+            Vue.filter(cptName, filters[cptName]);
+        }
     }
-  }
 
-  for (let cptName in directives) {
-    if (directives[cptName] && directives[cptName].name) {
-      Vue.directive(directives[cptName].name, directives[cptName]);
+    for (let cptName in directives) {
+        if (directives[cptName] && directives[cptName].name) {
+            Vue.directive(directives[cptName].name, directives[cptName]);
+        }
     }
-  }
 
-  Vue.use(Lazyload, {
-    lazyComponent: true,
-    loading:
-      "//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png"
-  });
+    Vue.use(Lazyload, {
+        lazyComponent: true,
+        loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png'
+    });
 };
 
-if (typeof window !== "undefined" && window.Vue) {
-  install(window.Vue);
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
 }
 
 export default {
-  version,
-  locale,
-  install,
-  Lazyload,
-  ...components,
-  ...filters,
-  ...directives,
-  ...methods
+    version,
+    locale,
+    install,
+    Lazyload,
+    ...components,
+    ...filters,
+    ...directives,
+    ...methods
 };

src/packages/calendar/__test__/calendar.spec.js

@@ -6,7 +6,7 @@ import Vue from 'vue';
 describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
-            defaultValue: '2020-01-12'
+            defaultValue: '2022-01-12'
         }
     });
 
@@ -19,7 +19,7 @@ describe('Calendar.vue', () => {
 
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年01月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2021年01月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('12');
         })
     });
@@ -27,7 +27,7 @@ describe('Calendar.vue', () => {
     it('选择日期', () => {
         wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day').at(10).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('12');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('6');
 
         })
     });
@@ -36,9 +36,9 @@ describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
             type: 'range',
-            defaultValue: ['2020-02-22', '2020-02-25'],
-            startDate: '2020-02-01',
-            endDate:'2020-04-11'
+            defaultValue: ['2022-02-22', '2022-02-25'],
+            startDate: '2022-02-01',
+            endDate:'2022-04-11'
         }
     });
 
@@ -55,7 +55,7 @@ describe('Calendar.vue', () => {
     });
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年02月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年02月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('22 开始');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('25 结束');
         })
@@ -65,8 +65,8 @@ describe('Calendar.vue', () => {
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(14).trigger('click');
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(16).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('15 开始');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('17 结束');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('13 开始');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('15 结束');
         })
     });
    

src/packages/elevator/elevator.scss

@@ -1,6 +1,14 @@
 .nut-elevator{
+    position: fixed;
+    top:40px;
+    width: 100%;
+}
+.nut-main{
     overflow: scroll;
     background:#FFF; 
+    &::-webkit-scrollbar{
+        display:none; 
+    }
 }
 .nut-elevator-ul{
     width: 100%;

src/packages/elevator/elevator.vue

@@ -1,44 +1,45 @@
 <template>
-    <div class="nut-elevator" id="nut-elevator" :style="{height:wrapHeight+'px'}">
-        <ul class="nut-elevator-ul" 
-            id="nut-elevator-ul"
-            >
-            <li 
-            v-for="item in dataArray" 
-            v-bind:key="item.title"
-            class="nut-list-title" 
-            >
-                <h3 class="nut-list-h" :id="item.title">{{item.title}}</h3>
-                <ul class="nut-people-list">
-                    <li v-for="(list,idx) in item.list" 
-                    v-bind:key="idx"
-                    class="nut-list-name" 
-                    :id="list.id?list.id:'list'+item.title+idx"
-                    @click="clickList(list,item)"
-                    >{{list.name}}</li>
+        <div class="nut-elevator"  :style="{height:wrapHeight+'px'}">
+            <div class="nut-main" :style="{height:wrapHeight+'px'}">
+                <ul class="nut-elevator-ul" 
+                    id="nut-elevator-ul"
+                    >
+                    <li 
+                    v-for="item in dataArray" 
+                    v-bind:key="item.title"
+                    class="nut-list-title" 
+                    >
+                        <h3 class="nut-list-h" :id="item.title">{{item.title}}</h3>
+                        <ul class="nut-people-list">
+                            <li v-for="(list,idx) in item.list" 
+                            v-bind:key="idx"
+                            class="nut-list-name" 
+                            :id="list.id?list.id:'list'+item.title+idx"
+                            @click="clickList(list,item)"
+                            >{{list.name}}</li>
+                        </ul>
+                    </li>
                 </ul>
-            </li>
-        </ul>
-        <ul class="nut-elevator-nav" id="nut-elevator-nav" 
-            @touchmove="onPointerMove($event)"
-            @touchstart="onPointerMove($event)"
-            @touchend="onPointerEnd($event)"
-            >
-            <li v-for="(item,index) in dataArray"
-            v-bind:key="index" 
-            :id="'nav'+index"
-            class="nut-nav-list" 
-            :class="{'nut-nav-curr':item.title==currTitle}"
-            :style="{height:navListHeight+'px'}"
-            @click="clickNav(item.title,index)"
-            >{{item.title}}</li>
-        </ul>
-        <template v-if="showIndicator">
-            <div class="nut-big-box" v-show="currBox">
-                {{currTitle}}
+                <ul class="nut-elevator-nav" id="nut-elevator-nav" 
+                    @touchmove="onPointerMove($event)"
+                    @touchstart="onPointerMove($event)"
+                    @touchend="onPointerEnd($event)"
+                    >
+                    <li v-for="(item,index) in dataArray"
+                    v-bind:key="index" 
+                    :id="'nav'+index"
+                    class="nut-nav-list" 
+                    :style="{height:navListHeight+'px'}"
+                    @click="clickNav(item.title,index)"
+                    >{{item.title}}</li>
+                </ul>
+                <template v-if="showIndicator">
+                    <div class="nut-big-box" v-show="currBox">
+                        {{currTitle}}
+                    </div>
+                </template>
             </div>
-        </template>
-    </div>
+        </div>  
 </template>
 <script>
 export default {
@@ -107,6 +108,7 @@ export default {
         },
         clickNav(title,index){
             this.currBox =true;
+            this.currTitle = title;
             setTimeout(()=>{
                 this.currBox =false;
             },this.hiddenTime);
@@ -118,6 +120,7 @@ export default {
         moveFun(title,index){
             let titleBox = document.getElementById(title);
             titleBox.scrollIntoView();
+            
         },
         onPointerEnd(e){
             let fontSize = this.getFontSize();

src/packages/popup/index.js

@@ -1,4 +1,5 @@
 import Popup from "./popup.vue";
+import "./popup.scss";
 
 Popup.install = function(Vue) {
   Vue.component(Popup.name, Popup);

src/packages/popup/popup.scss

@@ -0,0 +1,95 @@
+.popup-fade-enter-active {
+    animation: 0.2s nut-fade-in;
+  }
+  .popup-fade-leave-active {
+    animation: 0.2s nut-fade-out;
+  }
+  
+  .popup-slide {
+    &-top-enter,
+    &-top-leave-active {
+      transform: translate(0, -100%);
+    }
+    &-right-enter,
+    &-right-leave-active {
+      transform: translate(100%, 0);
+    }
+  
+    &-bottom-enter,
+    &-bottom-leave-active {
+      transform: translate(0, 100%);
+    }
+  
+    &-left-enter,
+    &-left-leave-active {
+      transform: translate(-100%, 0);
+    }
+  }
+  
+  .popup-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .popup-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    &.round {
+      border-radius: 25px 25px 0 0;
+    }
+  }
+  .popup-right {
+    top: 0;
+    right: 0;
+    &.round {
+      border-radius: 25px 0 0 25px;
+    }
+  }
+  
+  .popup-left {
+    top: 0;
+    left: 0;
+    &.round {
+      border-radius: 0 25px 25px 0;
+    }
+  }
+  .popup-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    &.round {
+      border-radius: 0 0 25px 25px;
+    }
+  }
+  .popup-box {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: #fff;
+    transition: transform 0.2s;
+    -webkit-overflow-scrolling: touch;
+    z-index: 2028;
+  }
+  @keyframes nut-fade-in {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes nut-fade-out {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      opacity: 0;
+    }
+  }
+ 
+  

src/packages/popup/popup.vue

@@ -99,98 +99,3 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-.popup-fade-enter-active {
-  animation: 0.2s van-fade-in;
-}
-.popup-fade-leave-active {
-  animation: 0.2s van-fade-out;
-}
-
-.popup-slide {
-  &-top-enter,
-  &-top-leave-active {
-    transform: translate(0, -100%);
-  }
-  &-right-enter,
-  &-right-leave-active {
-    transform: translate(100%, 0);
-  }
-
-  &-bottom-enter,
-  &-bottom-leave-active {
-    transform: translate(0, 100%);
-  }
-
-  &-left-enter,
-  &-left-leave-active {
-    transform: translate(-100%, 0);
-  }
-}
-
-.popup-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.popup-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  &.round {
-    border-radius: 25px 25px 0 0;
-  }
-}
-.popup-right {
-  top: 0;
-  right: 0;
-  &.round {
-    border-radius: 25px 0 0 25px;
-  }
-}
-
-.popup-left {
-  top: 0;
-  left: 0;
-  &.round {
-    border-radius: 0 25px 25px 0;
-  }
-}
-.popup-top {
-  top: 0;
-  left: 0;
-  width: 100%;
-  &.round {
-    border-radius: 0 0 25px 25px;
-  }
-}
-.popup-box {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: #fff;
-  transition: transform 0.2s;
-  -webkit-overflow-scrolling: touch;
-  z-index: 2028;
-}
-@keyframes van-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes van-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-</style>

src/packages/scroller/demo.vue

@@ -6,8 +6,9 @@
         >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
         <h4>横向滑动</h4>
         <p>支持惯性和吸边回弹，支持滑动到底跳转链接。</p>
+        <p><nut-button type="light" shape="circle" small @click="scrollToPosHor()">返回第一个</nut-button></p>
         <div class="hor-panel">
-            <nut-scroller @jump="jump()">
+            <nut-scroller @jump="jump()" @scrollToCbk="scrollToCbkHor" :scrollTo="scrollToHor">
                 <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
                     <dl class="nut-scroller-item-info">
                         <dt>防水升级版 蓝 迷你小音</dt>
@@ -26,19 +27,21 @@
                         <dd>2018-02-25</dd>
                     </dl>
                 </div>
-                <slot slot="more" ><div class="nut-hor-jump-more">查看更多</div></slot>
             </nut-scroller>
         </div>
         <h4>纵向滑动</h4>
         <p>支持下拉刷新、上拉加载更多。</p>
+        <p><nut-button type="light" shape="circle" small @click="scrollToPos()">返回列表顶部</nut-button></p>
         <div class="vert-panel">
             <nut-scroller
                 :is-un-more="isUnMore1" 
                 :is-loading="isLoading1"
                 :type="'vertical'"
                 :propsTime="0"
+                :scrollTo="scrollTo"
                 @loadMore="loadMoreVert"
                 @pulldown="pulldown"
+                @scrollToCbk="scrollToCbk"
             > 
                 <div slot="list" class="nut-vert-list-panel">
                     <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
@@ -90,6 +93,8 @@ export default {
             isLoading2: false,
             page2: 2,
             timers: null,
+            scrollTo: 1,
+            scrollToHor: 1
         };
     },
 
@@ -98,6 +103,23 @@ export default {
             location.href = 'http://www.jd.com';
         },
 
+        scrollToCbk() {
+            this.scrollTo = 1;
+        },
+
+        scrollToCbkHor() {
+            this.scrollToHor = 1;
+        },
+
+        scrollToPosHor() {
+            this.scrollToHor = 0;
+            
+        },
+
+        scrollToPos() {
+            this.scrollTo = 0;
+        },
+
         loadMoreVert() {
             this.isLoading1 = true;
             if (this.page1 > this.maxPages) {

src/packages/scroller/doc.md

@@ -174,6 +174,7 @@ export default {
 | pulldownTxt | 下拉展示文案 | String | '下拉刷新'
 | loadMoreTxt | 上拉展示文案 | String | '上拉加载'
 | unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了'
+| scrollTo | 滚动到指定位置，只能设置复数，需要配合scrollToCbk使用 | Number | 1
 
 ## Event
 
@@ -181,4 +182,5 @@ export default {
 |----- | ----- | ----- 
 | pulldown | 下拉刷新回调 | -
 | loadMore | 上拉加载回调 | -
-| jump | 查看更多跳转回调 | -
+| jump | 查看更多跳转回调 | -
+| scrollToCbk | 滚动到指定位置之后，scrollTo参数设置成默认值 | -

src/packages/scroller/horizontal-scroll.vue

@@ -16,6 +16,18 @@ export default {
         stretch: {
             type: Number,
             default: 40
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
+        }
+    },
+    watch: {
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {

src/packages/scroller/scroller.vue

@@ -10,15 +10,22 @@
                 :load-more-txt="loadMoreTxt"
                 :unload-more-txt="unloadMoreTxt"
                 :props-time="propsTime"
+                :scroll-to="scrollTo"
                 @loadMore="loadMore"
                 @pulldown="pulldown"
+                @scrollToCbk="scrollToCbk"
             >
                 <slot name="list"  slot="list"></slot>
 
             </nut-vert-scroll>
         </template>
         <template v-else-if="type === 'horizontal'">
-            <nut-hor-scroll :stretch="stretch" @jump="jump">
+            <nut-hor-scroll 
+            :stretch="stretch" 
+            :scroll-to="scrollTo"
+            @jump="jump" 
+            @scrollToCbk="scrollToCbk"
+        >
                 <slot name="list"  slot="list"></slot>
                 <slot name="more"  slot="more"></slot>
                 <slot name="arrow" slot="arrow"></slot>
@@ -67,6 +74,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     data() {
@@ -87,6 +98,10 @@ export default {
 
         pulldown() {
             this.$emit('pulldown');
+        },
+
+        scrollToCbk() {
+            this.$emit('scrollToCbk');
         }
     }
 }

src/packages/scroller/vertical-scroll.vue

@@ -59,6 +59,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     watch: {
@@ -72,6 +76,12 @@ export default {
         },
         'isUnMore': function() {
             this.isShow();
+        },
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {