| 12 |
- /*! NutUI v1.2.2 Tue May 15 2018 17:51:06 GMT+0800 (中国标准时间) */
- webpackJsonpnutui([96],{1065:function(i,t){i.exports={render:function(){var i=this,t=i.$createElement,e=i._self._c||t;return e("div",[e("nut-demoheader",{attrs:{name:i.$route.name}}),i._v(" "),e("h5",[i._v("1.基本功能：添加图片并显示")]),i._v(" "),e("ul",{staticClass:"img-box"},i._l(i.imgs1,function(i,t){return e("li",{key:t},[e("img",{attrs:{src:i,alt:""}})])})),i._v(" "),e("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon},on:{imgMsg:i.addimg1}}),i._v(" "),e("h5",[i._v("限制图片大小及张数")]),i._v(" "),e("ul",{staticClass:"img-box"},i._l(i.imgs,function(i,t){return e("li",{key:t},[e("img",{attrs:{src:i,alt:""}})])})),i._v(" "),e("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon,size:8e3,maxImg:6,isUpload:!0,ajax:i.option},on:{imgMsg:i.addimg}}),i._v(" "),e("h5",[i._v("图片删除,提供了delete接口可以直接选取要删除的图片,单击图片删除")]),i._v(" "),e("ul",{staticClass:"img-box"},i._l(i.imgs3,function(t,o){return e("li",{key:o,on:{click:function(t){i.deleteImg(o)}}},[e("img",{attrs:{src:t,alt:""}})])})),i._v(" "),e("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon,delete:i.delete3},on:{imgMsg:i.addimg3}}),i._v(" "),e("h5",[i._v("提供图片大图预览功能")]),i._v(" "),e("p",[i._v("该功能主要结合nut-pictureview组件一起使用,代码示例:")]),i._v(" "),e("ul",{staticClass:"img-box"},i._l(i.imgs5,function(t,o){return e("li",{key:o,on:{click:function(t){i.setPicShow(o)}}},[e("img",{attrs:{src:t,alt:""}})])})),i._v(" "),e("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(" "),e("nut-addimagesbox",{staticClass:"btn",attrs:{icon:i.icon},on:{imgMsg:i.addimg5}})],1)},staticRenderFns:[]}},1159:function(i,t,e){var o=e(967);"string"==typeof o&&(o=[[i.i,o,""]]),o.locals&&(i.exports=o.locals);e(3)("6c58fc1e",o,!0,{})},783:function(i,t,e){function o(i){e(1159)}var s=e(1)(e(873),e(1065),o,null,null);i.exports=s.exports},873:function(i,t,e){"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){var t=this;3==i.code&&(t.imgs1=i.msg.imgs)},addimg3:function(i){var t=this;3==i.code&&(t.imgs3=i.msg.imgs)},addimg5:function(i){var t=this;3==i.code&&(t.imgs5=i.msg.imgs)},addimg:function(i){console.log("图片信息：",i);var t=this;3==i.code&&(t.imgs=i.msg.imgs)},deleteImg:function(i){console.log(i);var t=this,e=Number(new Date);t.delete3=i+"-"+e,console.log(t.delete3)},setPicShow:function(i){this.picShowNum=i+1,this.picShow=!0}}}},967:function(i,t,e){t=i.exports=e(2)(),t.push([i.i,'.btn{width:.8rem;height:.8rem;border-radius:6px;background:#2688ca}.btn svg{max-height:100%;transform:scale(.7);color:#fff}.img-box{min-height:110px;line-height:100px;padding-top:10px;background:#f2f2f2}.img-box li{float:left;list-style:none;width:100px;height:100px;margin-right:10px;border:1px solid #ddd;text-align:center;overflow:hidden}.img-box li img{max-height:100%}.img-box:after{content:"";display:block;clear:both}#pictureView .nut-swiper{width:750px}#pictureView .nut-swiper img{width:750px;height:750px}#pictureView .pv-con .nut-swiper{height:auto}',""])}});
|
