0
点赞
收藏
分享

微信扫一扫

vue自定义指令--实现每个页面title不同,且可以动态修改

Mezereon 2021-09-30 阅读 69
Vue脚手架
1、main.js中定义全局指令:v-myTitle
Vue.directive('myTitle', {
  inserted: function (el, binding) {
    const { value } = binding
    // 方式1,直接给v-myTitle标签的 data-title 属性赋值
    if (el.dataset.title) { 
      document.title = el.dataset.title
    } 
    // 方式2,通过指令传参({{xxx}})
    else if (value && value.title) { 
      document.title = value.title
    }
  },
  update (el, binding) {
    const { value } = binding
    if (el.dataset.title) {
      document.title = el.dataset.title
    } else if (value && value.title) {
      document.title = value.title
    }
  }
})
2、在各个vue页面中,使用v-myTitle配置页面title

方式一:直接给v-myTitle标签的 data-title 属性赋值

<template>
<div v-myTitle :data-title="textTitle">
    // 页面代码块
</div>
</template>
<script>
export default {
  name: 'Login',
  data () {
      textTitle: '自定义标题001'
    }
  }
}
</script>

方式2,通过指令传参({{xxx}})

<template>
<div v-myTitle="{title:textTitle}">
    // 页面代码块
</div>
</template>
<script>
export default {
  name: 'Login',
  data () {
      textTitle: '自定义标题001'
    }
  }
}
</script>
举报

相关推荐

0 条评论