update

build/webpack.demo.dev.conf.js

@@ -18,7 +18,7 @@ module.exports = merge(baseConf, {
             ftp: {
                 host: '192.168.181.73',
                 port: 3000,
-                source: 'dist/sites/demo',
+                source: 'dist/sites',
                 target: '/var/www/html/page.jd.com/exploit/nutui2/'
             }
         })

docs/intro.md

@@ -1,5 +1,5 @@
 <div style="text-align:center; margin:10px 0 30px;">
-    <img width="120" src="http://img11.360buyimg.com/uba/jfs/t1/11117/21/3608/18942/5c20ab52E35e5a500/02e3c1f89cd3dad1.png" alt="NutUI2" />
+    <img width="150" src="http://img14.360buyimg.com/uba/jfs/t1/8543/6/11560/22014/5c2c6136E8023ac0a/6abbd9de10999c48.png" alt="NutUI2" />
     <h1>NutUI 2</h1>
     <p style="color:#455A64;">一套移动端轻量级Vue组件库</p>
 </div>

sites/demo/app.js

@@ -6,20 +6,24 @@ import App from './App.vue';
 import router from './router';
 import Conf from '../../src/config.json';
 import NutUI from '../../src/nutui';
-import en from '../../src/locales/lang/en-US';
-import demoEN from './lang/en-US';
+// import en from '../../src/locales/lang/en-US';
+// import demoEN from './lang/en-US';
 import './asset/css/common.scss';
 
+import './asset/img/logo_share.png';
+
 Vue.config.productionTip = false;
 
-Object.assign(en, demoEN);
+// Object.assign(en, demoEN);
 
-Vue.use(NutUI, {
-  locale: 'en-US',
-  lang: en
-});
+// Vue.use(NutUI, {
+//   locale: 'en-US',
+//   lang: en
+// });
+
+NutUI.install(Vue);
 
-Vue.locale = () => {};
+//Vue.locale = () => {};
 
 // const i18n = new VueI18n({
 //   locale: 'en-US',

sites/demo/index.html

@@ -26,7 +26,7 @@
 
     //分享配置
     var shareOption = {
-      iconUrl: 'http://nutui.jd.com/img/logo.png',
+      iconUrl: 'http://nutui.jd.com/img/logo_share.png',
       url: 'http://nutui.jd.com/demo.html#/index',
       title: '移动端Vue组件库 NutUI 2.0',
       desc: '一套京东风格的轻量级移动端Vue组件库'

sites/demo/view/index.vue

@@ -49,7 +49,17 @@ export default {
   created() {
     this.packages = Conf.packages;
     this.version = Conf.version;
-    this.sorts = Conf.sorts;
+    //this.sorts = Conf.sorts;
+
+    this.sorts = [
+      "数据录入",
+      "操作反馈",
+      "数据展示",
+      "导航组件",
+      "布局组件",
+      "基础组件"
+    ];
+    
     this.foldStatus = Array(this.sorts.length)
       .join(",")
       .split(",")

sites/doc/app.vue

@@ -6,7 +6,7 @@
   <div class="md-swaper" @click="clearSearch" v-else>
     <div class="hder">
       <div class="logo">
-        <img src="./asset/css/i/nut.png" alt> <span class="version">{{version}}</span>
+        <a href="default.html#/index" class="logo-link"><img src="./asset/css/i/nut.png" alt></a> <span class="version">{{version}}</span>
       </div>
       <div class="h-nav">
         <div class="search-box">
@@ -37,7 +37,7 @@
           <li>
             <a class="qrcode demoLink" href="/demo.html#/index" target="_blank">示例             
                 <a :href="routerName">
-                  <span>请使用手机扫码体验</span><img :src="codeurl" alt="">
+                  <span>请使用手机扫码体验</span><img src="http://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png" alt="">
                 </a>
             </a>
           </li>
@@ -239,6 +239,9 @@ export default {
     display: flex;
     align-items:center;
     flex-shrink: 0;    
+    .logo-link{
+      display:inline-block;
+    }
     img{
         display: block;
         width: 120px;
@@ -493,5 +496,14 @@ body {
   a{
     z-index: 9999;
   }
+  &.qrcode{
+    span{
+      line-height: 64px;
+    }
+    img{
+      width:150px;
+      height:150px;
+    }
+  }
 }
 </style>

sites/doc/index.vue

@@ -517,7 +517,8 @@ export default {
     font-size: 0;
     position: relative;
     s {
-      background: url(./asset/css/i/logo2.png) 0 0 no-repeat;
+      background: url(./asset/css/i/nut.png) 0 0 no-repeat;
+      background-size:contain;
       height: 46px;
       width: 120px;
       display: inline-block;

src/packages/actionsheet/demo.vue

@@ -2,39 +2,39 @@
     <div class="demo-list">
         <h4>基本用法(选择类)</h4>
         <div>
-            <nut-cell :showIcon="true">
+            <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible')">
                 <span slot="title"><label>性别</label></span>
-                <div slot="desc" class="selected-option" @click="switchActionSheet('isVisible')">{{sex}}</div>
+                <div slot="desc" class="selected-option">{{sex}}</div>
             </nut-cell>
-            <nut-cell :showIcon="true">
+            <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible1')">
                 <span slot="title"><label>年龄</label></span>
                 <span slot="sub-title">带取消按钮~~~~</span>
-                <div slot="desc" class="selected-option" @click="switchActionSheet('isVisible1')">{{agespec}}</div>
+                <div slot="desc" class="selected-option">{{agespec}}</div>
             </nut-cell>
-            <nut-cell :showIcon="true">
+            <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible2')">
                 <span slot="title"><label>年龄</label></span>
                 <span slot="sub-title">高亮选中项~~~~</span>
-                <div slot="desc" class="selected-option" @click="switchActionSheet('isVisible2')">{{age}}</div>
+                <div slot="desc" class="selected-option">{{age}}</div>
             </nut-cell>
-            <nut-cell :showIcon="true">
+            <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible3')">
                 <span slot="title"><label>星座</label></span>
                 <span slot="sub-title">设置列表项展示使用参数~~~~</span>
-                <div slot="desc" class="selected-option"  @click="switchActionSheet('isVisible3')">{{constellation}}</div>
+                <div slot="desc" class="selected-option">{{constellation}}</div>
             </nut-cell>
         </div>
         <h4>提示类</h4>
         <div>
-            <nut-cell>
+            <nut-cell  :isLink="true" @click.native="switchActionSheet('isVisible4')">
                 <span slot="title"><label>我就列表测试数据</label></span>
                 <span slot="sub-title">我是描述~~~~</span>
-                <div slot="desc" class="selected-option"  @click="switchActionSheet('isVisible4')">删除本条</div>
+                <div slot="desc" class="selected-option">删除本条</div>
             </nut-cell>
         </div>
         <h4>自定义类</h4>
         <div>
-            <nut-cell>
+            <nut-cell :isLink="true" @click.native="switchActionSheet('isVisible5')">
                 <span slot="title"><label>内容自定义</label></span>
-                <div slot="desc" class="selected-option"  @click="switchActionSheet('isVisible5')">打开</div>
+                <div slot="desc" class="selected-option">打开</div>
             </nut-cell>
         </div>
         <!-- demo -->

src/packages/badge/demo.vue

@@ -55,7 +55,7 @@ export default {
 
 <style lang="scss" scoped>
 .item {
-  margin: 0 20px;
+  margin: 10px 20px;
 }
 .demo-w {
   margin: 20px 0;

src/packages/calendar/demo.vue

@@ -1,32 +1,32 @@
 <template>
     <div class="demo-list">
         <h4>基本用法</h4>
-        <nut-cell :showIcon="true">
+        <nut-cell :showIcon="true" @click.native="switchPicker('isVisible')">
             <span slot="title"><label>日期选择</label></span>
             <span slot="sub-title">没有默认日期~~~</span>
             <div slot="desc" class="selected-option" >
-                <span class="show-value"  @click="switchPicker('isVisible')">{{date ? `${date} ${dateWeek}` : '请选择日期'}}</span>
+                <span class="show-value">{{date ? `${date} ${dateWeek}` : '请选择日期'}}</span>
             </div>
         </nut-cell>
-        <nut-cell :showIcon="true">
+        <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
             <span slot="title"><label>日期选择</label></span>
             <span slot="sub-title">有默认日期，选择后自动回填的~~~</span>
             <div slot="desc" class="selected-option" >
-                <span class="show-value"  @click="switchPicker('isVisible2')">{{date2 ? date2 : '请选择日期'}}</span>
+                <span class="show-value">{{date2 ? date2 : '请选择日期'}}</span>
             </div>
         </nut-cell>
-        <nut-cell :showIcon="true">
+        <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible1')">
             <span slot="title"><label>日期区间选择</label></span>
             <span slot="sub-title">有默认日期~~~</span>
             <div slot="desc" class="selected-option" >
-                <span class="show-value"  @click="switchPicker('isVisible1')">{{date1 ? `${date1[0]}至${date1[1]}`  : '请选择日期'}}</span>
+                <span class="show-value">{{date1 ? `${date1[0]}至${date1[1]}`  : '请选择日期'}}</span>
             </div>
         </nut-cell>
-        <nut-cell :showIcon="true">
+        <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
             <span slot="title"><label>日期区间选择</label></span>
             <span slot="sub-title">不限制开始结束时间~~~</span>
             <div slot="desc" class="selected-option" >
-                <span class="show-value"  @click="switchPicker('isVisible3')">{{date3 ? `${date3[0]}至${date3[1]}`  : '请选择日期'}}</span>
+                <span class="show-value">{{date3 ? `${date3[0]}至${date3[1]}`  : '请选择日期'}}</span>
             </div>
         </nut-cell>
         <!-- demo-->

src/packages/picker/demo.vue

@@ -2,25 +2,25 @@
     <div class="demo-list">
         <h4>基本用法</h4>
         <div>
-            <nut-cell :showIcon="true">
+            <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible0')">
                 <span slot="title"><label>年月选择</label></span>
                 <span slot="sub-title">不联动多列~~~</span>
-                <div slot="desc" class="selected-option" @click="switchPicker('isVisible0')">{{date ? date : '请选择'}}</div>
+                <div slot="desc" class="selected-option">{{date ? date : '请选择'}}</div>
             </nut-cell>
-            <nut-cell :showIcon="true">
+            <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible')">
                 <span slot="title"><label>城市选择</label></span>
                 <span slot="sub-title">联动~~~</span>
                 <div slot="desc" class="selected-option" >
-                    <span class="btn" @click="modifyCity">修改为指定的城市</span>
-                    <span class="show-value"  @click="switchPicker('isVisible')">{{city ? city : '请选择'}}</span>
+                    <span class="btn" @click.stop.prevent="modifyCity">修改为指定的城市</span>
+                    <span class="show-value">{{city ? city : '请选择'}}</span>
                 </div>
             </nut-cell>
-            <nut-cell :showIcon="true">
+            <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible1')">
                 <span slot="title"><label>年选择</label></span>
                 <span slot="sub-title">单列~~~</span>
                 <div slot="desc" class="selected-option" >
-                    <span class="btn" @click="modifyYear">修改为指定的年份</span>
-                    <span class="show-value"  @click="switchPicker('isVisible1')">{{year ? year : '请选择'}}</span>
+                    <span class="btn" @click.stop.prevent="modifyYear">修改为指定的年份</span>
+                    <span class="show-value">{{year ? year : '请选择'}}</span>
                 </div>
             </nut-cell>
         </div>

src/packages/range/demo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="demo-list">
+    <div class="range-demo demo-list">
         <h4>基本用法</h4>
         <div>
             <nut-cell>
@@ -13,36 +13,35 @@
                     <span slot="title">{{val1[0]}},{{val1[1]}}</span>
             </nut-cell>
         </div>
-        
-        <h4>修改主题风格</h4>
+
+        <h4>显示标签文字</h4>
         <div>
-            <nut-cell>
+            <nut-cell class="my-range">
                 <span slot="title">
                 <nut-range 
-                    color="#31ccec"
-                    :rangeValues.sync="val2" 
-                    :range="[0,200]" 
-                    :showLabel="true"></nut-range></span>
+                    :rangeValues.sync="val3" 
+                    :range="[-10,10]" 
+                    :showLabelAlways="true" 
+                    :showLabel="true"
+                    :showRangeTxt="true"></nut-range></span>
             </nut-cell>
             <nut-cell>
-                    <span slot="title">{{val2[0]}},{{val2[1]}}</span>
+                    <span slot="title">{{val3[0]}},{{val3[1]}}</span>
             </nut-cell>
         </div>
         
-        <h4>显示标签文字</h4>
+        <h4>修改主题风格</h4>
         <div>
             <nut-cell>
                 <span slot="title">
                 <nut-range 
                     color="#31ccec"
-                    :rangeValues.sync="val3" 
-                    :range="[-10,10]" 
-                    :showLabelAlways="true" 
-                    :showLabel="true"
-                    :showRangeTxt="true"></nut-range></span>
+                    :rangeValues.sync="val2" 
+                    :range="[0,200]" 
+                    :showLabel="true"></nut-range></span>
             </nut-cell>
             <nut-cell>
-                    <span slot="title">{{val3[0]}},{{val3[1]}}</span>
+                    <span slot="title">{{val2[0]}},{{val2[1]}}</span>
             </nut-cell>
         </div>
     </div>
@@ -61,3 +60,19 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.range-demo{
+    .nut-cell:first-child{
+        .nut-cell-title{
+            padding:0 30px;
+        }
+        &.my-range{
+           .nut-cell-title{
+                padding:0;
+            } 
+        }
+    }
+}
+</style>
+
+

src/packages/shortpassword/shortpassword.vue

@@ -19,7 +19,7 @@
                             
                         </ul>
                     </div>
-                    <img src="#{$assetsPath}/img/cursor.gif" class="nut-fake-cursor" :style="fakeCursorStyle"/>
+                    <img src="../../assets/img/cursor.gif" class="nut-fake-cursor" :style="fakeCursorStyle"/>
                     <div class="nut-forget" v-if="link !=''">
                         <a :href="link">{{nutTranslate('lang.shortpassword.tip2')}}</a>
                     </div>

src/packages/skeleton/demo.vue

@@ -1,6 +1,6 @@
 <template>
     <div >
-    <nut-skeleton>
+    <nut-skeleton class="my-skeleton">
         
         <row padding="15px 10px 0 ">
 
@@ -49,4 +49,11 @@ export default {
     }
     
 }
-</script>
+</script>
+<style lang="scss" scoped>
+
+.my-skeleton{
+    padding-top:60px;
+    z-index:998;
+}
+</style>

src/packages/skeleton/skeleton.scss

@@ -1,28 +1,27 @@
-.vue-skeleton-loading{
-    position:fixed;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
-    z-index:99999;
+.vue-skeleton-loading {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-mask;
     font-size: 12px;
-    background:#fff;
-    @keyframes backpos{
-       
-       from {
-           background-position-x:-200px;
-       }
-       to{
-          background-position-x:calc(200px + 100%);
-       }
+    background: #fff;
+    @keyframes backpos {
+        from {
+            background-position-x: -200px;
+        }
+        to {
+            background-position-x: calc(200px + 100%);
+        }
     }
     .skeleton-bac-animation {
-        position:absolute;
-        z-index:auto;
-        width:100%;
-        height:100%;
-        background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 80%);
-        background-size:30% 100%;
+        position: absolute;
+        z-index: auto;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
+        background-size: 30% 100%;
         background-repeat: no-repeat;
         -webkit-animation: backpos 0.9s ease-in-out 0s infinite;
         animation: backpos 0.9s ease-in-out 0s infinite;
@@ -32,25 +31,23 @@
     }
 }
 
-.vue-skeleton-column{
+.vue-skeleton-column {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-.vue-skeleton-row{
+.vue-skeleton-row {
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
-.vue-skeleton-square-wrap{
-      
+.vue-skeleton-square-wrap {
     justify-content: center;
-   // align-items:center;
     display: flex;
     flex-direction: column;
-    .vue-skeleton-square{
-        width:100%;
+    .vue-skeleton-square {
+        width: 100%;
     }
 }

src/packages/slider/demo.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="tel-input-demo demo-list">
+    <div class="slider-demo demo-list">
         <h4>基本用法</h4>
         <div>
             <nut-cell>
                 <span slot="title"><nut-slider v-model="val1" :range="[0,10]"></nut-slider></span>
             </nut-cell>
             <nut-cell>
-                <span slot="title">Value值：  {{val1}}</span>
+                <span slot="title">Value：  {{val1}}</span>
             </nut-cell>
         </div>
         <h4>拖动时展示标签</h4>
@@ -15,7 +15,7 @@
                 <span slot="title"><nut-slider v-model="val2" :range="[0,100]" :showLabel="true"></nut-slider></span>
             </nut-cell>
             <nut-cell>
-                <span slot="title">Value值：  {{val2}}</span>
+                <span slot="title">Value：  {{val2}}</span>
             </nut-cell>
         </div>
         <h4>一直展示标签</h4>
@@ -24,7 +24,7 @@
                 <span slot="title"><nut-slider v-model="val3" :range="[0,100]" :showLabel="true" :showLabelAlways="true"></nut-slider></span>
             </nut-cell>
             <nut-cell>
-                <span slot="title">Value值：  {{val3}}</span>
+                <span slot="title">Value：  {{val3}}</span>
             </nut-cell>
         </div>
         <h4>两端显式可选取范围</h4>
@@ -33,7 +33,7 @@
                 <span slot="title"><nut-slider v-model="val4" :range="[-50,50]" :showLabel="true" :showRangeTxt="true"></nut-slider></span>
             </nut-cell>
             <nut-cell>
-                <span slot="title">Value值：  {{val4}}</span>
+                <span slot="title">Value：  {{val4}}</span>
             </nut-cell>
         </div>
         <h4>设置分段数（stage=20）</h4>
@@ -42,7 +42,7 @@
                 <span slot="title"><nut-slider v-model="val5" :range="[0,100]" :showLabel="true" :showRangeTxt="true" :stage="5"></nut-slider></span>
             </nut-cell>
             <nut-cell>
-                <span slot="title">Value值：  {{val5}}</span>
+                <span slot="title">Value：  {{val5}}</span>
             </nut-cell>
         </div>
         <h4>自定义Class</h4>
@@ -51,7 +51,7 @@
                 <span slot="title"><nut-slider class="my-slider" v-model="val6" :range="[0,100]"></nut-slider></span>
             </nut-cell>
             <nut-cell>
-                <span slot="title">Value值：  {{val6}}</span>
+                <span slot="title">Value：  {{val6}}</span>
             </nut-cell>
         </div>
     </div>
@@ -74,6 +74,13 @@ export default {
 </script>
 
 <style lang="scss">
+.slider-demo{
+    .nut-cell:first-child{
+        .nut-cell-title{
+            padding:0 30px;
+        }
+    }
+}
 .nut-slider.my-slider {
   .nut-slider-box {
     height: 6px;

src/packages/tabbar/demo.vue

@@ -5,7 +5,7 @@
       <h4>带有tips的文本标签栏</h4>
       <nut-tabbar @tab-switch="tabSwitch2" type="card" :tabbarList="tabList2"></nut-tabbar>
       <h4>固定底部，可跳转页面</h4>
-  		<nut-tabbar @tab-switch="tabSwitch3" :tabbarList="tabList3" :bottom="true">  
+  		<nut-tabbar @tab-switch="tabSwitch3" :tabbarList="tabList3" :bottom="true" class="my-tabbar">  
       </nut-tabbar>
     </div>
 </template>
@@ -134,3 +134,13 @@
   }
 };
 </script>
+<style lang="scss">
+.my-tabbar{
+  padding-top:5px;
+  border-top:1px solid #f2f2f2;
+  .tips{
+    top:-5px;
+    right:10px;
+  }
+}
+</style>

src/packages/tabbar/tabbar.scss

@@ -36,16 +36,18 @@
 	position: relative;
 	.tips{
 		position: absolute;
-		min-width: 18px;
-		min-height: 18px;
+		min-width: 14px;
+		min-height: 14px;
 		display: flex;
 		justify-content:center;
 		align-items: center;
-		padding:0px;
+		padding:0;
 		border:1px solid $border-color-active;
 		border-radius: 50%;
-		top: -12px;
-		right: 0px;
+		top: -10px;
+		right: 0;
+		background:#fff;
+		box-shadow: 0 0 0 1px #fff;
 		transform: translateX(60%);
 		font-size: $font-size-small;
 		color: $primary-color;