vue 自定义image组件

介绍

1:当图片加载失败时,给出错误提示。

2:当图片加载中时,给出加载提示。

3:图片处理模式:等比缩放/裁剪/填充/...

1、图片加载状态处理

通过给图片绑定load事件与error事件处理函数来判断图片加载状态。当图片加载完成时会触发load事件;图片加载出错会触发error事件

// 样本
<img src="..." @load=onLoad @error=onError>

2、图片模式

通过css属性 object-fit(https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) 来控制图片如何适应容器大小。

3、代码

<template>
    <div class="tm-image" :style="style" @click="onClick">
        <img :src="src"
             :alt="alt"
             :style="{‘object-fit‘: mode}"
             @load="onLoad"
             @error="onError">
        <div v-if="this.loading" class="tm-image-load">
            <slot name="loading">加载中</slot>
        </div>
        <div v-if="this.error" class="tm-image-error">
            <slot name="error">加载出错</slot>
        </div>
    </div>
</template>
<script>
    import suffixPx from ‘../../utils/suffixPx.js‘;

    export default {
        name: "tm-image",
        data() {
            return {
                loading: true,
                error: false
            }
        },
        props: {
            src: String,
            alt: String,
            mode: {  // 模式:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
                type: String,
                default: "fill",
                validator(value) {
                    return [‘contain‘, ‘cover‘, ‘fill‘, ‘none‘, ‘scale-down‘].includes(value);
                }
            },
            width: [String, Number],
            height: [String, Number]
        },
        computed: {
            style() {
                return {
                    width: suffixPx(this.width),
                    height: suffixPx(this.height)
                }
            }
        },
        methods: {
            onClick(event) {
                this.$emit(‘click‘, event);   // 向父节点传递一个自定义事件
            },
            onLoad(event) {
                this.loading = false;
                this.$emit(‘loading‘, event); // 向父节点传递一个自定义事件
            },
            onError(event) {
                this.loading = false;
                this.error = true;
                this.$emit(‘error‘, event); // 向父节点传递一个自定义事件
            }
        }
    }
</script>
<style scoped>
    .tm-image{
        position: relative;
        overflow: hidden;
    }
    .tm-image .tm-image-load,
    .tm-image .tm-image-error{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #f2f2f2;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tm-image img {
        width: 100%;
        height: 100%;
    }
</style>

个人项目

Vue组件https://gitee.com/whnba/component

淘宝天猫粉丝专享优惠券

原文地址:https://www.cnblogs.com/whnba/p/10961510.html

时间: 2024-10-06 13:24:10

vue 自定义image组件的相关文章

vue自定义select组件

1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据,但在我平时用v-model只是在input中使用过,只知道v-model可以双向绑定数据,但并不清楚其中的实现过程,所以 需要清晰的了解v-model是什么,如下. <input v-model="test"/> <input :value="test"

Vue自定义日历组件

今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart="true" :calendarType="1" :markDate="markDate" :markDateClass="markDateClass" :agoDayPrevent="agoDayPrevent&qu

教你撸一个简单的Vue自定义动态组件

components下创建 toast 文件夹, 文件夹里面创建 toast.vue 和 index.js toast.vue: <template> <div id="toastWrap" :class="[className,showAnimation ?'fadein':'fadeout',appointId==''?'fixed':'absolute']" v-if="show"> <span :class=

vue自定义分页组件---切图网

vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重新切图,重新VUE开发的项目来说,自定义分页组件才是应万变的最佳打开方式. html <template> <div class="pagination" v-if="totalPage>1"> <span v-if="!s

vue自定义日期组件

vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 calendar 的样式 Props type(String): 默认 single(选择单天),可选 range(选择多天) / time(选择单天 + 时间) isAbandon(Boolean): 默认 true,早于系统日期的日期选项是否不可选 showInput(Boolean): 默认

vue 自定义模版组件

vue的组件可以自定义内容,属性 又有slot作配合 可以做出很多自定义模版 例子 <body> <div id="app"> <m-modal modal-title="提醒" @on-ok="ok"></m-modal> <m-modal> <ul slot="modal-content"> <li v-for="item of lis

vue 自定义封装组件 使用 model 选项

自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同的目的.model 选项可以用来避免这样的冲突: Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input

Vue自定义插件(组件)Loading

vue.use()方法可以用来注册组件或者插件. 只要传入一个install()方法既可以注册 install(Vue,option){} 可以通过几种方式来自定义开发 Vue.$loading = -//直接挂载在Vue类上 Vue.propertype.$loading = -//直接挂载在Vue原型链上,可以通过this.$loading调用 Vue.component()//注册一个全局组件 Vue.directive()//注册全局指令 Vue.mixin()//全局混入,可以理解为继

vue自定义事件将组件内的数据传输到实例中去使用

vue自定义事件将组件内的数据传输到实例中去使用 <body> <div id="app"> <h1 style="color:deeppink">{{ outer_title }}</h1> //③给实例绑定一个方法 <hello :reader="new_msg"  v-on:chang_event="chang_tit"></hello> </