PicSwipe.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div class="pic-swipe">
  3. <div v-if="isShowArrow" class="left-loop" :class="{disabled: !isCanClickLeft}" @click="moveLeft"> <Icon type="ios-arrow-back" size='24'/> </div>
  4. <div class="loop-content">
  5. <div class="contanier" :style="`transform: translateX(-${index * 180}px)`">
  6. <span v-for="(item, index) in list" :key="index">
  7. <img :src="item.key?`/image-service/image-service/common/image_get?systemId=dataPlatform&key=${item.key}&width=96&height=95`:``" @click="onClick(item)">
  8. <span class="alt-name">{{item.name}}</span>
  9. </span>
  10. </div>
  11. </div>
  12. <div v-if="isShowArrow" class="right-loop" :class="{disabled: !isCanClickRight}" @click="moveRight"> <Icon type="ios-arrow-forward" size='24'/> </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. components: {
  18. },
  19. mixins: [],
  20. props: {
  21. list: {
  22. type: Array,
  23. default: () => []
  24. }
  25. },
  26. data () {
  27. return {
  28. index: 0,
  29. isShowArrow: false,
  30. SC: 0,
  31. BY: 0
  32. }
  33. },
  34. computed: {
  35. isCanClickLeft () {
  36. return this.index > 0
  37. },
  38. isCanClickRight () {
  39. return (this.index * 180) + this.BD < this.SC
  40. }
  41. },
  42. watch: {
  43. list () {
  44. this.checkArrow()
  45. }
  46. },
  47. mounted () {
  48. this.checkArrow()
  49. },
  50. methods: {
  51. checkArrow () {
  52. this.$nextTick(() => {
  53. this.SC = document.querySelector('.pic-swipe .contanier').scrollWidth
  54. this.BD = document.querySelector('.pic-swipe').clientWidth
  55. this.isShowArrow = this.SC > this.BD
  56. })
  57. },
  58. moveLeft () {
  59. if (this.isCanClickLeft) {
  60. this.index--
  61. }
  62. },
  63. moveRight () {
  64. if (this.isCanClickRight) {
  65. this.index++
  66. }
  67. },
  68. onClick (key) {
  69. this.$emit('onClick', key)
  70. }
  71. }
  72. }
  73. </script>
  74. <style scoped lang="less" >
  75. .pic-swipe {
  76. display: flex;
  77. .left-loop, .right-loop {
  78. color: #999DA1;
  79. padding-top: 68px;
  80. //margin-right: 15px;
  81. cursor: pointer;
  82. background-color: #EEEEEE;
  83. &:hover {
  84. background-color: #DDDDDD;
  85. }
  86. }
  87. .left-loop {
  88. border-top-left-radius: 4px;
  89. border-bottom-left-radius: 4px;
  90. }
  91. .right-loop {
  92. border-top-right-radius: 4px;
  93. border-bottom-right-radius: 4px;
  94. }
  95. .disabled {
  96. //cursor: not-allowed;
  97. display: none;
  98. }
  99. .loop-content {
  100. white-space: nowrap;
  101. overflow: hidden;
  102. margin: 0 5px;
  103. .contanier {
  104. transition: transform 0.3s ease-in-out;
  105. >span {
  106. position: relative;
  107. cursor: pointer;
  108. img {
  109. vertical-align: middle;
  110. margin-right: 14px;
  111. width: 180px;
  112. max-height: 152px;
  113. }
  114. .alt-name{
  115. position: absolute;
  116. left: 3px;
  117. background:#fff;
  118. z-index: 3;
  119. font-size: 14px;
  120. color: #212830;
  121. padding: 4px 10px;
  122. margin: 4px 0 0 4px;
  123. box-shadow: 0 2px 8px 0 rgba(44,48,62,0.10);
  124. border-radius: 2px;
  125. }
  126. }
  127. }
  128. }
  129. }
  130. </style>