SlyComment.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <view>
  3. <view class="u-demo-block__content">
  4. <view class="album">
  5. <view class="album__avatar">
  6. <image :src="dataVal.avatar" mode="" style="width: 32px;height: 32px;">
  7. </image>
  8. </view>
  9. <view class="album__content">
  10. <view class="title">{{dataVal.title}}</view>
  11. <view class="label">{{dataVal.content}}</view>
  12. <UAlbum v-if="show" :urls="urls" keyName="UAlbum" :singleSize="attrs.singleSize"
  13. :multipleSize="attrs.multipleSize" :space="attrs.space" :rowCount="attrs.rowCount"></UAlbum>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. import Mixin from "../Mixin";
  21. import UAlbum from "./u-album.vue"
  22. export default {
  23. components: {
  24. UAlbum
  25. },
  26. mixins: [Mixin],
  27. data() {
  28. return {
  29. albumWidth: 0,
  30. urls: [
  31. // 'https://cdn.uviewui.com/uview/album/1.jpg',
  32. // 'https://cdn.uviewui.com/uview/album/2.jpg',
  33. // 'https://cdn.uviewui.com/uview/album/3.jpg',
  34. // 'https://cdn.uviewui.com/uview/album/4.jpg',
  35. // 'https://cdn.uviewui.com/uview/album/5.jpg',
  36. // 'https://cdn.uviewui.com/uview/album/6.jpg',
  37. // 'https://cdn.uviewui.com/uview/album/7.jpg',
  38. // 'https://cdn.uviewui.com/uview/album/8.jpg',
  39. // 'https://cdn.uviewui.com/uview/album/9.jpg',
  40. // 'https://cdn.uviewui.com/uview/album/10.jpg',
  41. ],
  42. show:true,
  43. }
  44. },
  45. watch: {
  46. dataVal(n) {
  47. this.show=false
  48. this.urls = n.imgs.split(',');
  49. setTimeout(()=>{
  50. this.show=true
  51. },10)
  52. }
  53. },
  54. }
  55. </script>
  56. <style lang="scss">
  57. @import '../components/components.scss';
  58. .album {
  59. @include flex;
  60. align-items: flex-start;
  61. &__avatar {
  62. background-color: $u-bg-color;
  63. padding: 5px;
  64. border-radius: 3px;
  65. }
  66. &__content {
  67. margin-left: 10px;
  68. flex: 1;
  69. }
  70. }
  71. .title {
  72. font-size: 34rpx;
  73. font-weight: 700;
  74. }
  75. .label {
  76. margin: 0 0 8px 0;
  77. font-size: 30rpx;
  78. }
  79. </style>