| 12 |
- /*! NutUI v1.2.8 Wed Jun 27 2018 20:09:26 GMT+0800 (CST) */
- webpackJsonpnutui([57],{1025:function(t,e,n){(t.exports=n(1)()).push([t.i,"\n.btn {\n width: 40px;\n height: 40px;\n border-radius: 6px;\n background: #1EAEDB url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNkYzQUM2NjQ3NkYxMUU4ODY0OEIwQjI4QzQyOUVDRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNkYzQUM2NzQ3NkYxMUU4ODY0OEIwQjI4QzQyOUVDRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM2RjNBQzY0NDc2RjExRTg4NjQ4QjBCMjhDNDI5RUNGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM2RjNBQzY1NDc2RjExRTg4NjQ4QjBCMjhDNDI5RUNGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+aEqTHAAAA3pJREFUeNrsms1rE0EYxneLl7QpKn40eotgK+IhitJLtX4gPQgmPdhjsSe9pfZuJfYvsAftTenBgoKpEKhR/Kh6KYoKitB66M1WqzRB+yEtxGfhGZlMd5PNZjedgC/8GMiyM887Ox/vzBuzUCgY9WwNRp3bFp/qaQQd4CQ4CFpBCwjz+W/wDcyAz+AFeA2Wq27ZGkIeMUEXuAuWC5XbMt/tYl2edJge50AcXAOHRT+AD+AZeAumwRx73uCX2APawFFwGsSAyefvwXUwHvQX2AcmpF6cB4P83Utdg6xD2ESldVXS4AWQZ0OL4AoIVTEEBSHWtci682zLVwdSUi+lQcQH4SoR1i0s5ZcDw6xwHQxUM+FcLgwDbMuyG9U6IHr+D+gOULhKN9ss+yXKjXnR8+drKF4Ql75ET6UOWCtBji/3e2g8DLYrhD3U008NOafVyelFsVQ+8DjmMzYbV8bjnEhLS6wrBxLSUul1tfHLAbE6iSU2oT5XgzmTO6zBnXFeg3htnloMajNLRaNnucVbgdeIRkHnCB2JUaOjA30sb4EVjRxYkTq0z8mBRgZpVmA2qmHoP0ptcWrd4MBxEGJUOauhA7PUFqLWDQ6cYPlU4wOY0NZp58AhllMaOzClaC06UraynC5zdLzjoqEjDr/dc/HuxRJHzRmW+/+t+9KJ7AfYAXaDBYcKtoJcwL28DeQdnu0C38FPsFMdQs3SAVxX+6Vorf9rlQYb78Ia621WtBZN4gXOgUiJObAG7rtoqIO3ELLN8S6onK2VeBaRtG5wwJrhB3j18dGhAmt16HEhIgPOKb+9c/luKWtj+cVuCH1i2a7xEGpXtBY58JLlGY0dENom7Rx4BVYZskY1FB+ltlV5LjUo43ucB4ZeDR3opbaHYMlpH7jN8jKjPl0sRE2yRlsHnjBkjUgv6GCXqMnS9rjc5a7Oh/rucod6g/PgEYOqm+ohusZm8nhracmCtNvrdd0utvKVXmwZvM6r26tFwZAGl7tDfl6vJ2twvZ6Uen44qARHSwDiW4JKcDilmJI+ppiSQaeY5NUpqyT5roKoB+FRvisn+bKVJvm8plkTvGiNSWlWK1X6HLzh2eKrFLM0gb28+TgGTjFFK/YYa4dN1SLNapfoHqsi0T22WYlu1Zp4jOxU/mogn2HlvxpMMiReqnqr/v9vlU22vwIMAAmKvJ+7otQzAAAAAElFTkSuQmCC) no-repeat center;\n background-size: 30px 30px;\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}\n.img-box li img {\n float: left;\n width: 100%;\n 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",""])},1145:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("nut-docheader",{attrs:{name:t.$route.name,chName:t.$route.params.chnName,type:"Component",desc:"图片选取组件。",showQrCode:!0}}),t._v(" "),n("h5",[t._v("功能")]),t._v(" "),t._m(0),t._v(" "),n("h5",[t._v("示例")]),t._v(" "),n("h6",[t._v("基本用法，选择添加图片")]),t._v(" "),n("nut-codebox",{attrs:{code:t.demo1,imgUrl:"../asset/img/demo/addImagesBox1.png"}}),t._v(" "),n("h6",[t._v("限制图片大小及数量")]),t._v(" "),n("nut-codebox",{attrs:{code:t.demo2}}),t._v(" "),n("h6",[t._v("图片删除，提供了delete接口可以直接选取要删除的图片，单击图片删除")]),t._v(" "),n("nut-codebox",{attrs:{code:t.demo3}}),t._v(" "),n("h6",[t._v("大图预览")]),t._v(" "),n("p",[t._v("该功能主要结合nut-pictureview组件一起使用，代码示例:")]),t._v(" "),n("nut-codebox",{attrs:{code:t.demo5}}),t._v(" "),t._m(1)],1)},staticRenderFns:[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("ul",[n("li",[t._v("本组件用于选择添加图片，可结合上传组件实现图片上传功能。")]),t._v(" "),n("li",[t._v("可以配置上传图片的大小。")]),t._v(" "),n("li",[t._v("可以配置选择图片最大数量。")]),t._v(" "),n("li",[t._v("支持删除图片。")]),t._v(" "),n("li",[t._v("支持图片选择完成事件。")]),t._v(" "),n("li",[t._v("提供上传图片的接口配置，若不配置则可以通过提供的事件接口自行处理图片上传等操作。")])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"tbl-wrapper"},[n("h5",[t._v("Props")]),t._v(" "),n("table",{staticClass:"u-full-width"},[n("thead",[n("tr",[n("th",[t._v("参数")]),t._v(" "),n("th",[t._v("说明")]),t._v(" "),n("th",[t._v("类型")]),t._v(" "),n("th",[t._v("默认值")]),t._v(" "),n("th",[t._v("可选值")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("size")]),t._v(" "),n("td",[t._v("添加图片大小，默认不限大小，单位KB")]),t._v(" "),n("td",[t._v("Number")]),t._v(" "),n("td",[t._v("--")]),t._v(" "),n("td",[t._v("--")])]),t._v(" "),n("tr",[n("td",[t._v("maxImg")]),t._v(" "),n("td",[t._v("可选添加图片的最大值")]),t._v(" "),n("td",[t._v("Number")]),t._v(" "),n("td",[t._v("--")]),t._v(" "),n("td",[t._v("--")])]),t._v(" "),n("tr",[n("td",[t._v("delete")]),t._v(" "),n("td",[t._v("传入需要删除图片的序号")]),t._v(" "),n("td",[t._v("Number")]),t._v(" "),n("td",[t._v("--")]),t._v(" "),n("td",[t._v("--")])])])]),t._v(" "),n("h5",[t._v("Events")]),t._v(" "),n("table",{staticClass:"u-full-width"},[n("thead",[n("tr",[n("th",[t._v("事件名")]),t._v(" "),n("th",[t._v("说明")]),t._v(" "),n("th",[t._v("回调参数")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("imgMsg")]),t._v(" "),n("td",[t._v("添加图片按钮触发后回调，返回图片信息，可以根据实际情况处理")]),t._v(" "),n("td",[t._v("图片信息")])])])])])}]}},1234:function(t,e,n){var i=n(1025);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);n(3)("836d17ba",i,!0,{})},864:function(t,e,n){var i=n(2)(n(963),n(1145),function(t){n(1234)},null,null);t.exports=i.exports},963:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={data:function(){return{demo1:'<nut-addimagesbox \nclass="btn" \n@imgMsg="addimg1"\n></nut-addimagesbox>',demo2:'<nut-addimagesbox \nclass="btn"\n:size="8000" \n:maxImg="6" \n:isUpload="true" \n:ajax="option" \n@imgMsg="addimg" \n></nut-addimagesbox>',demo3:'<ul class="img-box">\n <li v-for="(img,key) in imgs3" :key="key" @click="deleteImg(key)">\n <img :src="img" alt="">\n </li>\n</ul>\n\n<nut-addimagesbox class="btn"\n:delete="delete3"\n@imgMsg="addimg3"\n></nut-addimagesbox>',demo5:'<ul class="img-box">\n <li v-for="(img,key) in imgs5" :key="key" @click="setPicShow(key)">\n <img :src="img" alt="">\n </li>\n</ul>\n\n<nut-pictureview \n:visible.sync="picShow" \n:bgColor="coverColor" \n:imgArr="imgs5" \n:initNum="picShowNum" \n:pagination="showPage" \n@close-pic="closeDo"\n></nut-pictureview>\n\n<nut-addimagesbox \nclass="btn" \n@imgMsg="addimg5"\n></nut-addimagesbox>'}},methods:{addimg1:function(t){3==t.code&&(this.imgs1=t.msg.imgs)},addimg3:function(t){3==t.code&&(this.imgs3=t.msg.imgs)},addimg5:function(t){3==t.code&&(this.imgs5=t.msg.imgs)},addimg:function(t){console.log("图片信息：",t);3==t.code&&(this.imgs=t.msg.imgs)},deleteImg:function(t){console.log(t);var e=Number(new Date);this.delete3=t+"-"+e,console.log(this.delete3)},setPicShow:function(t){this.picShowNum=t+1,this.picShow=!0}}}}});
|
