upd:imgpicker 增加长按时间可配

src/config.json

@@ -573,6 +573,36 @@
       "sort": "0",
       "showDemo": false,
       "author": "yangxiaolu"
+    },
+    {
+      "version": "1.0.0",
+      "name": "SideNavBar",
+      "chnName": "侧边栏导航",
+      "desc": "侧边栏导航",
+      "type": "component",
+      "sort": "3",
+      "showDemo": true,
+      "author": "szg2008"
+    },
+    {
+      "version": "1.0.0",
+      "name": "SubSideNavBar",
+      "chnName": "侧边栏导航",
+      "desc": "侧边栏导航",
+      "type": "component",
+      "sort": "3",
+      "showDemo": false,
+      "author": "szg2008"
+    },
+    {
+      "version": "1.0.0",
+      "name": "SideNavBarItem",
+      "chnName": "侧边栏导航",
+      "desc": "侧边栏导航",
+      "type": "component",
+      "sort": "3",
+      "showDemo": false,
+      "author": "szg2008"
     }
   ]
 }

src/nutui.js

@@ -110,6 +110,12 @@ import TimeLine from "./packages/timeline/index.js";
 import "./packages/timeline/timeline.scss";
 import TimeLineItem from "./packages/timelineitem/index.js";
 import "./packages/timelineitem/timelineitem.scss";
+import SideNavBar from "./packages/sidenavbar/index.js";
+import "./packages/sidenavbar/sidenavbar.scss";
+import SubSideNavBar from "./packages/subsidenavbar/index.js";
+import "./packages/subsidenavbar/subsidenavbar.scss";
+import SideNavBarItem from "./packages/sidenavbaritem/index.js";
+import "./packages/sidenavbaritem/sidenavbaritem.scss";
 
 const packages = {
   Cell,
@@ -165,7 +171,10 @@ const packages = {
   Video: Video,
   Signature: Signature,
   TimeLine: TimeLine,
-  TimeLineItem: TimeLineItem
+  TimeLineItem: TimeLineItem,
+  SideNavBar: SideNavBar,
+  SubSideNavBar: SubSideNavBar,
+  SideNavBarItem: SideNavBarItem
 };
 
 const components = {};

src/packages/imagepicker/demo.vue

@@ -9,7 +9,7 @@
         <h4>支持多图选择</h4>
         <nut-imagepicker @imgMsg="imgMsg" :ismultiple=true></nut-imagepicker>
         <h4>支持长按删除图片</h4>
-        <nut-imagepicker @imgMsg="imgMsg" :imgList.sync="imgList2" delMode="longtap"></nut-imagepicker>
+        <nut-imagepicker @imgMsg="imgMsg" :imgList.sync="imgList2" :longTapTime="longTapTime" delMode="longtap"></nut-imagepicker>
         <h4>选择完成图片之后自动上传</h4>
         <nut-imagepicker @imgMsg="imgMsg" autoUpload="true"></nut-imagepicker>
     </div>
@@ -19,6 +19,7 @@
 export default {
   data() {
     return {
+      longTapTime: 1000,
       imgList1:[
         {
           id:1,

src/packages/imagepicker/doc.md

@@ -49,6 +49,7 @@
 <nut-imagepicker 
   @imgMsg="imgMsg" 
   delMode="longtap"
+  :longTapTime="longTapTime"
 >
 </nut-imagepicker>
 ```
@@ -67,6 +68,7 @@
 export default {
   data() {
     return {
+      longTapTime: 1000,
       imgList1:[
         {
           id:1,
@@ -105,6 +107,7 @@ export default {
 | accept | 允许上传的图片类型 | String | image/*
 | ismultiple | 是否开启多张图片上传 | Boolean | false
 | delMode | 删除图片的方式（tap、longtap） | String | tap
+| longTapTime | 长按的时间 | Number | 500
 | autoUpload | 选择完成之后是否直接上传 | Boolean | false
 | imgList | 图片列表 （注意：绑定时必须`:imgList.sync`,加sync修饰符） | Array | []
 

src/packages/imagepicker/imagepicker.vue

@@ -57,6 +57,10 @@ export default {
             type:[String],
             default:'tap'
         },
+        longTapTime:{
+            type:[Number],
+            default:500
+        },
         autoUpload:{//选择完图片之后是否自动完成上传
             type:[Boolean,String],
             default:false
@@ -130,9 +134,10 @@ export default {
             });
         },
         touchStart(id) {
+            console.log(this.longTapTime)
             this.timeOutEvent = setTimeout(() => {
                 this.deleteImg(id);
-            },500);
+            },this.longTapTime);
             return false;
         },
         touchMove(id) {

src/packages/sidenavbar/demo.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <nut-sidenavbar>
+          <nut-subsidenavbar>
+            <nut-sidenavbaritem key="1" title="云存储"></nut-sidenavbaritem>
+            <nut-sidenavbaritem key="2" title="弹性云计算"></nut-sidenavbaritem>
+          </nut-subsidenavbar>
+        </nut-sidenavbar>
+    </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+    return {};
+  },
+  methods: {
+      
+  }
+};
+</script>
+
+<style lang="scss">
+.popup-bg{
+  z-index: 9999;
+}
+.popup-box{
+  z-index: 9999;
+}
+</style>

src/packages/sidenavbar/index.js

@@ -0,0 +1,8 @@
+import SideNavBar from './sidenavbar.vue';
+import './sidenavbar.scss';
+
+SideNavBar.install = function(Vue) {
+  Vue.component(SideNavBar.name, SideNavBar);
+};
+
+export default SideNavBar

src/packages/sidenavbar/sidenavbar.scss

@@ -0,0 +1,11 @@
+.nut-sidenavbar{
+    .sidenavbar-content{
+        position: relative;
+        height: 100%;
+        overflow: auto;
+        background-color: #fff;
+        .sidenavbar-list{
+            width: 100%;
+        }
+    }
+}

src/packages/sidenavbar/sidenavbar.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="nut-sidenavbar">
+        <nut-popup
+            :position="position"
+            v-model="show"
+            :style="{ width, height }"
+        >
+            <div class="sidenavbar-content">
+                <div class="sidenavbar-list">
+                    <slot></slot>
+                </div>
+            </div>
+        </nut-popup>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-sidenavbar',
+    props: {
+        show:{
+            type: Boolean,
+            default: true
+        },
+        position:{
+            type: String,
+            default: 'right'
+        },
+        width:{
+            type:[String,Number],
+            default: '80%'
+        },
+        height:{
+            type:[String,Number],
+            default: '100%'
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+
+    }
+}
+</script>

src/packages/sidenavbaritem/index.js

@@ -0,0 +1,9 @@
+import SideNavBarItem from './sidenavbaritem.vue';
+import './sidenavbaritem.scss';
+
+
+SideNavBarItem.install = function(Vue) {
+  Vue.component(SideNavBarItem.name, SideNavBarItem);
+};
+
+export default SideNavBarItem

src/packages/sidenavbaritem/sidenavbaritem.scss

@@ -0,0 +1,9 @@
+.nut-sidenavbaritem{
+    li{
+        .sub-sidenavbar-item-item{
+            line-height: 40px;
+            padding: 0 50px;
+            color: #9b9ea0;
+        }
+    }
+}

src/packages/sidenavbaritem/sidenavbaritem.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="nut-sidenavbaritem">     
+        <li>
+            <a href="javascript:;" class="item-title sub-sidenavbar-item-item">
+                {{ title }}
+            </a>
+        </li>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-sidenavbaritem',
+    props: {
+        disabled: {
+            type: Boolean,
+            default: true
+        },
+        title: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+
+    }
+}
+</script>

src/packages/subsidenavbar/index.js

@@ -0,0 +1,9 @@
+import SubSideNavBar from './subsidenavbar.vue';
+import './subsidenavbar.scss';
+
+
+SubSideNavBar.install = function(Vue) {
+  Vue.component(SubSideNavBar.name, SubSideNavBar);
+};
+
+export default SubSideNavBar

src/packages/subsidenavbar/subsidenavbar.scss

@@ -0,0 +1,51 @@
+.nut-subsidenavbar{
+    .item-title{
+        display: block;
+        width: 100%;
+        height: 40px;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+        border-bottom: 1px solid #f8f8f8;
+    }
+    .sidenavbar-icon{
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+    }
+    .sidenavbar-title{
+        font-size: 16px;
+        line-height: 40px;
+        height: 40px;
+    }
+    .sidenavbar-item{
+        float: left;
+        width: 100%;
+        position: relative;
+        border-bottom: 1px solid #f8f8f8;
+        background-color: #f8f8f8;
+        .sidenavbar-item-title{
+            padding: 0 18px;
+            .sidenavbar-title{
+                color: #333;
+            }
+        }
+        .sub-sidenavbar-box{
+            background-color: #fefefe;
+            .sub-sidenavbar-list{
+                .sub-sidenavbar-item{
+                    width: 100%;
+                    .sub-sidenavbar-item-title{
+                        padding: 0 34px;
+                        .sub-sidenavbar-title{
+                            color: #333;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/packages/subsidenavbar/subsidenavbar.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="nut-subsidenavbar">
+        <div class="sidenavbar-item">
+            <div class="item-title sidenavbar-item-title">
+                <a href="javascript:;" class="sidenavbar-title">
+                    云产品
+                </a>
+                <span class="sidenavbar-icon">
+                    <nut-icon type="down"></nut-icon>
+                </span>
+            </div>
+            <div class="sub-sidenavbar-box">
+                <div class="sub-sidenavbar-list">
+                    <div class="sub-sidenavbar-item">
+                        <div class="item-title sub-sidenavbar-item-title">
+                            <a href="javascript:;" class="sidenavbar-title sub-sidenavbar-title">
+                                弹性运算
+                            </a>
+                            <span class="sidenavbar-icon">
+                                <nut-icon type="down"></nut-icon>
+                            </span>
+                        </div>
+                        <ul class="three-sidenavbar-list">
+                            <slot></slot>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-subsidenavbar',
+    props: {
+        
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+
+    }
+}
+</script>

types/nutui.d.ts

@@ -74,3 +74,6 @@ export declare class Video extends UIComponent {}
 export declare class Signature extends UIComponent {}
 export declare class TimeLine extends UIComponent {}
 export declare class TimeLineItem extends UIComponent {}
+export declare class SideNavBar extends UIComponent {}
+export declare class SubSideNavBar extends UIComponent {}
+export declare class SideNavBarItem extends UIComponent {}