vue项目全局组件

最新推荐文章于 2024-09-26 10:41:08 发布

✎﹏ℳ๓敬坤

最新推荐文章于 2024-09-26 10:41:08 发布

阅读量223

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_44291585/article/details/106329329

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个基于Vue的公共组件——底部导航栏的实现。该组件使用了v-for循环展示底部菜单项，通过@click事件跳转到不同的页面，并且能够切换选中状态的图片。组件还包含了自定义的方法和样式，适用于多种应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公共组件

<template>
    <div class="bottom-box">
        <div v-for="(item,index) in bottomArray" :key="index" @click="goUrl(item.url)">
            <img :src="active==index?item.selectImg:item.backgoundImg" alt="">
            {{item.title}}
        </div>
    </div>
</template>

<script>
export default {
  name: 'homeBottom',
  props:['active'],
  data(){
      return {
          bottomArray:[
              {title:'行情',selectImg:require('../assets/bottom/hangqing-select.png'),backgoundImg:require('../assets/bottom/hangqing.png'),url:'/quotes'},
              {title:'策略',selectImg:require('../assets/bottom/celve-select.png'),backgoundImg:require('../assets/bottom/celve.png'),url:'/strategy'},
              {title:'社区',selectImg:require('../assets/bottom/zhitu-select.png'),backgoundImg:require('../assets/bottom/zhitu.png'),url:'/community'},
              {title:'试炼场',selectImg:require('../assets/bottom/zsc-select.png'),backgoundImg:require('../assets/bottom/zsc.png'),url:'/provingGround'},
              {title:'我的',selectImg:require('../assets/bottom/my-select.png'),backgoundImg:require('../assets/bottom/my.png'),url:'/mine'},
          ]
      }
  },
  methods:{
      goUrl(val){
          this.$router.push(val);
      }
  }
}
</script>

<style lang="scss" scoped>
    .bottom-box{
        position: fixed;
        bottom: 0;
        height: 50px;
        left: 0;
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        border-top: 1px solid #ccc;
        div{
            width: 20%;
            height: 50px;
            text-align: center;
            font-size: 12px;
            img{
                width: 20px;
                height: 20px;
                display: block;
                margin: 5px auto;
            }
        }
    }
</style>

main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//注册组件，通过公共组件的name调用
import homeBottom from '@/components/bottom.vue'
//自定组件的名字
Vue.component("home-bottom",homeBottom)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

需要调用组件的页面

//直接调用定义的名字即可
<home-bottom></home-bottom>