vuerouter-11_常用组件库

vue常用的组件库网址：https://github.com/vuejs/awesome-vue

1.v-tooltip的安装

npm install --save v-tooltip
2.全局引入：

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 --save
2.全局引入：

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>