Vue自定义指令封装title，实现隐藏和显示

自定义指令

      <div class="detailtitle" v-title>
        <i class="iconfont icon-xiaoyuhao"></i>
        <span>{{动态获取数据}}</span>
      </div>

<style scoped lang="scss">
.detail {
  margin-bottom: 0.7rem;
  .detailtitle{
    height: .44rem;
    line-height: .44rem;
    width: 100%;
    position: fixed;
    background: #fff;
    left: 0;
    top: 0;
    text-align: center;
    transition: .3s all linear;
    i{
      position: absolute;
      left:.04rem;
      height:.2rem;
      background:red;
      border-radius: 50%;
    }
  }

//引入Vue
import Vue from 'vue'
Vue.directive('title',{
  //插入到dom之后的钩子函数inserted
  inserted(el,binding){
  	//binding.value = binding.value || 50
    //初始化的时候为隐藏状态
    el.style.display = 'none'
    //屏幕滚动之后需要作出判断
    window.onscroll = function (){
      //获取屏幕滚动的距离，并且定义一个屏幕滚动的距离为50，以50为基准，作出判断
      let sTop = document.documentElement.scrollTop || document.body.scrollTop  //兼容
      if(sTop > 50){
        el.style.display = 'block'
      }else{
        el.style.display = 'none'
      }
    }
  },
  unbind(el){//指令与dom元素解绑的时候，需要清空绑定的屏幕滚动距离，否则在任何一个界面都会触发window.onscroll
    window.onscroll = null
  }
})

但是需要注意的是，如果想要给自定义指令添加动画效果transition在display中切换没有效果，可改成透明度

 el.style.opacity = '0'

官方文档