nutui/dist/103.js

/*! NutUI v1.2.8 Wed Jun 27 2018 20:09:26 GMT+0800 (CST) */
webpackJsonpnutui([103],{1016:function(i,t,n){(i.exports=n(1)()).push([i.i,"\n.btn {\n  width: .8rem;\n  height: .8rem;\n  border-radius: 6px;\n  background: #2688ca;\n}\n.btn svg {\n    max-height: 100%;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n    color: #fff;\n}\n.img-box {\n  min-height: 110px;\n  line-height: 100px;\n  padding-top: 10px;\n  background: #f2f2f2;\n}\n.img-box li {\n    float: left;\n    list-style: none;\n    width: 100px;\n    height: 100px;\n    margin-right: 10px;\n    border: 1px solid #ddd;\n    text-align: center;\n    overflow: hidden;\n}\n.img-box li img {\n      max-height: 100%;\n}\n.img-box:after {\n    content: '';\n    display: block;\n    clear: both;\n}\n#pictureView .nut-swiper {\n  width: 750px;\n}\n#pictureView .nut-swiper img {\n    width: 750px;\n    height: 750px;\n}\n#pictureView .pv-con .nut-swiper {\n  height: auto;\n}\n",""])},1122:function(i,t){i.exports={render:function(){var i=this,t=i.$createElement,n=i._self._c||t;return n("div",[n("nut-demoheader",{attrs:{name:i.$route.name}}),i._v(" "),n("h5",[i._v("1.基本功能：添加图片并显示")]),i._v(" "),n("ul",{staticClass:"img-box"},i._l(i.imgs1,function(i,t){return n("li",{key:t},[n("img",{attrs:{src:i,alt:""}})])})),i._v(" "),n("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon},on:{imgMsg:i.addimg1}}),i._v(" "),n("h5",[i._v("限制图片大小及张数")]),i._v(" "),n("ul",{staticClass:"img-box"},i._l(i.imgs,function(i,t){return n("li",{key:t},[n("img",{attrs:{src:i,alt:""}})])})),i._v(" "),n("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon,size:8e3,maxImg:6,isUpload:!0,ajax:i.option},on:{imgMsg:i.addimg}}),i._v(" "),n("h5",[i._v("图片删除,提供了delete接口可以直接选取要删除的图片,单击图片删除")]),i._v(" "),n("ul",{staticClass:"img-box"},i._l(i.imgs3,function(t,e){return n("li",{key:e,on:{click:function(t){i.deleteImg(e)}}},[n("img",{attrs:{src:t,alt:""}})])})),i._v(" "),n("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon,delete:i.delete3},on:{imgMsg:i.addimg3}}),i._v(" "),n("h5",[i._v("提供图片大图预览功能")]),i._v(" "),n("p",[i._v("该功能主要结合nut-pictureview组件一起使用,代码示例:")]),i._v(" "),n("ul",{staticClass:"img-box"},i._l(i.imgs5,function(t,e){return n("li",{key:e,on:{click:function(t){i.setPicShow(e)}}},[n("img",{attrs:{src:t,alt:""}})])})),i._v(" "),n("nut-addimagesbox",{attrs:{id:"pictureView",visible:i.picShow,bgColor:i.coverColor,imgArr:i.imgs5,initNum:i.picShowNum,pagination:i.showPage},on:{"update:visible":function(t){i.picShow=t},"close-pic":i.closeDo}}),i._v(" "),n("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon},on:{imgMsg:i.addimg5}})],1)},staticRenderFns:[]}},1225:function(i,t,n){var e=n(1016);"string"==typeof e&&(e=[[i.i,e,""]]),e.locals&&(i.exports=e.locals);n(3)("31d876e0",e,!0,{})},815:function(i,t,n){var e=n(2)(n(913),n(1122),function(i){n(1225)},null,null);i.exports=e.exports},913:function(i,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{icon:'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"><g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M4375.3,1752.6V739.1H3361.7H2348.2V112.5V-514h1013.5h1013.5v-1013.5v-1013.5h626.6h626.6v1013.5V-514h1013.5h1013.5v626.5v626.6H6641.9H5628.4v1013.5v1013.5h-626.6h-626.6V1752.6z" style="fill:#FFFFFF"></path></g></g></svg>',imgs1:[],imgs3:[],imgs5:[],imgs:[],option:{url:"http://localhost:8080/#/Uploader",method:"POST"},delete3:"",picShow:!1,picShowNum:1,showPage:!0,coverColor:"rgba(0,0,0,.7)",demo1:'<ul class="img-box"><li v-for="(img,key) in imgs5" :key="key"  @click="setPicShow(key)"><img :src="img" alt=""></li></ul><nut-pictureview :visible.sync="picShow" :bgColor="coverColor" :imgArr="imgs5" :initNum="picShowNum" :pagination="showPage" @close-pic="closeDo"></nut-pictureview><nut-addimagesbox class="btn"  @imgMsg="addimg5"></nut-addimagesbox>'}},methods:{addimg1:function(i){3==i.code&&(this.imgs1=i.msg.imgs)},addimg3:function(i){3==i.code&&(this.imgs3=i.msg.imgs)},addimg5:function(i){3==i.code&&(this.imgs5=i.msg.imgs)},addimg:function(i){console.log("图片信息：",i);3==i.code&&(this.imgs=i.msg.imgs)},deleteImg:function(i){console.log(i);var t=Number(new Date);this.delete3=i+"-"+t,console.log(this.delete3)},setPicShow:function(i){this.picShowNum=i+1,this.picShow=!0}}}}});