1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <template>
- <view>
- <view class="u-demo-block__content">
- <view class="album">
- <view class="album__avatar">
- <image :src="dataVal.avatar" mode="" style="width: 32px;height: 32px;">
- </image>
- </view>
- <view class="album__content">
- <view class="title">{{dataVal.title}}</view>
- <view class="label">{{dataVal.content}}</view>
- <UAlbum v-if="show" :urls="urls" keyName="UAlbum" :singleSize="attrs.singleSize"
- :multipleSize="attrs.multipleSize" :space="attrs.space" :rowCount="attrs.rowCount"></UAlbum>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import Mixin from "../Mixin";
- import UAlbum from "./u-album.vue"
- export default {
- components: {
- UAlbum
- },
- mixins: [Mixin],
- data() {
- return {
- albumWidth: 0,
- urls: [
- // 'https://cdn.uviewui.com/uview/album/1.jpg',
- // 'https://cdn.uviewui.com/uview/album/2.jpg',
- // 'https://cdn.uviewui.com/uview/album/3.jpg',
- // 'https://cdn.uviewui.com/uview/album/4.jpg',
- // 'https://cdn.uviewui.com/uview/album/5.jpg',
- // 'https://cdn.uviewui.com/uview/album/6.jpg',
- // 'https://cdn.uviewui.com/uview/album/7.jpg',
- // 'https://cdn.uviewui.com/uview/album/8.jpg',
- // 'https://cdn.uviewui.com/uview/album/9.jpg',
- // 'https://cdn.uviewui.com/uview/album/10.jpg',
- ],
- show:true,
- }
- },
- watch: {
- dataVal(n) {
- this.show=false
- this.urls = n.imgs.split(',');
- setTimeout(()=>{
- this.show=true
- },10)
- }
- },
- }
- </script>
- <style lang="scss">
- @import '../components/components.scss';
- .album {
- @include flex;
- align-items: flex-start;
- &__avatar {
- background-color: $u-bg-color;
- padding: 5px;
- border-radius: 3px;
- }
- &__content {
- margin-left: 10px;
- flex: 1;
- }
- }
- .title {
- font-size: 34rpx;
- font-weight: 700;
- }
- .label {
- margin: 0 0 8px 0;
- font-size: 30rpx;
- }
- </style>
|