udpate

sites/demo/app.js

@@ -3,6 +3,7 @@ import "core-js/modules/es6.array.iterator";
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
+import './view/mixin.vue';
 import Conf from '../../src/config.json';
 import NutUI from '../../src/nutui';
 // import en from '../../src/locales/lang/en-US';

sites/demo/app.vue

@@ -14,10 +14,16 @@ export default {
       inIframe:false
     }
   },
-  created(){
+  mounted(){
     if (window.self != window.top) { 
       this.inIframe = true;
     }
+
+    if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile|MQQBrowser|JUC|Windows Phone)/i)) {
+      window.isMobile = true;
+    } else {
+      window.isMobile = false;
+    }
   }
 }
 </script>

sites/demo/view/mixin.vue

@@ -0,0 +1,26 @@
+<script>
+import Vue from "vue";
+Vue.mixin({
+  data() {
+    return {
+      isMobile: false
+    };
+  },
+  methods: {
+    checkIsMob() {
+      if (
+        window.navigator.userAgent.match(
+          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile|MQQBrowser|JUC|Windows Phone)/i
+        )
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
+  mounted() {
+    this.isMobile = this.checkIsMob();
+  }
+});
+</script>

src/packages/calendar/demo.vue

@@ -1,5 +1,10 @@
 <template>
     <div class="demo-list">
+        <nut-noticebar
+        :closeMode="true"
+        v-if="!isMobile"
+        >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。
+        </nut-noticebar>
         <h4>基本用法</h4>
         <nut-cell :showIcon="true" @click.native="switchPicker('isVisible')">
             <span slot="title"><label>日期选择</label></span>

src/packages/datepicker/demo.vue

@@ -1,170 +1,187 @@
 <template>
-    <div class="demo-list">
-        <h4>基本用法</h4>
-        <div>
-            <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="show-value">{{date ? date : '请选择日期'}}</span>
-                </div>
-            </nut-cell>
-            <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">{{date1 ? date1 : '请选择日期'}}</span>
-                </div>
-            </nut-cell>
-            <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">{{datetime ? datetime : '请选择'}}</span>
-                </div>
-            </nut-cell>
-            <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
-                <span slot="title"><label>时间选择</label></span>
-                <span slot="sub-title">12小时制~~~</span>
-                <div slot="desc" class="selected-option" >
-                    <span class="show-value">{{time ? `${time} ${amOrPm}` : '请选择时间'}}</span>
-                </div>
-            </nut-cell>
-            <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible4')">
-                <span slot="title"><label>时间选择</label></span>
-                <span slot="sub-title">限制开始结束小时~~~</span>
-                <div slot="desc" class="selected-option" >
-                    <span class="show-value">{{time1 ? time1 : '请选择时间'}}</span>
-                </div>
-            </nut-cell>
-            <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible5')">
-                <span slot="title"><label>时间选择</label></span>
-                <span slot="sub-title">分钟数递增步长设置~~~</span>
-                <div slot="desc" class="selected-option" >
-                    <span class="show-value">{{time2 ? time2 : '请选择时间'}}</span>
-                </div>
-            </nut-cell>
+  <div class="demo-list">
+    <nut-noticebar
+      :closeMode="true"
+      v-if="!isMobile"
+    >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
+    <h4>基本用法</h4>
+    <div>
+      <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="show-value">{{date ? date : '请选择日期'}}</span>
         </div>
-        <!-- demo-->
-        <nut-datepicker :is-visible="isVisible"
-            type="date"
-            title="请选择日期" 
-            :is-show-chinese="false"
-            @close="switchPicker('isVisible')"
-            @choose="setChooseValue"
-        >
-        </nut-datepicker>
-         <!-- demo1-->
-        <nut-datepicker :is-visible="isVisible1"
-            title="请选择日期" 
-            type="date"
-            startDate="1991-11-10"
-            endDate="2019-10-05"
-            @close="switchPicker('isVisible1')"
-            @choose="setChooseValue1"
-        >
-        </nut-datepicker>
-         <!-- demo2-->
-        <nut-datepicker :is-visible="isVisible2"
-            title="请选择日期时间" 
-            type="datetime"
-            startDate="1991-11-10"
-            endDate="2019-10-05"
-            defaultValue="2018-11-02 11:08"
-            @close="switchPicker('isVisible2')"
-            @choose="setChooseValue2"
-        >
-        </nut-datepicker>
-        <!-- demo3-->
-        <nut-datepicker :is-visible="isVisible3" 
-            type="time"
-            title="请选择时间" 
-            @close="switchPicker('isVisible3')"
-            @choose="setChooseValue3"
-            :is-use12-hours="true"
-            defaultValue="01:07"
-            :is-am="false"
-        >
-        </nut-datepicker>
-        <!-- demo4-->
-        <nut-datepicker :is-visible="isVisible4"
-            type="time"
-            title="请选择时间" 
-            startHour="8"
-            endHour="18"
-            defaultValue="09:06"
-            @close="switchPicker('isVisible4')"
-            @choose="setChooseValue4"
-        >
-        </nut-datepicker>
-        <!-- demo4-->
-        <nut-datepicker :is-visible="isVisible5"
-            type="time"
-            title="请选择时间" 
-            :minute-step="5"
-            defaultValue="10:30"
-            @close="switchPicker('isVisible5')"
-            @choose="setChooseValue5"
-        >
-        </nut-datepicker>
+      </nut-cell>
+      <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">{{date1 ? date1 : '请选择日期'}}</span>
+        </div>
+      </nut-cell>
+      <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">{{datetime ? datetime : '请选择'}}</span>
+        </div>
+      </nut-cell>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
+        <span slot="title">
+          <label>时间选择</label>
+        </span>
+        <span slot="sub-title">12小时制~~~</span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{time ? `${time} ${amOrPm}` : '请选择时间'}}</span>
+        </div>
+      </nut-cell>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible4')">
+        <span slot="title">
+          <label>时间选择</label>
+        </span>
+        <span slot="sub-title">限制开始结束小时~~~</span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{time1 ? time1 : '请选择时间'}}</span>
+        </div>
+      </nut-cell>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible5')">
+        <span slot="title">
+          <label>时间选择</label>
+        </span>
+        <span slot="sub-title">分钟数递增步长设置~~~</span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{time2 ? time2 : '请选择时间'}}</span>
+        </div>
+      </nut-cell>
     </div>
+    <!-- demo-->
+    <nut-datepicker
+      :is-visible="isVisible"
+      type="date"
+      title="请选择日期"
+      :is-show-chinese="false"
+      @close="switchPicker('isVisible')"
+      @choose="setChooseValue"
+    ></nut-datepicker>
+    <!-- demo1-->
+    <nut-datepicker
+      :is-visible="isVisible1"
+      title="请选择日期"
+      type="date"
+      startDate="1991-11-10"
+      endDate="2019-10-05"
+      @close="switchPicker('isVisible1')"
+      @choose="setChooseValue1"
+    ></nut-datepicker>
+    <!-- demo2-->
+    <nut-datepicker
+      :is-visible="isVisible2"
+      title="请选择日期时间"
+      type="datetime"
+      startDate="1991-11-10"
+      endDate="2019-10-05"
+      defaultValue="2018-11-02 11:08"
+      @close="switchPicker('isVisible2')"
+      @choose="setChooseValue2"
+    ></nut-datepicker>
+    <!-- demo3-->
+    <nut-datepicker
+      :is-visible="isVisible3"
+      type="time"
+      title="请选择时间"
+      @close="switchPicker('isVisible3')"
+      @choose="setChooseValue3"
+      :is-use12-hours="true"
+      defaultValue="01:07"
+      :is-am="false"
+    ></nut-datepicker>
+    <!-- demo4-->
+    <nut-datepicker
+      :is-visible="isVisible4"
+      type="time"
+      title="请选择时间"
+      startHour="8"
+      endHour="18"
+      defaultValue="09:06"
+      @close="switchPicker('isVisible4')"
+      @choose="setChooseValue4"
+    ></nut-datepicker>
+    <!-- demo4-->
+    <nut-datepicker
+      :is-visible="isVisible5"
+      type="time"
+      title="请选择时间"
+      :minute-step="5"
+      defaultValue="10:30"
+      @close="switchPicker('isVisible5')"
+      @choose="setChooseValue5"
+    ></nut-datepicker>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            isVisible: false,
-            isVisible1: false,
-            isVisible2: false,
-            isVisible3: false,
-            isVisible4: false,
-            isVisible5: false,
-            date: null,
-            date1: null,
-            datetime: '2018-11-02 11:08',
-            time: '01:07',
-            time1: '09:06',
-            time2: '10:30',
-            amOrPm: 'PM'
-        };
+  data() {
+    return {
+      isVisible: false,
+      isVisible1: false,
+      isVisible2: false,
+      isVisible3: false,
+      isVisible4: false,
+      isVisible5: false,
+      date: null,
+      date1: null,
+      datetime: "2018-11-02 11:08",
+      time: "01:07",
+      time1: "09:06",
+      time2: "10:30",
+      amOrPm: "PM"
+    };
+  },
+  methods: {
+    switchPicker(param) {
+      this[`${param}`] = !this[`${param}`];
+    },
+    setChooseValue(param) {
+      this.date = param[3];
+    },
+    setChooseValue1(param) {
+      this.date1 = param[3];
+    },
+    setChooseValue2(param) {
+      this.datetime = param[5];
+    },
+    setChooseValue3(param) {
+      this.amOrPm = param[2] == "上午" ? "AM" : "PM";
+      this.time = param[3];
+    },
+    setChooseValue4(param) {
+      this.time1 = param[2];
     },
-    methods: {
-        switchPicker(param) {
-            this[`${param}`] = !this[`${param}`];
-        },
-        setChooseValue(param) {
-            this.date = param[3];
-        },
-        setChooseValue1(param) {
-            this.date1 = param[3];
-        },
-        setChooseValue2(param) {
-            this.datetime = param[5];
-        },
-        setChooseValue3(param) {
-            this.amOrPm = param[2] == '上午' ? 'AM' : 'PM';
-            this.time = param[3];
-        },
-        setChooseValue4(param) {
-            this.time1 = param[2];
-        },
-        setChooseValue5(param) {
-            this.time2 = param[2];
-        }
+    setChooseValue5(param) {
+      this.time2 = param[2];
     }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.btn, .show-value{
-    display: inline-block;
-    margin-left: 20px;
+.btn,
+.show-value {
+  display: inline-block;
+  margin-left: 20px;
 }
-.btn{
-    padding: 5px;
-    border-radius:  $btn-border-radius-small;
-    color: #FFF;
-    background-color: $primary-color;
+.btn {
+  padding: 5px;
+  border-radius: $btn-border-radius-small;
+  color: #fff;
+  background-color: $primary-color;
 }
 </style>

src/packages/noticebar/doc.md

@@ -40,7 +40,7 @@
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | text | 提示的信息 | String | 空
-| mode | 是否启用关闭模式 | Boolean | false
+| closeMode | 是否启用关闭模式 | Boolean | false
 | leftIcon | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | String | 空
 | color | 是否禁用 | String | 空
 | background | 是否禁用 | String | 空

src/packages/noticebar/noticebar.scss

@@ -31,6 +31,7 @@
     }
     .right-icon {
         height: 18px;
+        line-height: 18px;
         min-width: 20px;
         box-sizing: border-box;
         padding-left: 5px;

src/packages/picker/demo.vue

@@ -1,168 +1,224 @@
 <template>
-    <div class="demo-list">
-        <h4>基本用法</h4>
-        <div>
-            <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">{{date ? date : '请选择'}}</div>
-            </nut-cell>
-            <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.stop.prevent="modifyCity">修改为指定的城市</span>
-                    <span class="show-value">{{city ? city : '请选择'}}</span>
-                </div>
-            </nut-cell>
-            <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.stop.prevent="modifyYear">修改为指定的年份</span>
-                    <span class="show-value">{{year ? year : '请选择'}}</span>
-                </div>
-            </nut-cell>
+  <div class="demo-list">
+    <nut-noticebar
+      :closeMode="true"
+      v-if="!isMobile"
+    >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
+    <h4>基本用法</h4>
+    <div>
+      <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">{{date ? date : '请选择'}}</div>
+      </nut-cell>
+      <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.stop.prevent="modifyCity">修改为指定的城市</span>
+          <span class="show-value">{{city ? city : '请选择'}}</span>
         </div>
-         <!-- demo 年月选择(不联动)-->
-        <nut-picker :is-visible="isVisible0" 
-            :list-data="listData0"
-            title="请选择年月"
-            :default-value-data="defaultValueData0"
-            @close="switchPicker('isVisible0')"
-            @confirm="setChooseValue0"
-        >
-        </nut-picker>
-        <!-- demo 城市选择(联动)-->
-        <nut-picker :is-visible="isVisible" 
-            title="请选择城市"
-            :list-data="listData"
-            :default-value-data="defaultValueData"
-            @close="switchPicker('isVisible')"
-            @confirm="setChooseValue"
-            @choose="updateChooseValue"
-            @close-update="closeUpdateChooseValue"
-        >
-        </nut-picker>
-         <!-- demo 年选择-->
-        <nut-picker :is-visible="isVisible1" 
-            :default-value-data="defaultValueData1"
-            :list-data="listData1"
-            @close="switchPicker('isVisible1')"
-            @confirm="setYearValue"
-        >
-        </nut-picker>
+      </nut-cell>
+      <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.stop.prevent="modifyYear">修改为指定的年份</span>
+          <span class="show-value">{{year ? year : '请选择'}}</span>
+        </div>
+      </nut-cell>
     </div>
+    <!-- demo 年月选择(不联动)-->
+    <nut-picker
+      :is-visible="isVisible0"
+      :list-data="listData0"
+      title="请选择年月"
+      :default-value-data="defaultValueData0"
+      @close="switchPicker('isVisible0')"
+      @confirm="setChooseValue0"
+    ></nut-picker>
+    <!-- demo 城市选择(联动)-->
+    <nut-picker
+      :is-visible="isVisible"
+      title="请选择城市"
+      :list-data="listData"
+      :default-value-data="defaultValueData"
+      @close="switchPicker('isVisible')"
+      @confirm="setChooseValue"
+      @choose="updateChooseValue"
+      @close-update="closeUpdateChooseValue"
+    ></nut-picker>
+    <!-- demo 年选择-->
+    <nut-picker
+      :is-visible="isVisible1"
+      :default-value-data="defaultValueData1"
+      :list-data="listData1"
+      @close="switchPicker('isVisible1')"
+      @confirm="setYearValue"
+    ></nut-picker>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            date: null,
-            isVisible0: false,
-            listData0: [
-                ['2010', '2011', '2012', '2013', '2014', '2015', '2016','2017', '2018', '2019', '2020', '2021', '2022', '2023' ],
-                ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
-            ],
-            defaultValueData0:['2012', '2'],
-            city: null,
-            isVisible: false,
-            data:{
-                '北京': ['北京'],
-                '黑龙江': ['哈尔滨','绥化','漠河','大兴安岭','牡丹江','佳木斯','齐齐哈尔','大庆','五大连池'],
-                '江西': ['九江', '南昌', '赣州'],
-                '上海': ['上海'],
-                '重庆': ['重庆'],
-                '内蒙古': ['呼和浩特', '呼和浩特1','呼和浩特2', '呼和浩特3','呼和浩特4', '呼和浩特5','呼和浩特6', '呼和浩特7']
-            },
-            dataSub: {
-                '上海': ['测试1', '测试2'],
-                '北京': ['西城区', '东城区', '大兴区', '朝阳区', '海淀区'],
-                '南昌': ['青山湖区', '西湖区', '宏都中路', '梦时代', '八一广场'],
-                '绥化': ['明水', '拜泉'],
-                '哈尔滨': ['道里区', '道外区']
-            },
-            listData: [
-                [ '上海', '黑龙江', '北京', '重庆', '江西','内蒙古' ]
-            ],
-            defaultValueData: null,
-            year: null,
-            isVisible1: false,
-            listData1: [['2010', '2011', '2012', '2013', '2014', '2015', '2016','2017', '2018' ]],
-            defaultValueData1: null
-        };
-    },
-    created() {
-        this.listData = [...[this.listData[0]], this.data[this.listData[0][0]], this.dataSub[this.data[this.listData[0][0]]] ];
+  data() {
+    return {
+      date: null,
+      isVisible0: false,
+      listData0: [
+        [
+          "2010",
+          "2011",
+          "2012",
+          "2013",
+          "2014",
+          "2015",
+          "2016",
+          "2017",
+          "2018",
+          "2019",
+          "2020",
+          "2021",
+          "2022",
+          "2023"
+        ],
+        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
+      ],
+      defaultValueData0: ["2012", "2"],
+      city: null,
+      isVisible: false,
+      data: {
+        北京: ["北京"],
+        黑龙江: [
+          "哈尔滨",
+          "绥化",
+          "漠河",
+          "大兴安岭",
+          "牡丹江",
+          "佳木斯",
+          "齐齐哈尔",
+          "大庆",
+          "五大连池"
+        ],
+        江西: ["九江", "南昌", "赣州"],
+        上海: ["上海"],
+        重庆: ["重庆"],
+        内蒙古: [
+          "呼和浩特",
+          "呼和浩特1",
+          "呼和浩特2",
+          "呼和浩特3",
+          "呼和浩特4",
+          "呼和浩特5",
+          "呼和浩特6",
+          "呼和浩特7"
+        ]
+      },
+      dataSub: {
+        上海: ["测试1", "测试2"],
+        北京: ["西城区", "东城区", "大兴区", "朝阳区", "海淀区"],
+        南昌: ["青山湖区", "西湖区", "宏都中路", "梦时代", "八一广场"],
+        绥化: ["明水", "拜泉"],
+        哈尔滨: ["道里区", "道外区"]
+      },
+      listData: [["上海", "黑龙江", "北京", "重庆", "江西", "内蒙古"]],
+      defaultValueData: null,
+      year: null,
+      isVisible1: false,
+      listData1: [
+        ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]
+      ],
+      defaultValueData1: null
+    };
+  },
+  created() {
+    this.listData = [
+      ...[this.listData[0]],
+      this.data[this.listData[0][0]],
+      this.dataSub[this.data[this.listData[0][0]]]
+    ];
+  },
+  methods: {
+    switchPicker(param) {
+      this[`${param}`] = !this[`${param}`];
     },
-    methods: {
-        switchPicker(param) {
-            this[`${param}`] = !this[`${param}`];
-        },
 
-        setChooseValue0(chooseData) {
-            this.date = `${chooseData[0]}年${chooseData[1]}月`;
-        },
+    setChooseValue0(chooseData) {
+      this.date = `${chooseData[0]}年${chooseData[1]}月`;
+    },
 
-        setChooseValue(chooseData) {
-            this.city = `${chooseData[0]}-${chooseData[1]}${chooseData[2] ? '-' + chooseData[2] : ''}`;
-        },
+    setChooseValue(chooseData) {
+      this.city = `${chooseData[0]}-${chooseData[1]}${
+        chooseData[2] ? "-" + chooseData[2] : ""
+      }`;
+    },
 
-        setYearValue(chooseData) {
-            this.year = `${chooseData[0]}年`;
-        },
+    setYearValue(chooseData) {
+      this.year = `${chooseData[0]}年`;
+    },
 
-        updateLinkage(self, value, index, chooseValue, cacheValueData) {
-            if (!value) {
-                return false;
-            }
-            switch(index) {
-                case 1: 
-                    let i = this.listData[0].indexOf(value);
-                    this.listData.splice(index, 1, [...this.data[this.listData[0][i]]]);
-                    chooseValue = chooseValue ? chooseValue : this.listData[index][0];
-                    self && self.updateChooseValue(self, index, chooseValue);
-                    this.updateLinkage(self, chooseValue, 2, (cacheValueData && cacheValueData[2] ? cacheValueData[2] : null));
-                    break;
-                case 2: 
-                    let areaData = this.dataSub[value] ? this.dataSub[value] : []; 
-                    this.listData.splice(index, 1, [...areaData]);
-                    chooseValue = chooseValue ? chooseValue : this.listData[index][0];
-                    self && self.updateChooseValue(self, index, chooseValue);
-                    break;
-            }
-        },
+    updateLinkage(self, value, index, chooseValue, cacheValueData) {
+      if (!value) {
+        return false;
+      }
+      switch (index) {
+        case 1:
+          let i = this.listData[0].indexOf(value);
+          this.listData.splice(index, 1, [...this.data[this.listData[0][i]]]);
+          chooseValue = chooseValue ? chooseValue : this.listData[index][0];
+          self && self.updateChooseValue(self, index, chooseValue);
+          this.updateLinkage(
+            self,
+            chooseValue,
+            2,
+            cacheValueData && cacheValueData[2] ? cacheValueData[2] : null
+          );
+          break;
+        case 2:
+          let areaData = this.dataSub[value] ? this.dataSub[value] : [];
+          this.listData.splice(index, 1, [...areaData]);
+          chooseValue = chooseValue ? chooseValue : this.listData[index][0];
+          self && self.updateChooseValue(self, index, chooseValue);
+          break;
+      }
+    },
 
-        updateChooseValue(self, index, value, cacheValueData) {
-            index < 2 && this.updateLinkage(self, value, (index + 1), null);
-        },
+    updateChooseValue(self, index, value, cacheValueData) {
+      index < 2 && this.updateLinkage(self, value, index + 1, null);
+    },
 
-        closeUpdateChooseValue(self, chooseData) {
-            this.updateLinkage(self, chooseData[0], 1, chooseData[1], chooseData);
-        },
+    closeUpdateChooseValue(self, chooseData) {
+      this.updateLinkage(self, chooseData[0], 1, chooseData[1], chooseData);
+    },
 
-        modifyCity() {
-            this.updateLinkage('', '重庆', 1, '重庆');
-            this.defaultValueData = ['重庆', '重庆'];
-        },
+    modifyCity() {
+      this.updateLinkage("", "重庆", 1, "重庆");
+      this.defaultValueData = ["重庆", "重庆"];
+    },
 
-        modifyYear(){
-            this.defaultValueData1 = ['2018'];
-        }
+    modifyYear() {
+      this.defaultValueData1 = ["2018"];
     }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.btn, .show-value{
-    display: inline-block;
-    margin-left: 20px;
+.btn,
+.show-value {
+  display: inline-block;
+  margin-left: 20px;
 }
-.btn{
-    padding: 5px;
-    border-radius:  $btn-border-radius-small;
-    color: #FFF;
-    background-color: #999;
+.btn {
+  padding: 5px;
+  border-radius: $btn-border-radius-small;
+  color: #fff;
+  background-color: #999;
 }
 </style>

src/packages/range/demo.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="range-demo demo-list">
+    <nut-noticebar
+      :closeMode="true"
+      v-if="!isMobile"
+    >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
     <h4>基本用法</h4>
     <div>
       <nut-cell>

src/packages/slider/demo.vue

@@ -1,60 +1,82 @@
 <template>
-    <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>
-            </nut-cell>
-        </div>
-        <h4>拖动时展示标签</h4>
-        <div>
-            <nut-cell>
-                <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>
-            </nut-cell>
-        </div>
-        <h4>一直展示标签</h4>
-        <div>
-            <nut-cell>
-                <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>
-            </nut-cell>
-        </div>
-        <h4>两端显式可选取范围</h4>
-        <div>
-            <nut-cell>
-                <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>
-            </nut-cell>
-        </div>
-        <h4>设置分段数（stage=20）</h4>
-        <div>
-            <nut-cell>
-                <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>
-            </nut-cell>
-        </div>
-        <h4>自定义Class</h4>
-        <div>
-            <nut-cell>
-                <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>
-            </nut-cell>
-        </div>
+  <div class="slider-demo demo-list">
+    <nut-noticebar
+      :closeMode="true"
+      v-if="!isMobile"
+    >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
+    <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>
+      </nut-cell>
     </div>
+    <h4>拖动时展示标签</h4>
+    <div>
+      <nut-cell>
+        <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>
+      </nut-cell>
+    </div>
+    <h4>一直展示标签</h4>
+    <div>
+      <nut-cell>
+        <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>
+      </nut-cell>
+    </div>
+    <h4>两端显式可选取范围</h4>
+    <div>
+      <nut-cell>
+        <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>
+      </nut-cell>
+    </div>
+    <h4>设置分段数（stage=20）</h4>
+    <div>
+      <nut-cell>
+        <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>
+      </nut-cell>
+    </div>
+    <h4>自定义Class</h4>
+    <div>
+      <nut-cell>
+        <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>
+      </nut-cell>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -69,17 +91,20 @@ export default {
       val6: 0
     };
   },
-  methods: {}
+  methods: {},
+  mounted() {
+    this.isMobile = window.isMobile;
+  }
 };
 </script>
 
 <style lang="scss">
-.slider-demo{
-    .nut-cell:first-child{
-        .nut-cell-title{
-            padding:0 30px;
-        }
+.slider-demo {
+  .nut-cell:first-child {
+    .nut-cell-title {
+      padding: 0 30px;
     }
+  }
 }
 .nut-slider.my-slider {
   .nut-slider-box {

src/packages/tab/doc.md

@@ -1,4 +1,4 @@
-# tab 标签页
+# Tab 选项卡
 
 ## 基本用法