展示组件
图片 TmBadge
宽高可以设置,支持百分比,px,rpx,如果你用了auto,%这种就要注意:如果你把组件放到了容器中,容器设置为v-show,display:none,visible这种, 那你一定要跟随vif组件,不然尺寸是不对的。因为小程序无法监测这种变化的情况,导致无法设置尺寸。如果你设定了固定尺寸则不用担心这个问题。
🌶️ 示例
查看模拟效果+
示例模板
vue
<template>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b mb-16 d-block">图片 tmImage</tm-text>
<tm-text color="#999999">
图片自带加载功能,宽和高可以不设置,自动以父级宽度为最大值,如果只设置了宽,高会自动设置,免去了大家设置图片宽高的麻烦
支持百分比,px,rpx单位宽高设置
</tm-text>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b d-block mb-16">自动占位宽和高</tm-text>
<view class="flex flex-row" style="justify-content: space-between;align-items: flex-start;">
<tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
<tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=0239"></tm-image>
<tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=22233"></tm-image>
<tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=9654"></tm-image>
<tm-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=212"></tm-image>
</view>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b d-block mb-16">指定高宽</tm-text>
<tm-image height="150" src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
<tm-image width="100%" src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
<tm-image width="120" height="120"
src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
</tm-sheet>
<view class="py-32"></view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const testClick = (text: string) => {
uni.showToast({ title: text, icon: "none" });
};
</script>
<style lang="scss"></style>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | string|number | "100%" | 宽度,默认100%18rpx,18px,15%支持这三种单位,如果只写"18"就表示18rpx |
height | string|number | "auto" | 高度,auto,%,rpx,px,stringnumber18rpx,18px,15%支持这三种单位,如果只写"18"就表示18rpx |
src | string | "" | 图片源 |
model | string | "fill" | 模式 |
preview | boolean | true | 点击后是否预览图片 |
ratio | number | 1.25 | 预览占位比例宽/高,当数据没加载前,如果你设置了一项值比如宽,高会自动根据这个比例计算当图片加载成功后,使用正确的原图片比例设置。默认是5/4=1.25 |
round | string|number | '0' | 圆角 |
iconSize | string|number | "36" | 加载和失败时的图标大小。 |
placeBgColor | string | "#F5F5F5" | 占位背景色 |
placeDarkBgColor | string | "" | 点位暗黑时的背景,如果不填写默认填充inputDarkBgcolor |
fadeShow | boolean | true | 是否显示过渡动画 |
lazy | boolean | true | 图片懒加载 |
draggable | boolean | false | 是否允许拖动。 |
showMenuByLongpress | boolean | false | - |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | - | - | - |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|