franslee 7 年 前
コミット
7f18194640
9 ファイル変更122 行追加36 行削除
  1. 20 15
      NEXT.md
  2. 1 1
      config.json
  3. 1 1
      package.json
  4. 1 1
      src/app.vue
  5. 1 1
      src/default.html
  6. 87 14
      src/demo/dropdown.vue
  7. 5 0
      src/index.html
  8. 3 2
      src/package/addimagesbox/src/addimagesbox.vue
  9. 3 1
      webpack.config.js

+ 20 - 15
NEXT.md

@@ -1,22 +1,27 @@
-目前NutUI 2.0版正在紧锣密鼓的开发中。
+**NutUI 2.0计划**
 
-主要方向是组件的精品化和跨平台,从网站到组件全面提升用户体验,预计年底发布Beta版本
+目前 NutUI 2.0 版正在紧锣密鼓的开发中
 
-新版本的NutUI将具备以下特性:
+<img src="http://img11.360buyimg.com/uba/jfs/t1/3443/17/12056/37762/5bd17892Ef40b38fd/0154d1c7c651a079.gif">
 
-* 跨平台,提交的Vue组件自动生成微信小程序组件
-* 脚手架升级webpack 4.0,构建速度大幅提升
-* 网站页面设计由设计师小姐姐把持,组件严格按照京东APP最新UI规范开发
-* 统一的动效
-* 更方便、更灵活、更优雅的按需引用方式
-* 组件内建文案支持多语言(国际化)
-* 支持自定义主题
-* 基于MD文件自动生成文档
-* 支持自动化测试和持续集成
-* 官网将支持PWA
+主要方向是组件的**精品化**和**跨平台**,从网站到组件全面提升用户体验,我们的目标是:
 
+<img src="http://img11.360buyimg.com/uba/jfs/t1/6849/6/2522/310293/5bd17b79E953215d8/9a7d799ce0ca8b84.png">
 
+虽然只是 beta 版本,但是是新组建库的一大步!
 
-如果你有好的建议,欢迎反馈给我们。
+>新版本的NutUI将具备以下特性:
 
-nutui@jd.com
+
+- 特性1 跨平台,提交的Vue组件自动生成微信小程序组件
+- 特性2 脚手架升级webpack 4.0,构建速度大幅提升
+- 特性3 网站页面设计由设计师小姐姐把持,组件严格按照京东APP最新UI规范开发
+- 特性4 统一的动效
+- 特性5 更方便、更灵活、更优雅的按需引用方式
+- 特性6 组件内建文案支持多语言(国际化)
+- 特性7 支持自定义主题
+- 特性8 基于MD文件自动生成文档
+- 特性9 支持自动化测试和持续集成
+- 特性10 官网将支持PWA
+------------------------------------------------------
+如果你有好的建议,欢迎反馈给我们。邮箱是 nutui@jd.com;

+ 1 - 1
config.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0",
+  "version": "1.3.1",
   "packages": [
     {
       "name": "DatePicker",

+ 1 - 1
package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutui/nutui",
   "description": "基于Vue2的轻量级移动端UI组件库",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "jdc-fe",
   "main": "dist/nutui.js",
   "keywords": [

+ 1 - 1
src/app.vue

@@ -12,7 +12,7 @@
     	<router-view class="view sys-main" name="main"></router-view>
         <router-view class="view sys-phone" name="phone"></router-view>
     </div>
-    <div class="sys-footer"><div class="sys-inner"><span>Copyright © 2017~2018 <a href="https://jdc.jd.com/" target="_blank">JDC</a>. All Rights Reserved.</span></div></div>
+    <div class="sys-footer"><div class="sys-inner"><span>Copyright © 2017~2018 <a href="https://jdc.jd.com/" target="_blank">JDC</a>-<a href="http://fe.jd.com/" target="_blank">前端开发部</a>. All Rights Reserved.</span></div></div>
   </div>
 </template>
 <script>

+ 1 - 1
src/default.html

@@ -102,7 +102,7 @@
         <div class="tm-footer" style="background: #252525">
             <div class="uk-container uk-container-center uk-text-center">
                 <div class="uk-panel">
-                    <p>Copyright © 2017~2018 <a href="//jdc.jd.com">JDC-前端开发部</a></p>
+                    <p>Copyright © 2017~2018 <a href="//jdc.jd.com" target="_blank">JDC</a>-<a href="http://fe.jd.com" target="_blank">前端开发部</a></p>
                     <a href="index.html"><img src="../asset/img/nutui-logo-2.png" width="130" height="30" title="NutUI" alt="NutUI"></a>
                 </div>
 

+ 87 - 14
src/demo/dropdown.vue

@@ -1,27 +1,100 @@
 <template>
     <div>
-        <nut-dropdown ></nut-dropdown>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <h5>示例</h5>
+
+        <h6>示例1: 单选、简单数组</h6>
+        <nut-dropdown :options="options" @selectedChange='multipleSelected'></nut-dropdown>
+        <nut-codebox :code="demo1"></nut-codebox>
+
+        <h6>示例2: 单选、简单数组、设置默认值</h6>
+        <nut-dropdown :options="options" @selectedChange='multipleSelected' defaultSelected='二'></nut-dropdown>
+        <nut-codebox :code="demo2"></nut-codebox>
+
+        <h6>示例3: 多选、简单数组</h6>
+        <nut-dropdown :options="options" multiple @selectedChange='selectedChange'></nut-dropdown>
+        <nut-codebox :code="demo3"></nut-codebox>
+
+        <h6>示例4: 多选、简单数组、设置默认值</h6>
+        <nut-dropdown :options="options" multiple @selectedChange='selectedChange' :defaultSelected="['一','二']"></nut-dropdown>
+        <nut-codebox :code="demo4"></nut-codebox>
+
+        <h6>示例5: 单选、复杂对象数组、自定义展示字段</h6>
+        <nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name'></nut-dropdown>
+        <nut-codebox :code="demo5"></nut-codebox>
+
+        <h6>示例6: 多选、复杂对象数组、自定义展示字段</h6>
+        <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name'></nut-dropdown>
+        <nut-codebox :code="demo6"></nut-codebox>
+
+        <h6>示例7: 单选、复杂对象数组、自定义展示字段、设置默认值</h6>
+        <nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' :defaultSelected="{name: '李四', id: 2}"></nut-dropdown>
+        <nut-codebox :code="demo7"></nut-codebox>
+
+        <h6>示例8: 多选、复杂对象数组、自定义展示字段、设置默认值</h6>
+        <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' :defaultSelected="[{name: '李四', id: 2}]"></nut-dropdown>
+        <nut-codebox :code="demo8"></nut-codebox>
+
+        <h6>示例9: 多选、复杂对象数组、自定义展示字段、支持搜索</h6>
+        <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' search></nut-dropdown>
+        <nut-codebox :code="demo9"></nut-codebox>
+
+        <h6>示例10: 单选、简单数组、支持搜索</h6>
+        <nut-dropdown :options="options" @selectedChange='selectedChange' search></nut-dropdown>
+        <nut-codebox :code="demo10"></nut-codebox>
     </div>
+
 </template>
 
 <script>
-//import jsonp from 'jsonp';
-
 export default {
-    data(){
-      return {
-       
-      }
+  data() {
+    return {
+      options: ['一','二','三','四'],
+      options2: [{name: '张三', id: 1}, {name: '李四', id: 2}, {name: '王五', id: 3}, {name: '马六', id: 4}, {name: '王久', id: 5}],
+      code: `
+        export default {
+          data() {
+            retuen {
+              options: ['一','二','三','四'],
+              options2: [{name: '张三', id: 1}, {name: '李四', id: 2}, {name: '王五', id: 3}, {name: '马六', id: 4}, {name: '王久', id: 5}],
+            }
+          },
+          methods: {
+            selectedChange(option) {
+              console.log(option)
+            },
+          }
+        }
+      `,
+      demo1: `<nut-dropdown :options="options" @selectedChange='multipleSelected'></nut-dropdown>`,
+      demo2: `<nut-dropdown :options="options" @selectedChange='selectedChange' defaultSelected='二'></nut-dropdown>`,
+      demo3: `<nut-dropdown :options="options" multiple @selectedChange='selectedChange'></nut-dropdown>`,
+      demo4: `<nut-dropdown :options="options" multiple @selectedChange='selectedChange' :defaultSelected="['一','二']"></nut-dropdown>`,
+      demo5: `<nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' ></nut-dropdown>`,
+      demo6: `<nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name'></nut-dropdown>`,
+      demo7: `<nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' :defaultSelected="{name: '李四', id: 2}"></nut-dropdown>`,
+      demo8: `<nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' :defaultSelected="[{name: '李四', id: 2}]"></nut-dropdown>`,
+      demo9: `<nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' search></nut-dropdown>`,
+      demo10: `<nut-dropdown :options="options" @selectedChange='selectedChange' search></nut-dropdown>`
+    };
+  },
+  mounted(){
+  },
+  methods: {
+    selectedChange(option) {
+      console.log(option)
     },
-    methods:{
-        
-    },
-    mounted(){
-
+    multipleSelected(options) {
+      console.log(options)
     }
-}
+  }
+};
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
+

+ 5 - 0
src/index.html

@@ -2,12 +2,17 @@
 <html>
 <head>
     <meta charset="utf-8" /> 
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
     <meta content="telephone=no" name="format-detection"/>
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
     <title>NutUI - 基于Vue2.0的移动端UI组件库</title> 
     <link rel="stylesheet" href="./asset/css/normalize.css">
     <link rel="stylesheet" href="./asset/css/skeleton.css">
     <!-- <link rel="stylesheet" href="./asset/css/monokai-sublime.css"> -->
+    <link rel="shortcut icon" href="../asset/img/logo.png" type="image/x-icon">
     <link rel="stylesheet" href="./asset/css/highlight.css">
     <link rel="stylesheet" href="./asset/css/main.css">
     <script src="./asset/js/highlight.pack.js"></script>

+ 3 - 2
src/package/addimagesbox/src/addimagesbox.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="nut-addimagesbox">
         <div v-html="icon"></div>
-        <input  @change="addImg" class="addImgs" type="file" name="files" multiple="multiple" accept="image/*">
+        <input ref="uploadInput"  @change="addImg" class="addImgs" type="file" name="files" multiple="multiple" accept="image/*">
     </div>
 </template>
 <script>
@@ -93,7 +93,8 @@ export default {
                         });  
                     }                                        
                 }                
-                                   
+                
+                this.$refs.uploadInput.value = '';                                
         },
          preview(data){
                 let that = this;

+ 3 - 1
webpack.config.js

@@ -20,7 +20,8 @@ webpackConfig.entry = {
 webpackConfig.output = {
     path: path.resolve(__dirname, 'dist'),
     publicPath: "/",
-    filename: '[name].js',
+    filename: "[name].js",
+    chunkFilename: "[name].[hash].js",
     library: 'nutui',
     libraryTarget: 'umd',
     umdNamedDefine: true
@@ -72,6 +73,7 @@ webpackConfig.plugins = [
     new HtmlWebpackPlugin({
         filename: path.resolve(__dirname, './dist/index.html'),
         template: './src/index.html',
+        hash:true,
         chunks: ['app']
     }),
     new HtmlWebpackPlugin({