更新记录

1.0.4（2025-03-25） 下载此版本

将微信小程序是否开启长按菜单默认值修改为false

1.0.3（2025-03-13） 下载此版本

更新使用文档

1.0.2（2025-02-12） 下载此版本

修复一点小问题

平台兼容性

组件名: xt-image

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view>
        <xt-image :src="imageUrl" radius='10rpx' preview></xt-image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imageUrl: 'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e'
            }

        },
        methods: {},
    }
</script>

<style lang="scss">

</style>

自定义加载动画

<xt-image :src="imageUrl">
            <template #load>
                加载中...
            </template>
</xt-image>

自定义加载失败内容

    <xt-image :src="imageUrl">
            <template #error>
                加载失败
            </template>
    </xt-image>

xt-image 属性和方法