vuerouter-11_常用组件库

Posted 2022-08-22 xiao-peng-ji

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>