graceNvueSelectImg.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <view class="grace-add-list">
  3. <view class="grace-add-list-items" v-for="(item, index) in imgLists" :key="index">
  4. <image :src="item.url" :data-imgurl="item.url" @tap="showImgs" class="grace-add-list-img" :mode="imgMode"></image>
  5. <text class="grace-add-list-remove grace-icons" @tap="removeImg" :id="'grace-items-img-'+index" :style="{color:closeBtnColor}">&#xe632;</text>
  6. </view>
  7. <view class="grace-add-list-items grace-add-list-btn" @tap="addImg" v-if="imgLists.length < maxFileNumber">
  8. <text class="grace-add-list-btn-icon">+</text>
  9. <text class="grace-add-list-btn-text">{{btnName}}</text>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props:{
  16. maxFileNumber : {
  17. type : Number,
  18. default : 9
  19. },
  20. btnName : {
  21. type : String,
  22. default : "添加照片"
  23. },
  24. items : {
  25. type : Array,
  26. default : function () {
  27. return [];
  28. }
  29. },
  30. closeBtnColor : {
  31. type : String,
  32. default : "#666666"
  33. },
  34. imgMode:{
  35. type:String,
  36. default:'widthFix'
  37. }
  38. },
  39. data() {
  40. return {
  41. imgLists : []
  42. }
  43. },
  44. created:function () {
  45. this.initImgs();
  46. },
  47. watch:{
  48. items:function(){this.initImgs();}
  49. },
  50. methods:{
  51. initImgs : function(){
  52. var imgs = [];
  53. for(let i = 0; i < this.items.length; i++){
  54. imgs.push({url:this.items[i], progress : 100});
  55. }
  56. this.imgLists = imgs;
  57. },
  58. addImg : function(){
  59. var num = this.maxFileNumber - this.imgLists.length;
  60. if(num < 1){return false;}
  61. uni.chooseImage({
  62. count: num,
  63. sizeType: ['compressed'],
  64. success:(res) => {
  65. for(let i = 0; i < res.tempFilePaths.length; i++){
  66. this.imgLists.push({url:res.tempFilePaths[i], progress:0})
  67. }
  68. this.$emit('change', this.imgLists);
  69. },
  70. fail:function(){
  71. //uni.hideLoading();
  72. }
  73. });
  74. },
  75. removeImg : function(e){
  76. var index = e.currentTarget.id.replace('grace-items-img-', '');
  77. var removeImg = this.imgLists.splice(index, 1);
  78. this.$emit('removeImg', removeImg[0]);
  79. this.$emit('change', this.imgLists);
  80. },
  81. showImgs : function(e){
  82. var currentImg = e.currentTarget.dataset.imgurl;
  83. var imgs = [];
  84. for(let i = 0; i < this.imgLists.length; i++){
  85. imgs.push(this.imgLists[i].url);
  86. }
  87. uni.previewImage({
  88. urls: imgs,
  89. current : currentImg
  90. })
  91. },
  92. setItems : function(items){
  93. this.imgLists = [];
  94. for(let i = 0; i < items.length; i++){
  95. this.imgLists.push({url : items[i], progress : 100});
  96. }
  97. }
  98. }
  99. }
  100. </script>
  101. <style scoped>
  102. .grace-add-list{flex-wrap:wrap; flex-direction:row;}
  103. .grace-add-list-btn{flex-direction:column; align-items:center; justify-content:center;}
  104. .grace-add-list-btn-text{font-size:26rpx; line-height:36rpx; text-align:center; color:#999999;}
  105. .grace-add-list-btn-icon{font-size:70rpx; height:80rpx; line-height:80rpx; color:#999999;}
  106. .grace-add-list-items{width:222rpx; height:222rpx; overflow:hidden; margin-bottom:12rpx; margin-right:11rpx; background-color:#F6F7F8; font-size:0; border-radius:10rpx;}
  107. .grace-add-list-image{width:222rpx; height:222rpx;}
  108. .grace-add-list-remove{width:50rpx; height:50rpx; line-height:50rpx; text-align:center; font-size:40rpx; position:absolute; right:0; bottom:0; color:#888888;}
  109. .grace-add-list-img{width:222rpx; height:222rpx;}
  110. </style>