在Vue中使用tippy.js，封装为指令调用

文档地址

atomiks.github.io/tippyjs/

效果预览

demo.webwlx.cn/#/tips

封装为指令

// 封装提示指令
import tippy from 'tippy.js';
// 未导入全部，请根据文档自行导入所需样式文件
import 'tippy.js/dist/tippy.css';
import 'tippy.js/themes/light.css';
import 'tippy.js/themes/light-border.css';
import 'tippy.js/animations/scale.css';
import 'tippy.js/animations/scale-extreme.css';
//  创建tips
function createdTips(el, binding) {
  if (!binding.value.content) {
    // 删除class
    removeTips(el);
    return false;
  }
  // 添加 data-tips class
  el.classList.add('data-tips');
  let defaultConfigProps = {
    animation: 'scale-extreme',
  };
  tippy(el, Object.assign(defaultConfigProps, binding.value));
}
//  销毁
function removeTips(el) {
  el._tippy ? el._tippy.destroy() : '';
  el.classList.remove('data-tips');
}
// 封装指令
const tips = {
  mounted(el, binding) {
    createdTips(el, binding);
  },
  updated(el, binding) {
    createdTips(el, binding);
  },
  // 卸载
  unmounted(el) {
    removeTips(el);
  },
};
export default tips;

挂载指令

单组件引入

<!-- vue3 -->
<script setup>
  import tips from './tips.js';
  const vTips = tips;
</script>
<!-- vue2 -->
<script>
  export default {
    directives:{tips}
  }
</script>

全局引入main.js

// vue3
import tips from './tips.js';
app.directive('tips', tips);
// vue2
import tips from './tips.js';
Vue.directive('tips', tips);

使用指令

<n-button v-tips="{ content: '这是一个默认提示' }">Default</n-button>
<n-button v-tips="{ content: '这是一个默认提示', theme: 'light' }" type="tertiary"> Tertiary </n-button>
<n-button v-tips="{ content: '这是一个默认提示', theme: 'light-border' }" type="primary"> Primary </n-button>