menu imagepicker

src/packages/imagepicker/imagepicker.vue

@@ -3,7 +3,7 @@
         <div class="img-list">
             <transition-group :name="animation?'nutEase':''">
                 <div class="img-item"
-                        v-for="item in this.imgList"
+                        v-for="item in this.list"
                         :key="item.id"
                         :style="{'width':width + 'px','height':height + 'px','marginRight':margin + 'px'}"
                         @click="delMode == 'tap' ? deleteImg(item.id) : preview(item.id)"
@@ -14,9 +14,9 @@
                 <a href="javascript:;"><img :src="item.src" alt=""></a>
                 </div>
             </transition-group>
-            <div class="add-icon" :style="{'width':width + 'px','height':height + 'px'}" v-show="this.imgList.length < this.max">
+            <div class="add-icon" :style="{'width':width + 'px','height':height + 'px'}" v-show="this.list.length < this.max">
                 <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect y="6" width="16" height="4" rx="2"></rect><rect transform="rotate(90 8 8)" y="6" width="16" height="4" rx="2"></rect></g></svg></i>
-                <input type="file" name="files" :multiple="!ismultiple ? multiple : ''" :accept="accept"  @change="addImg" />
+                <input type="file" name="files" :multiple="!ismultiple ? 'multiple' : ''" :accept="accept"  @change="addImg" />
             </div>
         </div>
     </div>
@@ -72,10 +72,12 @@ export default {
     },
     data() {
         return {
-            timeOutEvent:0
+            timeOutEvent:0,
+            list:[]
         };
     },
     mounted() {
+        this.list = this.imgList;
     },
     methods: {
         addImg(event){
@@ -85,9 +87,9 @@ export default {
 
             let fileArr = Array.from(file);
 
-            if (file.length > self.max - self.imgList.length) {
+            if (file.length > self.max - self.list.length) {
 
-                fileArr = fileArr.filter((item,index) => index < self.max - self.imgList.length);
+                fileArr = fileArr.filter((item,index) => index < self.max - self.list.length);
             }
 
             if (self.autoUpload) {//自动上传
@@ -99,7 +101,7 @@ export default {
                 fileArr.forEach((item,index) => {
                     let reader = new FileReader();
                     reader.onload = function(evt) {
-                        self.imgList.push({
+                        self.list.push({
                             id:Math.random(),
                             src:evt.target.result
                         });
@@ -120,7 +122,7 @@ export default {
             });
         },
         deleteImg(id) {
-            this.imgList = this.imgList.filter(item => item.id != id);
+            this.list = this.list.filter(item => item.id != id);
             this.$emit('imgMsg',{
                 code:3,
                 msg:id

src/packages/menu/menu.vue

@@ -10,7 +10,7 @@
             <div class="nut-menu-panel" v-show="isVisible">
                 <div class="menu-simple" v-if="type === 'simple' && !$slots.custom">
                     <ul>
-                        <li v-for="(item,index) in list" :key="index" :class="item.selected ? 'selected' : ''" @click="selectedItem(item,index)">
+                        <li v-for="(item,index) in datalist" :key="index" :class="item.selected ? 'selected' : ''" @click="selectedItem(item,index)">
                             {{item.text}}
                             <span v-if="item.selected"><nut-icon type="tick" color="#f0250f"></nut-icon></span>
                         </li>
@@ -18,7 +18,7 @@
                 </div>
                 <div class="menu-multiple-style1" v-if="type === 'multiple' && mulstyle === 'style1'" >
                     <ul>
-                        <li v-for="(item,index) in list" :key="index" :class="{selected:item.selected ? true : false,col2:col == 2 ? true : false,col3:col == 3 ? true : false}" @click="selectMutiple(index)">
+                        <li v-for="(item,index) in datalist" :key="index" :class="{selected:item.selected ? true : false,col2:col == 2 ? true : false,col3:col == 3 ? true : false}" @click="selectMutiple(index)">
                             <nut-checkbox v-model="item.selected" size="small" :disabled="!item.selected && max <= list.filter(value => value.selected == true).length ? true : false">{{item.text}}</nut-checkbox>
                         </li>
                     </ul>
@@ -29,7 +29,7 @@
                 </div>
                 <div class="menu-multiple-style2" v-if="type === 'multiple' && mulstyle === 'style2'">
                     <ul>
-                        <li v-for="(item,index) in list" :key="index" :class="{selected:item.selected ? true : false,col2:col == 2 ? true : false,col3:col == 3 ? true : false}" @click="selectMutiple(index)">
+                        <li v-for="(item,index) in datalist" :key="index" :class="{selected:item.selected ? true : false,col2:col == 2 ? true : false,col3:col == 3 ? true : false}" @click="selectMutiple(index)">
                             <a href="javascript:void(0);">{{item.text}}</a>
                         </li>
                     </ul>
@@ -40,7 +40,7 @@
                 </div>
                 <div class="menu-multiple-style3" v-if="type === 'multiple' && mulstyle === 'style3'">
                     <ul>
-                        <li v-for="(item,index) in list" :key="index" :class="{selected:item.selected ? true : false,col2:col == 2 ? true : false,col3:col == 3 ? true : false}" @click="selectMutiple(index)">
+                        <li v-for="(item,index) in datalist" :key="index" :class="{selected:item.selected ? true : false,col2:col == 2 ? true : false,col3:col == 3 ? true : false}" @click="selectMutiple(index)">
                             <label>{{item.text}}</label>
                         </li>
                     </ul>
@@ -60,6 +60,7 @@
 import CheckBox from '../checkbox/checkbox.vue';
 import Button from '../button/button.vue';
 import ButtonGroup from '../buttongroup/buttongroup.vue';
+import Icon from '../icon/icon.vue';
 import locale from "../../mixins/locale";
 export default {
     name:'nut-menu',
@@ -67,7 +68,8 @@ export default {
     components:{
         'nut-button':  Button,
         'nut-button-group': ButtonGroup,
-        'nut-checkbox':CheckBox
+        'nut-checkbox':CheckBox,
+        'nut-icon':Icon
     },
     props: {
         isAnimation:{//是否有动画效果
@@ -94,6 +96,10 @@ export default {
             type:[String,Number],
             default:5
         },
+        custom:{
+            type:String,
+            default:""
+        },
         list:{
             type:Array,
             default:() => {