首页 发现 帮助
登录
githab
/
nutui
3
0
派生 0
文件
浏览代码

Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

360BUYAD\wangyue92 7 年之前
父节点
de0254f7d1 2969d8bbdb
当前提交
84143f0eb1
共有 25 个文件被更改，包括 751 次插入 和 445 次删除
分列视图 显示文件统计
  1. 1 1
      README.md
  2. 8 5
      docs/intro.md
  3. 55 11
      docs/start.md
  4. 2 5
      scripts/mdToVue.js
  5. 2 2
      sites/demo/index.html
  6. 1 1
      sites/demo/view/index.vue
  7. 28 11
      sites/doc/app.vue
  8. 3 3
      sites/doc/asset/css/style-blue.scss
  9. 1 1
      sites/doc/index.html
  10. 291 272
      sites/doc/index.vue
  11. 16 16
      src/config.json
  12. 0 5
      src/nutui.js
  13. 27 0
      src/packages/calendar/__test__/calendar.spec.js
  14. 1 1
      src/packages/calendar/calendar.vue
  15. 4 3
      src/packages/calendar/demo.vue
  16. 3 3
      src/packages/calendar/doc.md
  17. 61 0
      src/packages/datepicker/__test__/datapicker.spec.js
  18. 1 1
      src/packages/noticebar/doc.md
  19. 72 44
      src/packages/picker/__test__/picker.spec.js
  20. 55 0
      src/packages/range/__test__/range.spec.js
  21. 1 0
      src/packages/range/range.vue
  22. 43 0
      src/packages/stepper/__test__/stepper.spec.js
  23. 16 6
      src/packages/stepper/demo.vue
  24. 15 7
      src/packages/stepper/stepper.vue
  25. 44 47
      src/packages/toast/__test__/toast.spec.js

+ 1 - 1
README.md
查看文件 

@@ -1,5 +1,5 @@
 
 # NutUI 2
 
-![npm version](https://img.shields.io/npm/v/@nutui/nutui.svg)  [![Build Status](https://api.travis-ci.org/jdf2e/nutui.svg?branch=v2)](https://github.com/jdf2e/nutui/) [![Coverage Status](https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=master)](https://coveralls.io/github/jdf2e/nutui?branch=master) ![license](https://img.shields.io/npm/l/@nutui/nutui.svg)
 
+![npm version](https://img.shields.io/npm/v/@nutui/nutui.svg)  [![Build Status](https://api.travis-ci.org/jdf2e/nutui.svg?branch=master)](https://github.com/jdf2e/nutui/) [![Coverage Status](https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=master)](https://coveralls.io/github/jdf2e/nutui?branch=master) ![license](https://img.shields.io/npm/l/@nutui/nutui.svg)
 
  
 一套移动端轻量级Vue组件库

+ 8 - 5
docs/intro.md
查看文件 

@@ -1,9 +1,10 @@
 
-<div style="text-align:center; margin:10px 0 30px;">
 
-    <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>
 
+# NutUI 2
 
+
 
+NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。
 
 
+<div style="margin:30px 0;">
 
+    <img src="http://img14.360buyimg.com/uba/jfs/t1/8543/6/11560/22014/5c2c6136E8023ac0a/6abbd9de10999c48.png" width="150" alt="NutUI">
 
+</div>
 
 
 ## 特性
 
 
@@ -31,6 +32,8 @@
 
 > 你还可以订阅： https://github.com/jdf2e/nutui/releases.atom 来获得稳定版发布的通知。
 
 
 ## 链接
 
+* [Vue官方文档](http://cn.vuejs.org/)
 
+* [Webpack](http://webpack.github.io/)
 
 * [意见反馈](https://github.com/jdf2e/nutui/issues)
 
 * [更新日志](https://github.com/jdf2e/nutui/releases)
 
 * [模板工程命令行工具(Gaea-cli)](https://github.com/jdf2e/Gaea4)

+ 55 - 11
docs/start.md
查看文件 

@@ -1,11 +1,12 @@
 
 # 快速上手
 
 
 ## 推荐工程
 
-我们提供一个命令行工具 [Gaea-cli](https://www.npmjs.com/package/gaea-cli) ，可用来快速生成一个已经内置了本组件库的基于 Webpack 的 Vue 项目工程。基于这个工程开发项目，可省去大量配置和调试环境的时间，也可略过下面组件库安装使用部分内容直接进入开发阶段。
 
+
 
+我们提供一个命令行工具 [Gaea CLI](https://www.npmjs.com/package/gaea-cli) ，可用来快速生成一个已经内置了本组件库的基于 Webpack 的 Vue 项目工程。基于这个工程开发项目，可省去大量配置和调试环境的时间，也可略过下面组件库安装使用部分内容直接进入开发阶段。
 
 
 ## 安装
 
 
-推荐使用 NPM 或 YARN 安装
 
+* 通过 NPM 或 YARN 安装（推荐）
 
 
 #### NPM
 
 ```bash
 
@@ -20,11 +21,11 @@ yarn add @nutui/nutui
 
 
 > 默认安装最新版，如需使用 1.x 版本，请指定版本号，如：  `npm i @nutui/nutui@1.3.2 -S`
 
 
-#### 页面引入
 
+* 页面直接引用
 
 
-在页面中使用 script 和 link 标签直接引入文件，并使用全局变量 nutui。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
 
+在页面中使用 script 和 link 标签直接引入文件，**NutUI** 将会自动注册。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
 
 
-当然你也可以通过CDN的方式引入。
 
+当然你也可以通过 CDN 的方式引入， 可以在 **jsdelivr** 和 **unpkg** 等公共 CDN 上获取到 NutUI。我们推荐链接到一个你可以手动更新的指定版本号。
 
 
 ```html
 
 <!-- 引入样式 -->
 
@@ -35,8 +36,51 @@ yarn add @nutui/nutui
 
 <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.js"></script>
 
 ```
 
 
+CDN 引入示例
 
+
 
+```html
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <!-- 引入样式 -->
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.css">
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <nut-button @click="showDialog">
 
+            Button
 
+        </nut-button>
 
+    </div>
 
+
 
+    <!-- 引入Vue -->
 
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
 
+    <!-- 引入NutUI组件库 -->
 
+    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            methods: {
 
+                showDialog() {
 
+                    this.$dialog({
 
+                        title: "确定删除此订单？",
 
+                        content: "删除后将从你的记录里消失，无法找回"
 
+                    });
 
+                }
 
+            }
 
+        });
 
+    </script>
 
+</body>
 
+</html>
 
+```
 
+
 
 > 在页面中直接引入，将无法使用 **主题换肤** 等功能。我们推荐使用 *NPM* 或 *YARN* 方式安装，不推荐在页面中直接引入的用法
 
 
+* 通过 **Vue CLI** 图形化界面安装
 
+
 
+如果你的项目是使用 [Vue CLI](https://cli.vuejs.org/zh/) 脚手架搭建，那么你还可以通过 **Vue CLI** 提供的图形化界面安装 **NutUI** ：在图形化界面的 **依赖** 界面，点击右上角 **安装依赖** 按钮，搜索 **@nutui/nutui** 安装即可。
 
+
 
 ## 加载示例
 
 
 ```javascript
 
@@ -53,12 +97,12 @@ NutUI.install(Vue);
 
 
 以下两种方式都可以实现只加载用到的组件，从而减少加载的文件体积。
 
 
-### 1. 使用 webpack 插件 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 
+### 1. 使用 webpack 插件 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** (推荐)
 
 
-首先安装 **@nutui/separate-import** 插件
 
+首先安装 **@nutui/babel-plugin-separate-import** 插件
 
 
 ```bash
 
-npm i @nutui/separate-import -D
 
+npm i @nutui/babel-plugin-separate-import -D
 
 ```
 
 
 然后配置一下 **.babelrc** 文件
 
@@ -72,7 +116,7 @@ npm i @nutui/separate-import -D
 
   ]
 
 }
 
 ```
 
-> style 选项值为 "css" 时加载组件对应的css文件，为 "scss" 时加载对应的scss文件。无style选项时，不自动加载样式。
 
+> style 选项值为 "css" 时加载组件对应的css文件，为 "scss" 时加载对应的scss文件。无style选项时，不自动加载样式文件。
 
 
 接下来，我们就可以在项目里只引入用到的组件了。默认情况下，样式也无需单独引入。插件会自动将代码转换为方式二的手动引入方式。
 
 
@@ -90,7 +134,7 @@ Picker.install(Vue);
 
 import Vue from 'vue';
 
 import Button from '@nutui/nutui/dist/packages/button/button.js';  // 加载构建后的JS
 
 import '@nutui/nutui/dist/packages/button/button.css';  //加载构建后的CSS
 
-//主题定制等场景需要加载SCSS
 
+//主题定制等场景需要加载SCSS,而不是构建后的CSS
 
 //import '@nutui/nutui/dist/packages/button/button.scss'; 
 
 Button.install(Vue);
 
@@ -103,7 +147,7 @@ Button.install(Vue);
 
 <nut-switch :active="true" size="base"></nut-switch>
 
 ```
 
 
-2.组件 css 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 webpack 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、postcss 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件
 
+2.组件 css 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 webpack 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、postcss 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件等
 
 
 3.组件具体用法以文档为准

+ 2 - 5
scripts/mdToVue.js
查看文件 

@@ -1,7 +1,7 @@
 
 const fs = require('fs');
 
 var path = require('path');
 
 let marked = require('marked');
 
-let version =require("../src/config.json") ;
 
+let package =require("../package.json") ;
 
 if (!marked) {
 
     console.log('you need npm i marked -D!');
 
 }
 
@@ -87,10 +87,7 @@ function insert(sorce) {
 
 ///创建一个空文件
 
 function createdFile(output, sorce,ishasCode) {
 
     var pathSrc = output;
 
-    if(sorce.indexOf('latest')>0){
 
-        console.log(version.version,'版本号')
 
-        sorce = sorce.replace('latest',version.version)
 
-    }
 
+    sorce = sorce.replace(/@latest/g,'@'+package.version)
 
     if(!ishasCode){       
         var res = insert(sorce);
 
     }   else{

+ 2 - 2
sites/demo/index.html
查看文件 

@@ -29,8 +29,8 @@
 
     var shareOption = {
 
       iconUrl: 'http://nutui.jd.com/img/logo_share.png',
 
       url: 'http://nutui.jd.com/demo.html#/index',
 
-      title: '移动端Vue组件库 NutUI 2.0',
 
-      desc: '一套京东风格的轻量级移动端Vue组件库'
 
+      title: '轻量级移动端Vue组件库 - NutUI 2.0',
 
+      desc: '京东风格的Vue组件库'
 
     };
 
 
     try {

+ 1 - 1
sites/demo/view/index.vue
查看文件 

@@ -2,7 +2,7 @@
 
   <div class="demo-list-wrapper">
 
     <h1 class="logo"></h1>
 
     <div class="version">NutUI 2.0</div>
 
-    <p>NutUI 是一套轻量级移动端Vue组件库。</p>
 
+    <p>NutUI 是一套京东风格的移动端Vue组件库</p>
 
     <div
 
       :class="['demo-list-box',{'unfold':foldStatus[item]}]"
 
       v-for="item in sorts"

+ 28 - 11
sites/doc/app.vue
查看文件 

@@ -51,10 +51,10 @@
 
             <div class="bg">
 
               <img src="./asset/css/i/phtitle.png" alt>
 
               <div>
 
-                <input type="text" readonly :value="'http://nutui.jd.com/demo.html#/'+routerName+'?ver='+version">
 
+                <input type="text" readonly :value="'http://nutui.jd.com/demo.html#/'+routerName">
 
               </div>
 
             </div>
 
-            <iframe :src="'/demo.html#/'+routerName+'?ver='+version"></iframe>
 
+            <iframe :src="'//nutui.jd.com/demo.html#/'+routerName+'?ver='+version"></iframe>
 
           </div>
 
         </div>
 
       </div>
 
@@ -362,12 +362,12 @@ export default {
 
   .showPhone {
 
     padding-right: 25px;
 
     //margin-left: 20px;
 
-    width: 375px;
 
+    width: 360px;
 
     flex-shrink: 0;
 
     position: relative;
 
     .ph {
 
-      height: 681px;
 
-      width: 389px;
 
+      height: 611px;
 
+      width: 360px;
 
       position: fixed;
 
       border-radius: 55px;
 
       top: 100px;
 
@@ -377,23 +377,23 @@ export default {
 
       box-shadow: 0px 0px 9px 5px #eee;
 
       iframe {
 
         border: none;
 
-        width: 389px;
 
-        height: 612px;
 
-        padding: 5px 5px 5px 5px;
 
+        width: 360px;
 
+        height: 542px;
 
+        padding: 0;
 
         box-sizing: border-box;
 
       }
 
     }
 
     .bg {
 
-      width: 389px;
 
+      width: 360px;
 
       height: 64px;
 
       padding-top: 5px;
 
       background: linear-gradient(rgba(55, 55, 55, 0.98), #545456);
 
       text-align: center;
 
       img {
 
-        width: 350px;
 
+        width: 90%;
 
       }
 
       input {
 
-        width: 350px;
 
+        width: 90%;
 
         height: 28px;
 
         line-height: 28px;
 
         color: #fff;
 
@@ -493,4 +493,21 @@ body {
 
     }
 
   }
 
 }
 
+@media screen and (max-width: 1500px) {
 
+  .demo-wrapper {
 
+    .showPhone{
 
+      width:320px;
 
+      .ph{
 
+        width:320px;
 
+        height: 581px;
 
+        &>div,iframe{
 
+          width:320px;
 
+        }
 
+        iframe{
 
+          height:512px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
 </style>

+ 3 - 3
sites/doc/asset/css/style-blue.scss
查看文件 

@@ -2,9 +2,9 @@
 
     margin: 0 0 0 60px;
 
     position: relative;
 
     h1 {
 
-        font-size: 28px;
 
+        font-size: 30px;
 
         font-weight: 700;
 
-        margin: 10px 0;
 
+        margin: 10px 0 20px;
 
         color: #333333;
 
     }
 
     p {
 
@@ -70,7 +70,7 @@
 
     }
 
     ul {
 
         border-radius: 3px;
 
-        padding: 5px 20px;
 
+        padding: 5px 20px 5px 0;
 
         list-style: none;
 
         p {
 
             margin: 0;

+ 1 - 1
sites/doc/index.html
查看文件 

@@ -5,7 +5,7 @@
 
   <meta charset="utf-8" />
 
   <meta content="telephone=no" name="format-detection" />
 
   <link rel="shortcut icon" href="/favicon.ico">
 
-  <title>NutUI 2.0 - 一款轻量级移动端Vue组件库</title>
 
+  <title>NutUI 2.0 - 移动端Vue组件库</title>
 
   <script src="//misc.360buyimg.com/felibs/vue/2.5.16/vue.min.js"></script>
 
 </head>

+ 291 - 272
sites/doc/index.vue
查看文件 

@@ -1,80 +1,84 @@
 
 <template>
 
   <div class="container">
 
     <template v-if="notWebgl">
 
-      <div class="css-animation" >
 
-				<div class="blue-bg">
 
-					<span class="phone"></span>
 
-					<span class="goods"></span>
 
-					<span class="nut"></span>
 
-					<span class="people"></span>
 
-					<span class="flower">
 
-						<span class="leaf_2"></span>
 
-						<span class="leaf_1"></span>
 
-						<span class="leaf_4"></span>
 
-						<span class="leaf_3"></span>
 
-					
-						<span class="flowerpot"></span>
 
-
 
-					</span>
 
-					<span class="fengche"></span>
 
-				</div>
 
-
 
-			</div>
 
+      <div class="css-animation">
 
+        <div class="blue-bg">
 
+          <span class="phone"></span>
 
+          <span class="goods"></span>
 
+          <span class="nut"></span>
 
+          <span class="people"></span>
 
+          <span class="flower">
 
+            <span class="leaf_2"></span>
 
+            <span class="leaf_1"></span>
 
+            <span class="leaf_4"></span>
 
+            <span class="leaf_3"></span>
 
+            <span class="flowerpot"></span>
 
+          </span>
 
+          <span class="fengche"></span>
 
+        </div>
 
+      </div>
 
     </template>
 
     <template v-else>
 
       <canvas id="output"></canvas>
 
     </template>
 
-     <div class="wrapper">
 
-        <div class="header">
 
-          <span class="logo">NUTUI
 
-            <s></s>
 
-          </span>
 
-          <search/>
 
-
 
-          <div class="menu">
 
-            <ul>
 
-              <li>
 
-                <a href="#/doc">指南</a>
 
-              </li>
 
-              <li>
 
-                <a href="#/ActionSheet">组件</a>
 
-              </li>
 
-              <li>
 
-                <a href="/demo.html#/index" class="qrcode top-qr" target="_blank">示例
 
-                  <a>
 
-                    <span>请使用手机扫码体验</span>
 
-                    <img
 
-                      src="http://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png"
 
-                      alt
 
-                    >
 
-                  </a>
 
+    <div class="wrapper">
 
+      <div class="header">
 
+        <span class="logo">
 
+          NUTUI
 
+          <s></s>
 
+        </span>
 
+        <search/>
 
+
 
+        <div class="menu">
 
+          <ul>
 
+            <li>
 
+              <a href="#/doc">指南</a>
 
+            </li>
 
+            <li>
 
+              <a href="#/ActionSheet">组件</a>
 
+            </li>
 
+            <li>
 
+              <a href="/demo.html#/index" class="qrcode top-qr" target="_blank">
 
+                示例
 
+                <a>
 
+                  <span>请使用手机扫码体验</span>
 
+                  <img
 
+                    src="http://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png"
 
+                    alt
 
+                  >
 
                 </a>
 
-              </li>
 
-            </ul>
 
-            <select @change="openwindow">
 
-              <option value="2">2.X</option>
 
-              <option value="1">1.X</option>
 
-            </select>
 
-            <a href="https://github.com/jdf2e/nutui" title="Github" target="_blank" class="github-icon">github</a>
 
-          </div>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+          <select @change="openwindow">
 
+            <option value="2">2.X</option>
 
+            <option value="1">1.X</option>
 
+          </select>
 
+          <a
 
+            href="https://github.com/jdf2e/nutui"
 
+            title="Github"
 
+            target="_blank"
 
+            class="github-icon"
 
+          >github</a>
 
         </div>
 
-        <div class="content">
 
-          <div class="mouseDiv" id="mouseDiv"></div>
 
-          <p class="title">NutUI</p>
 
-          <p class="sub-title">一套轻量级移动端Vue / 微信小程序组件库</p>
 
-          <a href="#/doc" class="blue-btn">开始使用</a>
 
-          <a href="javascript:;" class="qrcode btn">
 
-            扫码体验
 
-            <a>
 
-              <span>请使用手机扫码体验</span>
 
-              <img
 
-                src="http://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png"
 
-                alt
 
-              >
 
-            </a>
 
+      </div>
 
+      <div class="content">
 
+        <div class="mouseDiv" id="mouseDiv"></div>
 
+        <p class="title">NutUI</p>
 
+        <p class="sub-title">一套京东风格的轻量级移动端Vue组件库</p>
 
+        <a href="#/doc" class="blue-btn">开始使用</a>
 
+        <a href="javascript:;" class="qrcode btn">
 
+          扫码体验
 
+          <a>
 
+            <span>请使用手机扫码体验</span>
 
+            <img
 
+              src="http://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png"
 
+              alt
 
+            >
 
           </a>
 
-        </div>
 
+        </a>
 
       </div>
 
+    </div>
 
   </div>
 
 </template>
 
 
@@ -82,17 +86,17 @@
 
 // import * as THREE from "three";
 
 // import TWEEN from "@tweenjs/tween.js";
 
 // import Detector from "./asset/js/Detector.js";
 
-import search from './search.vue';
 
+import search from "./search.vue";
 
 export default {
 
   name: "frontCover",
 
   data() {
 
     return {
 
       timer: null,
 
       notWebgl: true,
 
-      isSmall:false
 
+      isSmall: false
 
     };
 
   },
 
-  components:{
 
+  components: {
 
     search
 
   },
 
   methods: {
 
@@ -100,7 +104,7 @@ export default {
 
       if (val.target.value == 1) {
 
         window.location.href = " http://nutui.jd.com/1x/";
 
       }
 
-    },
 
+    }
 
     // threeAnimation() {
 
     //   this.timer = setTimeout(() => {
 
     //     //获取视窗宽高
 
@@ -463,12 +467,11 @@ export default {
 
   created() {},
 
   mounted() {
 
     this.$nextTick(() => {
 
-      
       //获取浏览器宽度
 
       let windowWidth = document.body.clientWidth;
 
-     if(windowWidth<=990){
 
+      if (windowWidth <= 990) {
 
         this.isSmall = true;
 
-     }
 
+      }
 
 
       this.notWebgl = true;
 
       // if (!Detector.webgl) {
 
@@ -483,58 +486,57 @@ export default {
 
 };
 
 </script>
 
 <style lang="scss" scoped>
 
-
 
 @keyframes fadeInLeft {
 
-	from {
 
-		opacity: 0;
 
-		transform: translate3d(-100%,0,0);
 
-	}
 
-	to{
 
-		opacity: 1;
 
-		transform: translate3d(0,0,0);
 
-	}
 
+  from {
 
+    opacity: 0;
 
+    transform: translate3d(-100%, 0, 0);
 
+  }
 
+  to {
 
+    opacity: 1;
 
+    transform: translate3d(0, 0, 0);
 
+  }
 
 }
 
 @keyframes leafShake {
 
-	form,to{
 
-		transform:rotate(0);
 
-		transform-origin: bottom;
 
-	}
 
-	20%,
 
-	60%{
 
-		transform: rotate(2deg);
 
-		transform-origin: bottom;
 
-	}
 
-	40%,
 
-	80%{
 
-		transform: rotate(-2deg);
 
-		transform-origin: bottom;
 
-	}
 
-
 
+  form,
 
+  to {
 
+    transform: rotate(0);
 
+    transform-origin: bottom;
 
+  }
 
+  20%,
 
+  60% {
 
+    transform: rotate(2deg);
 
+    transform-origin: bottom;
 
+  }
 
+  40%,
 
+  80% {
 
+    transform: rotate(-2deg);
 
+    transform-origin: bottom;
 
+  }
 
 }
 
 
 @keyframes fadeInRight {
 
-	from {
 
-		opacity: 0;
 
-		transform: translate3d(100%,0,0);
 
-	}
 
-	to{
 
-		opacity: 1;
 
-		transform: translate3d(0,0,0);
 
-	}
 
+  from {
 
+    opacity: 0;
 
+    transform: translate3d(100%, 0, 0);
 
+  }
 
+  to {
 
+    opacity: 1;
 
+    transform: translate3d(0, 0, 0);
 
+  }
 
 }
 
 
-@keyframes fadeIn{
 
-	from {
 
-		opacity: 0;
 
-	}
 
-	to {
 
-		opacity: 1;
 
-	}
 
+@keyframes fadeIn {
 
+  from {
 
+    opacity: 0;
 
+  }
 
+  to {
 
+    opacity: 1;
 
+  }
 
 }
 
 
-.container{
 
+.container {
 
   position: relative;
 
-  min-width:1210px;
 
+  min-width: 1260px;
 
 }
 
 .wrapper {
 
   position: absolute;
 
@@ -549,8 +551,8 @@ export default {
 
     width: 100%;
 
     height: 64px;
 
     display: flex;
 
-		 align-items:center;
 
-     position: relative;
 
+    align-items: center;
 
+    position: relative;
 
   }
 
   .menu {
 
     position: absolute;
 
@@ -566,9 +568,9 @@ export default {
 
       line-height: 64px;
 
       cursor: pointer;
 
       color: #fff;
 
-      & > a{
 
-        display:block;
 
-        height:100%;
 
+      & > a {
 
+        display: block;
 
+        height: 100%;
 
         line-height: 64px;
 
       }
 
       a {
 
@@ -608,7 +610,7 @@ export default {
 
     position: relative;
 
     s {
 
       background: url(./asset/css/i/nut.png) 0 0 no-repeat;
 
-      background-size:contain;
 
+      background-size: contain;
 
       height: 46px;
 
       width: 120px;
 
       display: inline-block;
 
@@ -646,7 +648,7 @@ export default {
 
     }
 
   }
 
   .content {
 
-    padding:15% 0 0 8.8%;
 
+    padding: 15% 0 0 8.8%;
 
     z-index: 999;
 
     position: relative;
 
     .mouseDiv {
 
@@ -659,37 +661,46 @@ export default {
 
       margin-left: -250px;
 
       margin-top: -50px;
 
     }
 
-    .title{
 
+    .title {
 
       font-size: 42px;
 
-      color:#333;
 
+      color: #333;
 
       font-weight: bold;
 
-      animation:  fadeInLeft 1s both;
 
+      animation: fadeInLeft 1s both;
 
     }
 
-    .sub-title{
 
-      font-size:24px;
 
-      color:#333;
 
-      padding-top:30px;
 
-      padding-bottom:100px;
 
-      animation:  fadeInLeft 1s both 0.5s;
 
+    .sub-title {
 
+      font-size: 24px;
 
+      color: #333;
 
+      padding-top: 30px;
 
+      padding-bottom: 100px;
 
+      animation: fadeInLeft 1s both 0.5s;
 
     }
 
-    .btn,.blue-btn{
 
-      border:1px solid #5396ff;
 
-      background:#fff;
 
-      color:#5396ff;
 
-      width:130px;
 
-      height:40px;
 
-      line-height:40px;
 
+    .btn,
 
+    .blue-btn {
 
+      border: 1px solid rgba(83,150,255,1);
 
+      background: #fff;
 
+      color: rgba(83,150,255,1);
 
+      width: 130px;
 
+      height: 40px;
 
+      line-height: 40px;
 
       text-align: center;
 
       display: inline-block;
 
-      font-size:14px;
 
+      font-size: 14px;
 
       text-decoration: none;
 
       border-radius: 20px;
 
-      animation:  fadeInLeft 1s both 1.2s;
 
+      animation: fadeInLeft 1s both 1.2s;
 
+      &:hover,&:active{
 
+        border-color:rgba(83,150,255,.8);
 
+        color: rgba(83,150,255,.8);
 
+      }
 
     }
 
     .blue-btn {
 
       color: #fff;
 
-      background: #5396ff;
 
+      background: rgba(83,150,255,1);
 
       margin-right: 40px;
 
+      &:hover,&:active{
 
+        background: rgba(83,150,255,.8);
 
+        color: rgba(255,255,255,.8);
 
+      }
 
     }
 
   }
 
   .qrcode {
 
@@ -700,7 +711,7 @@ export default {
 
     &.top-qr {
 
       a {
 
         left: -65px;
 
-        top:60px;
 
+        top: 60px;
 
       }
 
     }
 
     a {
 
@@ -746,136 +757,144 @@ export default {
 
   }
 
 }
 
 
-.css-animation{
 
-	position: absolute;
 
-  top:0;
 
-  right:0;
 
-	transform: scale3d(1.06,1.06,1.06);
 
-
 
-	.blue-bg{
 
-		background:url('//img12.360buyimg.com/uba/jfs/t1/22824/40/3136/6504/5c24a3f4E76fdafde/802d02d1ec5d3d55.png') 0 0 no-repeat;
 
-		height:757px;
 
-		width:963px;
 
-		background-size:100% 100%;
 
-		position: absolute;
 
-		right:0;
 
-		top:0;
 
-
 
-		.phone{
 
-			background:url('//img10.360buyimg.com/uba/jfs/t1/19171/19/3175/23282/5c24a440Ee2a94261/45321aeaf173f237.png') 0 0 no-repeat;
 
-			height:419px;
 
-			width:227px;
 
-			background-size:100% 100%;
 
-			position:absolute;
 
-			right:350px;
 
-			top:250px;
 
-			display: inline-block;
 
-		}
 
-		.goods{
 
-			background:url('//img14.360buyimg.com/uba/jfs/t1/21115/40/3224/5652/5c24a411E03ef9eb6/83781b97e59da905.png') 0 0 no-repeat;
 
-			height:165px;
 
-			width:117px;
 
-			background-size:100% 100%;
 
-			position:absolute;
 
-			display:inline-block;
 
-			top:500px;
 
-			right:710px;
 
-		}
 
-		.people{
 
-			background:url('//img12.360buyimg.com/uba/jfs/t1/9330/16/10894/8662/5c24a42aE708692b3/14455d20eca1ccee.png');
 
-			width:184px;
 
-			height:334px;
 
-			background-size:100% 100%;
 
-			position:absolute;
 
-			top:334px;
 
-			right:500px;
 
-		}
 
-		.flower{
 
-			position: absolute;
 
-			right:195px;
 
-			top:510px;
 
-			height:160px;
 
-			width:208px;
 
-			.leaf_1{
 
-				position: absolute;
 
-				background:url(./asset/css/i/leaf_1.png) 0 0 no-repeat;
 
-				height:113px;
 
-				width:60px;
 
-				background-size:100% 100%;
 
-				bottom:36px;
 
-				right:79px;
 
-				animation:leafShake 8s infinite ;
 
-
 
-			}
 
-			.leaf_2{
 
-				position: absolute;
 
-				background:url(./asset/css/i/leaf_2.png) 0 0 no-repeat;
 
-				height:64px;
 
-				width:66px;
 
-				background-size:100% 100%;
 
-				bottom:36px;
 
-				right:35px;
 
-				animation:leafShake 8s infinite 0.6s;
 
-				
-
 
-			}
 
-			.leaf_3{
 
-				
-				position: absolute;
 
-				background:url(./asset/css/i/leaf_3.png) 0 0 no-repeat;
 
-				height:28px;
 
-				width:64px;
 
-				background-size:100% 100%;
 
-				bottom:38px;
 
-				right:42px;
 
-				//animation:leafShake 3s infinite 0.5s;
 
-			}
 
-			.leaf_4{
 
-				position: absolute;
 
-				background:url(./asset/css/i/leaf_4.png) 0 0 no-repeat;
 
-				height:113px;
 
-				width:99px;
 
-				background-size:100% 100%;
 
-				bottom:38px;
 
-				left:2px;
 
-				//animation:leafShake 3s infinite 0.2s;
 
-			}
 
-			.flowerpot{
 
-				position: absolute;
 
-				background:url(./asset/css/i/flowerpot.png) 0 0 no-repeat;
 
-				height:42px;
 
-				width:130px;
 
-				bottom:0;
 
-				right:5px;
 
-				background-size:100% 100%;
 
-				
-
 
-			}
 
-		}
 
-		.nut{
 
-			position: absolute;
 
-			height:46px;
 
-			width:46px;
 
-			background:url(./asset/css/i/nut-icon.png) 0 0 no-repeat;
 
-			background-size:100% 100%;
 
-			top:308px;
 
-			right:493px;
 
-			animation:fadeInRight 2s both;
 
-		
-		
-		}
 
-		.fengche{
 
-			position:absolute;
 
-			background:url(./asset/css/i/fengche.png) 0 0 no-repeat;
 
-			background-size:100% 100%;
 
-			width:679px;
 
-			height:476px;
 
-			top:195px;
 
-			right:180px;
 
-			animation: fadeIn 1s both 2s;
 
-
 
-		}
 
-	}
 
-}
 
+.css-animation {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  transform: scale3d(1.06, 1.06, 1.06);
 
+
 
+  .blue-bg {
 
+    background: url("//img12.360buyimg.com/uba/jfs/t1/22824/40/3136/6504/5c24a3f4E76fdafde/802d02d1ec5d3d55.png")
 
+      0 0 no-repeat;
 
+    height: 757px;
 
+    width: 963px;
 
+    background-size: 100% 100%;
 
+    position: absolute;
 
+    right: 0;
 
+    top: 0;
 
 
+    .phone {
 
+      background: url("//img10.360buyimg.com/uba/jfs/t1/19171/19/3175/23282/5c24a440Ee2a94261/45321aeaf173f237.png")
 
+        0 0 no-repeat;
 
+      height: 419px;
 
+      width: 227px;
 
+      background-size: 100% 100%;
 
+      position: absolute;
 
+      right: 350px;
 
+      top: 250px;
 
+      display: inline-block;
 
+    }
 
+    .goods {
 
+      background: url("//img14.360buyimg.com/uba/jfs/t1/21115/40/3224/5652/5c24a411E03ef9eb6/83781b97e59da905.png")
 
+        0 0 no-repeat;
 
+      height: 165px;
 
+      width: 117px;
 
+      background-size: 100% 100%;
 
+      position: absolute;
 
+      display: inline-block;
 
+      top: 500px;
 
+      right: 710px;
 
+    }
 
+    .people {
 
+      background: url("//img12.360buyimg.com/uba/jfs/t1/9330/16/10894/8662/5c24a42aE708692b3/14455d20eca1ccee.png");
 
+      width: 184px;
 
+      height: 334px;
 
+      background-size: 100% 100%;
 
+      position: absolute;
 
+      top: 334px;
 
+      right: 500px;
 
+    }
 
+    .flower {
 
+      position: absolute;
 
+      right: 195px;
 
+      top: 510px;
 
+      height: 160px;
 
+      width: 208px;
 
+      .leaf_1 {
 
+        position: absolute;
 
+        background: url(./asset/css/i/leaf_1.png) 0 0 no-repeat;
 
+        height: 113px;
 
+        width: 60px;
 
+        background-size: 100% 100%;
 
+        bottom: 36px;
 
+        right: 79px;
 
+        animation: leafShake 8s infinite;
 
+      }
 
+      .leaf_2 {
 
+        position: absolute;
 
+        background: url(./asset/css/i/leaf_2.png) 0 0 no-repeat;
 
+        height: 64px;
 
+        width: 66px;
 
+        background-size: 100% 100%;
 
+        bottom: 36px;
 
+        right: 35px;
 
+        animation: leafShake 8s infinite 0.6s;
 
+      }
 
+      .leaf_3 {
 
+        position: absolute;
 
+        background: url(./asset/css/i/leaf_3.png) 0 0 no-repeat;
 
+        height: 28px;
 
+        width: 64px;
 
+        background-size: 100% 100%;
 
+        bottom: 38px;
 
+        right: 42px;
 
+        //animation:leafShake 3s infinite 0.5s;
 
+      }
 
+      .leaf_4 {
 
+        position: absolute;
 
+        background: url(./asset/css/i/leaf_4.png) 0 0 no-repeat;
 
+        height: 113px;
 
+        width: 99px;
 
+        background-size: 100% 100%;
 
+        bottom: 38px;
 
+        left: 2px;
 
+        //animation:leafShake 3s infinite 0.2s;
 
+      }
 
+      .flowerpot {
 
+        position: absolute;
 
+        background: url(./asset/css/i/flowerpot.png) 0 0 no-repeat;
 
+        height: 42px;
 
+        width: 130px;
 
+        bottom: 0;
 
+        right: 5px;
 
+        background-size: 100% 100%;
 
+      }
 
+    }
 
+    .nut {
 
+      position: absolute;
 
+      height: 46px;
 
+      width: 46px;
 
+      background: url(./asset/css/i/nut-icon.png) 0 0 no-repeat;
 
+      background-size: 100% 100%;
 
+      top: 308px;
 
+      right: 493px;
 
+      animation: fadeInRight 2s both;
 
+    }
 
+    .fengche {
 
+      position: absolute;
 
+      background: url(./asset/css/i/fengche.png) 0 0 no-repeat;
 
+      background-size: 100% 100%;
 
+      width: 679px;
 
+      height: 476px;
 
+      top: 195px;
 
+      right: 180px;
 
+      animation: fadeIn 1s both 2s;
 
+    }
 
+  }
 
+}
 
+@media screen and (max-width: 1500px) {
 
+    .css-animation{
 
+      .blue-bg{
 
+        transform: translateX(155px);
 
+      }
 
+    }
 
+    .wrapper{
 
+      .content{
 
+        padding-left:5%;
 
+      }
 
+      .menu{
 
+        right:6%;
 
+      }
 
+    }
 
+}
 
 </style>

+ 16 - 16
src/config.json
查看文件 

@@ -81,16 +81,6 @@
 
     },
 
     {
 
       "version": "1.0.0",
 
-      "name": "Picker",
 
-      "sort": "1",
 
-      "chnName": "选择面板",
 
-      "desc": "选择面板",
 
-      "type": "component",
 
-      "showDemo": true,
 
-      "author": "iris"
 
-    },
 
-    {
 
-      "version": "1.0.0",
 
       "name": "TabBar",
 
       "sort": "3",
 
       "chnName": "标签栏",
 
@@ -101,20 +91,20 @@
 
     },
 
     {
 
       "version": "1.0.0",
 
-      "name": "DatePicker",
 
+      "name": "Calendar",
 
       "sort": "1",
 
-      "chnName": "日期选择",
 
-      "desc": "日期选择",
 
+      "chnName": "日历",
 
+      "desc": "日历",
 
       "type": "component",
 
       "showDemo": true,
 
       "author": "iris"
 
     },
 
     {
 
       "version": "1.0.0",
 
-      "name": "Calendar",
 
+      "name": "DatePicker",
 
       "sort": "1",
 
-      "chnName": "日历",
 
-      "desc": "日历",
 
+      "chnName": "日期选择",
 
+      "desc": "日期选择",
 
       "type": "component",
 
       "showDemo": true,
 
       "author": "iris"
 
@@ -161,6 +151,16 @@
 
     },
 
     {
 
       "version": "1.0.0",
 
+      "name": "Picker",
 
+      "sort": "1",
 
+      "chnName": "选择面板",
 
+      "desc": "选择面板",
 
+      "type": "component",
 
+      "showDemo": true,
 
+      "author": "iris"
 
+    },
 
+    {
 
+      "version": "1.0.0",
 
       "name": "Progress",
 
       "sort": "2",
 
       "chnName": "进度条",

+ 0 - 5
src/nutui.js
查看文件 

@@ -64,11 +64,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 
     install(window.Vue);
 
 }
 
 
-// const API = Object.assign({
 
-//     version: version,
 
-//     install
 
-// }, components, filters, directives, methods);
 
-
 
 const API = {
 
     version,
 
     locale,

+ 27 - 0
src/packages/calendar/__test__/calendar.spec.js
查看文件 

@@ -0,0 +1,27 @@
 
+import { shallowMount, mount } from '@vue/test-utils'
 
+import Calendar from '../calendar.vue'
 
+import Vue from 'vue';
 
+
 
+
 
+describe('Calendar.vue', () => {
 
+    const wrapper = shallowMount(Calendar, {
 
+        propsData: { 
+            defaultValue: '2019-02-22'
 
+        }
 
+    });
 
+
 
+    it('是否可见', () => {
 
+        wrapper.setProps({isVisible: true });
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.find('.nut-calendar').isVisible()).toBe(true);
 
+        })
 
+    });
 
+
 
+    it('设置默认时间', () => {
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2019年02月');
 
+            expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('22');
 
+        })
 
+    });
 
+
 
+});

+ 1 - 1
src/packages/calendar/calendar.vue
查看文件 

@@ -73,7 +73,7 @@ export default {
 
         endDate: {
 
             type: String,
 
             //default: null
 
-            default: Utils.getDay(155)
 
+            default: Utils.getDay(365)
 
         },
 
     },
 
     data() {

+ 4 - 3
src/packages/calendar/demo.vue
查看文件 

@@ -35,7 +35,7 @@
 
             @close="switchPicker('isVisible')"
 
             @choose="setChooseValue"
 
             :start-date="`2018-10-11`"
 
-            :end-date="`2019-11-11`"
 
+            :end-date="`2020-11-11`"
 
         >
 
         </nut-calendar>
 
         <nut-calendar :is-visible="isVisible2"
 
@@ -65,6 +65,7 @@
 
 </template>
 
 
 <script>
 
+import Utils from "../../utils/date.js";
 
 export default {
 
     data() {
 
         return {
 
@@ -74,8 +75,8 @@ export default {
 
             isVisible3: false,
 
             date: null,
 
             dateWeek: null,
 
-            date1: ['2018-12-22', '2019-01-08'],
 
-            date2: '2018-11-22',
 
+            date1: ['2018-12-22', '2020-01-08'],
 
+            date2: Utils.getDay(30),
 
             date3: null
 
             
         };

+ 3 - 3
src/packages/calendar/doc.md
查看文件 

@@ -11,7 +11,7 @@
 
     @close="switchPicker('isVisible')"
 
     @choose="setChooseValue"
 
     :start-date="`2018-10-11`"
 
-    :end-date="`2019-11-11`"
 
+    :end-date="`2020-11-11`"
 
 >
 
 </nut-calendar>
 
 ```
 
@@ -68,8 +68,8 @@ export default {
 
             isVisible3: false,
 
             date: null,
 
             dateWeek: null,
 
-            date1: ['2018-12-22', '2019-01-08'],
 
-            date2: '2018-11-22',
 
+            date1: ['2018-12-22', '2020-01-08'],
 
+            date2: Utils.getDay(30), // 当前日期之后的30天
 
             date3: null
 
             
         };

+ 61 - 0
src/packages/datepicker/__test__/datapicker.spec.js
查看文件 

@@ -0,0 +1,61 @@
 
+import { shallowMount, mount } from '@vue/test-utils'
 
+import DatePicker from '../datepicker.vue'
 
+import Vue from 'vue';
 
+
 
+
 
+describe('DatePicker.vue', () => {
 
+    const wrapper = mount(DatePicker, {
 
+        propsData: { startDate: '1991-11-10', endDate:'2019-10-05'}
 
+    });
 
+
 
+    it('日期', () => {
 
+        wrapper.setProps({type: 'date' });
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.findAll('.nut-picker-list').length).toBe(3)
 
+        })
 
+    });
 
+
 
+    // it('日期时间', () => {
 
+    //     wrapper.setProps({type: 'datetime'});
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.findAll('.nut-picker-list').length).toBe(5)
 
+    //     })
 
+    // });
 
+
 
+    // it('时间', () => {
 
+    //     wrapper.setProps({type: 'time'});
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.findAll('.nut-picker-list').length).toBe(2)
 
+    //     })
 
+    // });
 
+
 
+    // it('12小时制', () => {
 
+    //     wrapper.setProps({type: 'time', isUse12Hours: true});
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.findAll('.nut-picker-list').length).toBe(3)
 
+    //     })
 
+    // });
 
+
 
+    // it('未调用PickerSlot', () => {
 
+    //     wrapper.setProps({
 
+    //         type: 'date'
 
+    //     });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.find('.nut-picker-panel').html()).toBe(false)
 
+    //     })
 
+    // });
 
+
 
+    // it('自定义class', () => {
 
+    //     wrapper.setProps({customClassName: 'nut-picker-test' });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.find('.nut-picker').contains('.nut-picker-test')).toBe(true);
 
+    //     })
 
+    // });
 
+
 
+    // it('标题', () => {
 
+    //     wrapper.setProps({title: '选择年月'});
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
 
+    //     })
 
+    // });
 
+});

+ 1 - 1
src/packages/noticebar/doc.md
查看文件 

@@ -44,7 +44,7 @@
 
 | leftIcon | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | String | 空
 
 | color | 是否禁用 | String | 空
 
 | background | 是否禁用 | String | 空
 
-| delay | 是否禁用 | [String,Number] | 1
 
+| delay | 是否禁用 | String/Number | 1
 
 | scrollable | 是否禁用 | Boolean | true
 
 | speed | 是否禁用 | Number | 50

+ 72 - 44
src/packages/picker/__test__/picker.spec.js
查看文件 

@@ -1,44 +1,72 @@
 
-// import { shallowMount, mount } from '@vue/test-utils'
 
-// import Picker from '../picker.vue'
 
-// import Vue from 'vue';
 
-
 
-
 
-// describe('Picker.vue', () => {
 
-//     const wrapper = shallowMount(Picker, {
 
-//         propsData:{
 
-//             listData: [
 
-//                 ['2019', '2020', '2021', '2022', '2023' ],
 
-//                 ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
 
-//             ],
 
-//         }
 
-//     });
 
-
 
-//     it('测试条数', () => {
 
-//         return Vue.nextTick().then(function () {
 
-//             expect(wrapper.findAll('.nut-picker-list').length).toBe(2);
 
-//         })
 
-//     });
 
-
 
-//     it('是否可见', () => {
 
-//         wrapper.setProps({isVisible: true });
 
-//         return Vue.nextTick().then(function () {
 
-//             expect(wrapper.find('.nut-actionsheet-mask').isVisible()).toBe(true);
 
-//             expect(wrapper.find('.nut-actionsheet-panel').isVisible()).toBe(true);
 
-//         })
 
-//     });
 
-
 
-//     it('标题', () => {
 
-//         wrapper.setProps({title: '选择年月' });
 
-//         return Vue.nextTick().then(function () {
 
-//             expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
 
-//         })
 
-//     });
 
-
 
-//     it('设置默认值', () => {
 
-//         wrapper.setProps({defaultValueData: ['2020', '2'] });
 
-//         return Vue.nextTick().then(function () {
 
-//             expect(wrapper.findAll('.nut-picker-list-panel').at(0).attributes('style')).toBe('transform: translateY(-72px);');
 
-//             expect(wrapper.findAll('.nut-picker-list-panel').at(1).attributes('style')).toBe('transform: translateY(-36px);');
 
-//         })
 
-//     });
 
-// });
 
+import { shallowMount, mount } from '@vue/test-utils'
 
+import Picker from '../picker.vue'
 
+import PickerSlot from '../picker-slot.vue'
 
+import Vue from 'vue';
 
+
 
+
 
+describe('Picker.vue', () => {
 
+    const wrapper = mount(Picker, {
 
+        propsData:{
 
+            listData: [
 
+                ['2019', '2020', '2021', '2022', '2023' ],
 
+                ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
 
+            ],
 
+        }
 
+    });
 
+
 
+    it('调用PickerSlot个数', () => {
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.findAll('.nut-picker-list').length).toBe(2)
 
+        })
 
+    });
 
+
 
+    it('调用PickerSlot', () => {
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.contains(PickerSlot)).toBe(true)
 
+        })
 
+    });
 
+
 
+    it('未调用PickerSlot', () => {
 
+        wrapper.setProps({
 
+            listData: []
 
+        });
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.contains(PickerSlot)).toBe(false)
 
+        })
 
+    });
 
+
 
+    it('自定义class', () => {
 
+        wrapper.setProps({customClassName: 'nut-picker-test' });
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.find('.nut-picker').contains('.nut-picker-test')).toBe(true);
 
+        })
 
+    });
 
+
 
+    it('标题', () => {
 
+        wrapper.setProps({title: '选择年月'});
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
 
+        })
 
+    });
 
+});
 
+
 
+describe('PickerSlot.vue', () => {
 
+    const wrapper = shallowMount(PickerSlot, {
 
+        propsData:{
 
+            listData: ['2019', '2020', '2021', '2022', '2023' ],
 
+            defaultValue: '2020'
 
+        }
 
+    });
 
+
 
+    it('展示个数', () => {
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.findAll('.nut-picker-item').length).toBe(5);
 
+        })
 
+    });
 
+
 
+    it('设置默认值', () => {
 
+        return Vue.nextTick().then(function () {
 
+            expect(wrapper.find('.nut-picker-list-panel').attributes('style')).toBe('-webkit-transform: translateY(-36px);');
 
+        })
 
+    });
 
+});

+ 55 - 0
src/packages/range/__test__/range.spec.js
查看文件 

@@ -0,0 +1,55 @@
 
+import { shallowMount } from '@vue/test-utils'
 
+import Range, {toRGBA} from '../range.vue';
 
+
 
+describe('Range.vue', () => {
 
+
 
+    const wrapper = shallowMount(Range);
 
+    
+    it('设置区间值', () => {
 
+        const {vm} = wrapper;
 
+        let rangeVal = [0, 100];
 
+        wrapper.setProps({
 
+            range: rangeVal,
 
+            rangeValues: rangeVal
 
+        });
 
+        const _range = vm.range;
 
+        expect(_range.length === 2).toBe(true);
 
+        expect(_range[0]).toBe(rangeVal[0]);
 
+        expect(_range[1]).toBe(rangeVal[1]);
 
+
 
+        const newRange = [12, 98];
 
+        vm.$emit('rangeValues', newRange);
 
+        expect(wrapper.emitted('rangeValues')).toBeTruthy();
 
+        expect(wrapper.emitted().rangeValues[0][0]).toEqual(newRange);
 
+    });
 
+
 
+    it('显示标签文字', () => {
 
+        const rangeVal = [0, 100];
 
+        wrapper.setProps({
 
+            range: rangeVal,
 
+            showRangeTxt: true
 
+        });
 
+        const leftEl = wrapper.find('.nut-range-left-text');
 
+        const rightEl = wrapper.find('.nut-range-right-text');
 
+
 
+        expect(leftEl.exists()).toBe(true);
 
+        expect(rightEl.exists()).toBe(true);
 
+        expect(+leftEl.text()).toBe(rangeVal[0]);
 
+        expect(+rightEl.text()).toBe(rangeVal[1]);
 
+    });
 
+
 
+    it('修改主题风格', () => {
 
+        const rangeVal = [0, 100];
 
+        const themeColor = "#31ccec";
 
+        wrapper.setProps({
 
+            range: rangeVal,
 
+            color: themeColor
 
+        });
 
+
 
+        const {mainColor, boxColor, subColor} = wrapper.vm;
 
+
 
+        expect(mainColor).toBe(toRGBA(themeColor));
 
+        expect(boxColor).toBe(toRGBA(themeColor, 0.3));
 
+        expect(subColor).toBe(toRGBA(themeColor, 0.5));
 
+    });
 
+});

+ 1 - 0
src/packages/range/range.vue
查看文件 

@@ -48,6 +48,7 @@ function toRGBA(c, opacity) {
 
 	return toRGBA('#ff0000', opacity);
 
 }
 
 
+export {toRGBA};
 
 export default {
 
   name: "nut-range",
 
   components: {

+ 43 - 0
src/packages/stepper/__test__/stepper.spec.js
查看文件 

@@ -0,0 +1,43 @@
 
+import { shallowMount } from '@vue/test-utils';
 
+import Vue from 'vue';
 
+import Stepper from '../stepper.vue';
 
+
 
+describe('Stepper.vue', () => {
 
+    const wraper = shallowMount(Stepper, {
 
+        propsData: {
 
+            value: 0
 
+        }
 
+    });
 
+
 
+    it('设置最大最小值', () => {
 
+        const minVal = '10';
 
+        const maxVal = '100';
 
+        wraper.setProps({
 
+            min: minVal,
 
+            max: maxVal
 
+        });
 
+        const input = wraper.find('input');
 
+        expect(wraper.contains('.nut-stepper-grey')).toBe(true);
 
+        expect(input.attributes('min')).toBe(minVal);
 
+        expect(input.attributes('max')).toBe(maxVal);
 
+    });
 
+
 
+    it('设置加减的步长', () => {
 
+        const stepVal = 10;
 
+
 
+        wraper.setProps({
 
+            step: stepVal
 
+        });
 
+        wraper.findAll('span').at(1).trigger('click');
 
+        const [min, max] = wraper.vm.animNum;
 
+        expect(max - min).toBe(stepVal);
 
+    });
 
+
 
+    it('设置只读属性', () => {
 
+        wraper.setProps({
 
+            readonly: true
 
+        });
 
+        expect(wraper.find('input').attributes('readonly')).toBe('readonly');
 
+    });
 
+    
+});

+ 16 - 6
src/packages/stepper/demo.vue
查看文件 

@@ -4,7 +4,7 @@
 
     <div>
 
       <nut-cell>
 
         <span slot="title">
 
-          <nut-stepper init="1"></nut-stepper>
 
+          <nut-stepper v-model="val1"></nut-stepper>
 
         </span>
 
       </nut-cell>
 
     </div>
 
@@ -12,7 +12,7 @@
 
     <div>
 
       <nut-cell>
 
         <span slot="title">
 
-          <nut-stepper init="25" min="1" max="100"></nut-stepper>
 
+          <nut-stepper v-model="val2" :min="5" :max="100"></nut-stepper>
 
         </span>
 
       </nut-cell>
 
     </div>
 
@@ -20,7 +20,7 @@
 
     <div>
 
       <nut-cell>
 
         <span slot="title">
 
-          <nut-stepper init="10" step="5"></nut-stepper>
 
+          <nut-stepper v-model="val3" :step="5"></nut-stepper>
 
         </span>
 
       </nut-cell>
 
     </div>
 
@@ -28,7 +28,7 @@
 
     <div>
 
       <nut-cell>
 
         <span slot="title">
 
-          <nut-stepper readonly></nut-stepper>
 
+          <nut-stepper v-model="val4" readonly></nut-stepper>
 
         </span>
 
       </nut-cell>
 
     </div>
 
@@ -36,7 +36,7 @@
 
     <div>
 
       <nut-cell>
 
         <span slot="title">
 
-          <nut-stepper :simple="false"></nut-stepper>
 
+          <nut-stepper v-model="val5" :simple="false"></nut-stepper>
 
         </span>
 
       </nut-cell>
 
     </div>
 
@@ -44,7 +44,7 @@
 
     <div>
 
       <nut-cell>
 
         <span slot="title">
 
-          <nut-stepper :transition="false" :simple="false"></nut-stepper>
 
+          <nut-stepper v-model="val6" :transition="false" :simple="false"></nut-stepper>
 
         </span>
 
       </nut-cell>
 
     </div>
 
@@ -53,6 +53,16 @@
 
 
 <script>
 
 export default {
 
+  data() {
 
+    return {
 
+      val1: 0,
 
+      val2: 12,
 
+      val3: 5,
 
+      val4: 0,
 
+      val5: 0,
 
+      val6: 0
 
+    }
 
+  },
 
 };
 
 </script>

+ 15 - 7
src/packages/stepper/stepper.vue
查看文件 

@@ -5,7 +5,7 @@
 
             :class="{'nut-stepper-grey': num - step < min}"
 
             v-html="require('../../assets/svg/minus.svg')">
 
         </span>
 
-        <input type="number" v-model="num" @input="numchange" :min="min" :max="max" :readonly="readonly" :style="{visibility:showNum? 'visible': 'hidden'}" />
 
+        <input type="number" :value="num | maxv(min)" @input="numchange" :min="min" :max="max" :readonly="readonly" :style="{visibility:showNum? 'visible': 'hidden'}" />
 
         <div 
             :class="['nut-stepper-fake', showAddAnim? 'nut-stepper-transition': 'nut-stepper-none-transition']"
 
             :style="{
 
@@ -47,10 +47,6 @@ export default {
 
             type: Boolean,
 
             default: true,
 
         },
 
-        init: {
 
-            type: [Number, String],
 
-            default: 1,
 
-        },
 
         min: {
 
             type: [Number, String],
 
             default: 0,
 
@@ -70,21 +66,31 @@ export default {
 
         transition: {
 
             type: Boolean,
 
             default: true
 
+        },
 
+        value: {
 
+            type: [String, Number],
 
+            required: true
 
         }
 
     },
 
     data() {
 
         return {
 
-            num: this.init,
 
+            num: this.value,
 
             showNum: true,
 
             showAddAnim: false,
 
             showReduceAnim: false,
 
-            animNum: [this.init, this.init],
 
+            animNum: [this.value, this.value],
 
             animTranslate_add: 0,
 
             animTranslate_: -100
 
         }
 
     },
 
+    filters: {
 
+        maxv(v, min) {
 
+            return Math.max(v, min);
 
+        }
 
+    },
 
     methods: {
 
         numchange() {
 
+            this.$emit('input', this.num);
 
             this.$emit('change', this.num);
 
         },
 
         add() {
 
@@ -108,6 +114,7 @@ export default {
 
                 };
 
             }
 
             this.$emit('add', this.num);
 
+            this.$emit('input', this.num); 
             this.$emit('change', this.num); 
         },
 
         animEnd() {
 
@@ -134,6 +141,7 @@ export default {
 
                 }    
             }
 
             this.$emit('reduce', this.num);
 
+            this.$emit('input', this.num);
 
             this.$emit('change', this.num);
 
         },

+ 44 - 47
src/packages/toast/__test__/toast.spec.js
查看文件 

@@ -4,72 +4,69 @@ import Vue from 'vue';
 
 
 
 describe('Toast.vue', () => {
 
-    const wrapper = shallowMount(Toast, {
 
-        
-    });
 
+    const wrapper = shallowMount(Toast);
 
 
-    it('可见', () => {
 
-        wrapper.setData({ msg: '测试文案', visible: true });
 
+    // it('可见', () => {
 
+    //     wrapper.setData({ msg: '测试文案', visible: true });
 
 
-        return Vue.nextTick().then(function () {
 
-            expect(wrapper.isVisible()).toBe(true);
 
-        })
 
-    });
 
-
 
-    it('隐藏', () => {
 
-        wrapper.setData({ msg: '测试文案', visible: false });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.isVisible()).toBe(true);
 
+    //     });
 
+    // });
 
 
-        return Vue.nextTick().then(function () {
 
-            expect(wrapper.isVisible()).toBe(false);
 
-        })
 
-    });
 
+    // it('隐藏', () => {
 
+    //     wrapper.setData({ msg: '测试文案', visible: false });
 
 
-    it('文案展示', () => {
 
-        wrapper.setData({ msg: '测试文案', visible:true });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.isVisible()).toBe(false);
 
+    //     });
 
+    // });
 
 
-        return Vue.nextTick().then(function () {
 
-            expect(wrapper.find('.nut-toast-text').text()).toBe('测试文案');
 
-        })
 
-    });
 
+    // it('文案展示', () => {
 
+    //     wrapper.setData({ msg: '测试文案', visible:true });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.find('.nut-toast-text').text()).toBe('测试文案');
 
+    //     });
 
+    // });
 
 
-    it('尺寸设置', () => {
 
-        wrapper.setData({ msg: '测试文案', visible: true, size: 'small' });
 
+    // it('尺寸设置', () => {
 
+    //     wrapper.setData({ msg: '测试文案', visible: true, size: 'small' });
 
 
-        return Vue.nextTick().then(function () {
 
-            expect(wrapper.contains('.nut-toast-small')).toBe(true);
 
-        })
 
-    });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.contains('.nut-toast-small')).toBe(true);
 
+    //     });
 
+    // });
 
 
     // it('图标', () => {
 
     //     wrapper.setData({ msg: '测试文案', visible: true, type:'success' });
 
 
     //     return Vue.nextTick().then(function () {
 
     //         expect(wrapper.contains('.nut-toast-has-icon')).toBe(true);
 
-    //     })
 
+    //     });
 
     // });
 
 
-    it('loading类型', () => {
 
-        wrapper.setData({ msg: '测试文案', visible: true, type: 'loading' });
 
+    // it('loading类型', () => {
 
+    //     wrapper.setData({ msg: '测试文案', visible: true, type: 'loading' });
 
 
-        return Vue.nextTick().then(function () {
 
-            expect(wrapper.contains('.nut-loading')).toBe(true);
 
-        })
 
-    });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.contains('.nut-loading')).toBe(true);
 
+    //     });
 
+    // });
 
 
-    it('loading图标不旋转', () => {
 
-        wrapper.setData({ msg: '测试文案', visible: true, type: 'loading', loadingRotate:false });
 
+    // it('loading图标不旋转', () => {
 
+    //     wrapper.setData({ msg: '测试文案', visible: true, type: 'loading', loadingRotate:false });
 
 
-        return Vue.nextTick().then(function () {
 
-            expect(wrapper.contains('.nut-toast-icon-rotate')).toBe(false);
 
-        })
 
-    });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.contains('.nut-toast-icon-rotate')).toBe(false);
 
+    //     });
 
+    // });
 
 
-    it('设置ID', () => {
 
-        wrapper.setData({ id:'test', msg: '测试文案', visible: true, type: 'loading' });
 
+    // it('设置ID', () => {
 
+    //     wrapper.setData({ id:'test', msg: '测试文案', visible: true, type: 'loading' });
 
 
-        return Vue.nextTick().then(function () {
 
-            expect(wrapper.attributes('id')).toBe('test');
 
-        })
 
-    });
 
+    //     return Vue.nextTick().then(function () {
 
+    //         expect(wrapper.attributes('id')).toBe('test');
 
+    //     });
 
+    // });
 
 
 });