Karam
Articles71
Tags52
Categories15
组件封装——collage组件

组件封装——collage组件

一、需求分析

  • 根据元素宽度有打开和关闭的折叠效果

    二、代码编写

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    const transitionStyle = 'all .4s ease-in-out'

    const Transition = {
    beforeEnter(el) {
    el.style.transition = transitionStyle;
    if (!el.dataset) el.dataset = {};

    el.style.height = 0;
    },

    enter(el) {
    if (el.scrollHeight !== 0) {
    el.style.height = `${el.scrollHeight}px`;
    } else {
    el.style.height = '';
    }
    el.style.overflow = 'hidden';
    },

    afterEnter(el) {
    el.style.transition = '';
    el.style.height = '';
    },

    beforeLeave(el) {
    if (!el.dataset) el.dataset = {};
    el.style.height = `${el.scrollHeight}px`;
    el.style.overflow = 'hidden';
    el.style.display = 'block'
    },

    leave(el) {
    if (el.scrollHeight !== 0) {
    el.style.transition = transitionStyle;
    el.style.height = 0;
    }
    },

    afterLeave(el) {
    el.style.transition = '';
    el.style.height = '';
    },
    };

    export default {
    name: 'CollapseTransition',
    functional: true,
    render(h, {
    children
    }) {
    const data = {
    on: Transition,
    };
    return h('transition', data, children);
    },
    };