个人Vue组件库(连载中...)

最新推荐文章于 2025-08-03 17:02:33 发布

weixin_54475760

最新推荐文章于 2025-08-03 17:02:33 发布

阅读量209

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue html vue.js

本文链接：https://blog.youkuaiyun.com/weixin_54475760/article/details/125118999

这是一个基于Vue.js的组件库介绍，包含布局、主导航栏、走马灯、登录注册、左导航、小组件（如进度条和统计表）等。每个组件都有详细的使用说明和示例代码，例如rr-nav用于创建导航栏，rr-lamp用于实现走马灯效果，rr-login和rr-register则用于登录注册界面。这些组件易于理解和集成，只需引入相应的js文件即可。

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

组件库：

不需要脚手架，全部为html和js文件，只需引入vue.js，并且认真理解组件功能即可

布局

主导航栏

components:{
	"rr-nav":rrNavMenu
},

<rr-nav 
    :iflogin=绑定true或false，true表示已登录状态，false表示未登录状态
	:data=绑定数组list:[{
				id: 'actbtn',
				text: '一栏',
				page: '网页路径'
			}]
	logo=数组类型，logo图片路径
	head=数组类型，头像图片路径
	@home=点击头像事件
	@value=接收一个数字参数，是list数组的索引
	@login=点击登录注册事件
>
				
</rr-nav>

走马灯

components:{
	"rr-lamp":rrLamp
},

<rr-lamp 
    width=500px 
    height=400px 设置长宽，默认500*400 
    :data=绑定list=[
				{img:'',url:'',btn:'navactbtn' },
				{img:'',url:'',btn:'navbtn'},
				{img:'',url:'',btn:'navbtn'},
				{img:'',url:'',btn:'navbtn'},
			], img:图片路径,url:点击图片后跳转的路径
    @value=fun3 点击后返回的函数，参数为所点击的url
>

</rr-lamp>

登录注册

components:{
	"rr-login":rrlogin,
	"rr-register":rregister
},

<rr-login 
    @value=传递两个参数，账户和密码
    @close=右上角关闭按钮，控制其显示状态
    @toregister=去注册
    v-show=绑定其显示状态
>

</rr-login>


<rr-register
    @value=传递两个参数，要注册的账户和密码
    @close=右上角关闭按钮，控制其显示状态
    @tologin=左上角返回登录界面
    v-show=绑定其显示状态
>

</rr-register>

左导航

components:{
	"rr-leftnav":rrleftNavigation
},

<rr-leftnav 
    :data=绑定list[
                    {id: 'actbtn',text: '1栏',page: ''},
				    {id: 'btn',text: '2栏',page: ''},
				    {id: 'btn',text: '3栏',page: ''},
				    {id: 'btn',text: '4栏',page: ''}
			      ]
    @value=返回一个参数，所点击按钮的索引
>
管理系统
</rr-leftnav>

小组件

进度条

components:{
	"rr-progress":rrProgress
},

<rr-progress 
    width=String 长，默认：'500px' 
    height=String 高，默认：'10px' 
    color=String 进度条颜色也可写rgb()：'green' 
    value=String 进度百分比值：'60' 
    showvalue=bool值，是否显示百分比值
>

</rr-progress>

统计表

components:{
	"rr-chart":rrChart
},

<rr-chart 
    :width=500 设置其长
    :height=400 设置其宽
    :max=10 设置最大值
    :level=10 分几个间隔 
    barstyle="mainly" 设置统计条样式
    :data=绑定list:[
				{text:'唱',value:4},
				{text:'跳',value:2},
				{text:'rap',value:7},
				{text:'篮球',value:10},
				{text:'music',value:3},
			   ],

>

</rr-chart>