uview-ultra v4

Appearance

Album 相册 ​

本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

  • 通过urls设置相册的图片地址，搭配image等做出更棒的效果！
html
<template>
    <view class="u-page">
        <view class="u-demo-block">
            <text class="u-demo-block__title">多图模式</text>
            <view class="u-demo-block__content">
                <view class="album">
                    <view class="album__avatar">
                        <image
                            src="/static/uview/common/logo.png"
                            mode=""
                            style="width: 32px;height: 32px;"
                        ></image>
                    </view>
                    <view class="album__content">
                        <up-text
                                text="uview-ultra UI"
                                type="primary"
                                bold
                                size="17"
                        ></up-text>
                        <up-text
                                margin="0 0 8px 0"
                                text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
                        ></up-text>
                        <up-album :urls="urls1" keyName="src2"></up-album>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 响应式数据  
const albumWidth = ref(0);  
const urls1 = ref([{  
    src2: 'https://uview-ultra.jiangruyi.com/uview-ultra/album/1.jpg',  
}]);  
</script>
js
<script>
    export default {
        data() {
            return {
                albumWidth: 0,
                urls1: [{
                    src2: 'https://uview-ultra.jiangruyi.com/uview-ultra/album/1.jpg',
                }]
            }
        }
    }
</script>
css
<style lang="scss">
    .album {
        @include flex;
        align-items: flex-start;

        &__avatar {
             background-color: $up-bg-color;
             padding: 5px;
             border-radius: 3px;
         }
    
        &__content {
             margin-left: 10px;
             flex: 1;
         }
    }
</style>

多图模式 ​

  • 通过urls传入更多的图片地址形成图片列表
html
<template>
  <view class="u-page">
    <view class="u-demo-block">
      <text class="u-demo-block__title">多图模式</text>
      <view class="u-demo-block__content">
        <view class="album">
          <view class="album__avatar">
            <image
              src="/static/uview/common/logo.png"
              mode=""
              style="width: 32px;height: 32px;"
            ></image>
          </view>
          <view class="album__content">
            <up-text
              text="uview-ultra UI"
              type="primary"
              bold
              size="17"
            ></up-text>
            <up-text
              margin="0 0 8px 0"
              text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
            ></up-text>
            <up-album :urls="urls2"></up-album>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 响应式数据  
const albumWidth = ref(0);  
const urls2 = ref([  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/1.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/2.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/3.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/4.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/5.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/6.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/7.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/8.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/9.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/10.jpg',  
]);  
</script>
js
<script>
    export default {
        data() {
            return {
                albumWidth: 0,
                urls2: [
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/1.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/2.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/3.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/4.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/5.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/6.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/7.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/8.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/9.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/10.jpg',
                ],
            }
        }
    }
</script>
css
<style lang="scss">
    .album {
        @include flex;
        align-items: flex-start;

        &__avatar {
             background-color: $up-bg-color;
             padding: 5px;
             border-radius: 3px;
         }
    
        &__content {
             margin-left: 10px;
             flex: 1;
         }
    }
</style>

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
urls图片地址列表 支持 Array<String> | Array<Object>形式Array--
keyName指定从数组的对象元素中读取哪个属性作为图片地址String--
singleSize单图时，图片长边的长度String | Number180-
multipleSize多图时，图片边长String | Number70-
space多图时，图片水平和垂直之间的间隔String | Number6-
singleMode单图时，图片缩放裁剪的模式StringscaleToFill-
multipleMode多图时，图片缩放裁剪的模式StringaspectFill-
maxCount最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量String | Number9-
previewFullImage是否可以预览图片Booleantruefalse
rowCount每行展示图片数量，如设置，singleSize和multipleSize将会无效String | Number3-
showMore超出maxCount时是否显示查看更多的提示Booleantruefalse
autoWrap自适应换行模式，不受rowCount限制。Booleanfalsetrue
unit图片宽度单位Stringpxrpx

Event ​

事件名说明回调参数
albumWidth某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送width