graceFaceGroup.nvue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view class="grace-face-group" :style="{height:(size + borderWidth * 2 ) +'rpx'}">
  3. <view class="grace-face-items" v-if="isAddBtn"
  4. :style="{width:size+'rpx', height:size+'rpx'}"
  5. @tap.stop="addBtnClick">
  6. <slot></slot>
  7. </view>
  8. <image :src="item" class="grace-face-items" v-for="(item, index) in items" :key="index" :style="{
  9. left:isAddBtn ? (space * (index+1)) + 'rpx' : (space * index) + 'rpx',
  10. borderWidth:borderWidth + 'rpx', borderColor:borderColor, borderRadius:size+'rpx', width:size+'rpx', height:size+'rpx'}">
  11. </image>
  12. </view>
  13. </template>
  14. <script>
  15. export default{
  16. props:{
  17. items : {
  18. type : Array,
  19. default : function () {
  20. return new Array()
  21. }
  22. },
  23. size : {
  24. type : Number,
  25. default : 80
  26. },
  27. space : {
  28. type : Number,
  29. default : 60
  30. },
  31. borderWidth : {
  32. type : Number,
  33. default : 4
  34. },
  35. borderColor : {
  36. type : String,
  37. default : '#F5F5F5'
  38. },
  39. isAddBtn : {
  40. type : Boolean,
  41. default : false
  42. }
  43. },
  44. methods:{
  45. addBtnClick : function () {
  46. this.$emit('addBtnClicked');
  47. }
  48. }
  49. }
  50. </script>
  51. <style scoped>
  52. .grace-face-group{}
  53. .grace-face-items{width:100rpx; height:100rpx; position:absolute; overflow:hidden; border-radius:100rpx; font-size:0; borderStyle:solid;}
  54. </style>