![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue组件封装
memory_zzz
这个作者很懒,什么都没留下…
展开
-
Vue封装公告信息无缝滚动展示
效果如图所示:代码如下:<template> <div class="container"> <div id="box" ref="box"> <div class="marquee-box" ref="marquee" @mouseover="menter" @mouseleave="mleave" > <p ref="c.原创 2021-09-28 14:23:10 · 373 阅读 · 0 评论 -
Vue封装文字超出一行,省略号显示,鼠标悬浮展示全部
效果图:为大家提供了两个版本,一个是Vue+iview,一个是Vue+elementui,代码如下:一、 Vue+iview1)NormalTextTooltipol.vue组件代码<template> <div class="tooltip-wrap"> <Tooltip ref="tlp" :content="text" effect="dark" :disabled="!tooltipFl.原创 2021-09-10 16:02:06 · 5832 阅读 · 0 评论 -
vue实现换肤功能
elementui+less实现换肤功能效果图iview+scss实现换肤功能效果图一:用elementui+less实现换肤功能1.新建color.less文件和theme.less文件,放置到assets/less文件夹中2.color.less文件文件代码如下:@import url('./theme.less');.themea { .theme();//默认的样式}.t...原创 2021-09-10 09:09:23 · 1431 阅读 · 0 评论 -
Vue进度条
<template> <div> <div class="Progress"> <div class="jindu" :style="{ width: jindu + '%' }"></div> </div> <div class="Progress-button"> <el-button @click="start()" type="primary" plai...原创 2021-09-06 11:38:28 · 343 阅读 · 0 评论 -
Vue封装Tabs标签页
示例一组件Tabs:<template> <div class="my-tabs"> <div class="tabs-bar"> <div class="tabs-bar-nav"> <div class="tabs-tab" v-for="(tab, index) in tabList" :class="[tabIndex == tab.原创 2021-08-25 16:36:25 · 4838 阅读 · 1 评论