] }
}
第四步：具体使用范例
我做了一个 tooltip 的示例，鼠标放上去会出现 tooltip 提示
//template
<template>
<div class="content-wrap">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</template><script>
export default {
name: "componentsTooltips",
mounted: function() {
//在页面加载完毕后初始化 tooltip， 相当于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }
$('[data-toggle="tooltip"]').tooltip();
}
};
</script>
如果 eslint 报误，请设置 .eslintrc.js 文件。
module.exports = {
env: {
node: true,
jquery: true
}
};
本人测试结果如下：
参考文档：
Vue CLI3.0: https://cli.vuejs.org/zh/guide/webpack.html
Bootstrap tooltip ：https://v3.bootcss.com/javascript/#tooltips
Stackoverflow: https://stackoverflow.com/questions/42684661/adding-bootstrap-to-vue-cli-project
