vue3 自定义指令-滚动条自动滚动到底部

main.js

自定义指令钩子函数
created 元素初始化的时候
beforeMount 指令绑定到元素后调用 只调用一次
mounted 元素插入父级dom调用
beforeUpdate 元素被更新之前调用
update 这个周期方法被移除 改用updated
beforeUnmount 在元素被移除前调用
unmounted 指令被移除后调用 只调用一次

// 滚动条自动滚动底部
app.directive("scrollDown", {
  updated (el) {
    // el ---> dom元素
    el.scrollTo({
      top: el.scrollHeight - el.clientHeight,
      behavior: "smooth"
    })
  }
})

组件使用

自定义指令监听div 内容变化后执行 指令方法；

在这里插入代码片
<template>
  <div v-scrollDown></div>
</template>