vue常用的组件库网址：https://github.com/vuejs/awesome-vue
1.v-tooltip的安装
npm install --save v-tooltip2.全局引入：import VTooltip from ‘v-tooltip‘ Vue.use(VTooltip)3.实例：
<template>
<div class="mine">Mine
<button v-tooltip="‘You have ‘ + count + ‘ new messages.‘">按钮</button>
<br>
<br>
<button v-tooltip.bottom="‘You have 200 new messages.‘">按钮11</button>
<Nav />
</div>
</template>
<script>
import Nav from ‘../nav‘
export default {
name: ‘Mine‘,
components: {
Nav
},
data() {
return {
count:100
}
}
}
</script>
<style lang="css" scoped>
</style>
--------------------------------------------------------------------------------------------------------------
1.安装
npm install vue-progressbar --save2.全局引入：
import Vue from ‘vue‘
import VueProgressBar from ‘vue-progressbar‘
import App from ‘./App‘
const options = {
color: ‘#bffaf3‘,
failedColor: ‘#874b4b‘,
thickness: ‘5px‘,
transition: {
speed: ‘0.2s‘,
opacity: ‘0.6s‘,
termination: 300
},
autoRevert: true,
location: ‘left‘,
inverse: false
}
Vue.use(VueProgressBar, options)3.实例：
<template>
<div class="order">
order
<vue-progress-bar></vue-progress-bar>
<Nav />
</div>
</template>
<script>
import Nav from ‘../Nav‘
export default{
name:"Order",
components:{
Nav
},
data(){
return{
}
},
mounted () {
// [App.vue specific] When App.vue is finish loading finish the progress bar
this.$Progress.finish()
},
created () {
// [App.vue specific] When App.vue is first loaded start the progress bar
this.$Progress.start()
// hook the progress bar to start before we move router-view
this.$router.beforeEach((to, from, next) => {
// does the page we want to go to have a meta.progress object
if (to.meta.progress !== undefined) {
let meta = to.meta.progress
// parse meta tags
this.$Progress.parseMeta(meta)
}
// start the progress bar
this.$Progress.start()
// continue to next page
next()
})
// hook the progress bar to finish after we‘ve finished moving router-view
this.$router.afterEach((to, from) => {
// finish the progress bar
this.$Progress.finish()
})
}
}
</script>
<style lang="css" scoped>
</style>
原文地址：https://www.cnblogs.com/xiao-peng-ji/p/11406602.html