标签：uniapp loading val default image array noImage type 图片

<template>

    <view :class="canPreview ? 'customImg' : 'customImg isloading'">

        <image :src="image" :mode="mode" fade-show lazy-load :class="iclass" @error="onImageError" @load="onImageLoad"
        @tap="tap?tap():preview(image)"
            >
        </image>
    </view>

</template>

<script>
export default {
    props: {
        // 事件
        tap:{
              type: Function,
              default:null
        },
        //图片前缀
        preFix: {
            type: String,
            default: process.uniEnv.imgPreFix
        },
        src: {
            type: String,
            default: ''
        },
        //样式class
        iclass: {
            type: String,
            default: ''
        },
        mode: {
            type: String,
            default: 'aspectFill'
        }
    },
    data() {
        return {
            image: '',
            canPreview: false,
            noImage: require("@/static/images/noImage.jpg")
        }
    },
    watch: {
        src: {
            handler(val) {
                if (val) {
                    // this.preFix+val
                    this.image = val
                } else {
                    console.log('空地址');
                    this.image = this.noImage
                }
            },
            immediate: true
        }
    },
    methods: {
        onImageLoad() {
            this.canPreview = true

        },
        onImageError() {
            console.log('无效路径图片');
            this.image = this.noImage
        },
        preview(e) {

            if (this.canPreview) {
                let array = [];
                array.push(e);
                uni.previewImage({
                    urls: array,
                    current: array[0]
                });
            }
        }

    }
}
</script>

<style lang="scss" scoped>
.customImg {
    display: inline-block;
}
.isloading {
    background: url("@/static/images/loading2.gif") no-repeat center;
    background-size: 100%;
}
</style>

<template>
  <view style="width:10px;height:50px">
    <customImg :src="require('@/static/images/success.png')" iclass="image-small" :tap="cc"></customImg>
    <text>11</text>
  </view>
</template>

<script>
import customImg from './test.vue'
export default {
  components: { customImg },
  data() {
    return {}
  },
  methods: {
    cc(){
      console.log(455454);
    }

  }

}
</script>

<style lang="scss" scoped>
</style>

标签：uniapp,loading,val,default,image,array,noImage,type,图片
来源： https://www.cnblogs.com/7c89/p/16120229.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。