VUE(Aside-Button)之组件封装

最新推荐文章于 2026-06-17 16:48:14 发布

原创最新推荐文章于 2026-06-17 16:48:14 发布 · 560 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了如何在Vue中封装一个用于导航的Aside-Button组件，包括组件的注册、数据定义以及样式设置。组件使用了Iconfont的图标，通过Unicode或Font class展示，并提供了点击响应功能。此外，还分享了组件封装的通用步骤，帮助开发者提高代码复用性和项目效率。

VUE
大多数系统导航栏都大同小异，所以对一些常用的左侧导航栏做了一下封装，有需要的copy，非常之简单。
components下index.js注册：
import 你的组件名 from ‘./你的包名/你的组件名’
Vue.component(你的组件名.name, 你的组件名)。

全局mian.js里注册：
import ‘./components/index’

id：作为点击响应的绑定（当然你也可以有其他方式）。
icon：Iconfont的图标Unicode或者Font class。
\u3000：占位，为了你的按钮名不一致而对其（在script中直接用）。

度娘直接搜索vue文本占位符）

	<div class="main"
	v-on:click="click(item.id)"
	v-for="item in itemList" v-bind:key="item.id">
		<i class="iconfont aside_icon_home" v-html="item.icon" ></i>		
		<label class="aside_title" >{{item.label_value}}</label>
	</div>

script

export default {
name:‘aside_button’,
data() {
return{
icon:"",
label_value:"",
itemList:[
{id:1, icon:‘’,label_value:‘首\u3000页’},
{id:2, icon:‘’,label_value:‘按钮名’},
{id:3, icon:‘’,label_value:‘按钮名’},
{id:4, icon:‘’,label_value:‘按钮名’},
{id:5, icon:‘’,label_value:‘按钮名’},
{id:6, icon:‘’,label_value:‘按钮名’},
{id:7, icon:‘’,label_value:‘按钮名’},
{id:8, icon:‘’,label_value:‘按钮名’},
{id:9, icon:‘’,label_value:‘按钮名’},
{id:10, icon:‘’,label_value:‘按钮名’},
]
}
},
methods :{
click :function(id){
console.log(id)
}
}
}