vue 自定义指令展开列表动画支持vue3 ts

vue自定义指令展开列表动画

vue指令基础

1.新建一个 instructions,ts js版本请自行修改 2 复制粘贴下面代码

class Instructions {
    public app : any = "";

    public init(app : any) {
        this.app = app;
        this.open();
    };
// 展开详情
private open(){
        this.app.directive('dzs-open',{
            mounted(el : any, binding : any) {
                el.setAttribute('data-height', el.offsetHeight);
                if(!binding.value){
                    el.style.height = 0;
                    el.style.overflow = "hidden";
                    el.style.padding = 0;
                    el.style.transition =  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
                    return ;
                }
                el.getAttribute('data-height') && (el.style.height = el.getAttribute('data-height') + "px");
                el.style.padding = "";
                el.style.margin = "";
                setTimeout(() => {
                    el.style.overflow = "";
                },0.3 * 1000)
            },
            updated(el : any, binding : any){
                if(!binding.value){
                    el.style.height = 0;
                    el.style.overflow = "hidden";
                    el.style.padding = 0;
                    el.style.transition =  ".3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out";
                    return ;
                }
                el.getAttribute('data-height') && (el.style.height = el.getAttribute('data-height') + "px");
                el.style.padding = "";
                el.style.margin = "";
                setTimeout(() => {
                    el.style.overflow = "";
                },0.3 * 1000)
            }
        })
    }
}

export default new Instructions();

3.在main.ts 导入 instructions,ts

import instructions from "./utils/instructions" ;

4.初始化指令

// 初始化指令
instructions.init(app);

5.在html中使用指令就可以了

<div v-dzs-open>
    xxxxxxx
div>

6.end