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

文档地址

https://atomiks.github.io/tippyjs/

效果预览

http://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>