Navbar.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <div>
  3. <van-nav-bar :title='appTitle'>
  4. <template #left>
  5. <van-icon name='wap-home-o' size='1.5em' color='#000' @click='backApp' />
  6. </template>
  7. <template #right>
  8. <van-icon name='scan' size='1.5em' color='#000' @click='scan' />
  9. <van-icon name='search' size='1.5em' color='#000' style='margin-left:0.5em' @click='query' />
  10. </template>
  11. </van-nav-bar>
  12. </div>
  13. </template>
  14. <script>
  15. import Vue from 'vue'
  16. import { NavBar, Icon, Tabbar, TabbarItem } from 'vant'
  17. Vue.use(NavBar).use(Icon)
  18. import { mapGetters } from 'vuex'
  19. import store from '@/store'
  20. export default {
  21. name: 'navbar',
  22. props: {},
  23. components: {},
  24. data() {
  25. return {}
  26. },
  27. computed: {
  28. ...mapGetters(['appTitle']),
  29. },
  30. beforeMount() {},
  31. mounted() {},
  32. methods: {
  33. // 返回工程信息化主菜单
  34. backApp() {
  35. console.log('backApp')
  36. },
  37. // 扫码
  38. scan() {
  39. console.log('扫码')
  40. },
  41. // 全局搜索
  42. query() {
  43. console.log('全局搜索')
  44. },
  45. },
  46. }
  47. </script>
  48. <style lang='less' scoped>
  49. </style>