Vue大屏实战四：公共组件边框的实现

博主逸尘

已于 2024-05-21 19:29:17 修改

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue大屏文章标签： vue.js 大屏边框组件

于 2022-09-19 15:45:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_16497617/article/details/126935241

Vue大屏专栏收录该内容

8 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在Vue大屏项目中创建一个公共的边框组件，通过预览、页面布局和组件定义的步骤，实现边框的复用，提高开发效率。

文章目录

1.最终效果预览
2.页面布局
3.组件的定义

1.最终效果预览

实际我们在开发大屏项目中，基本上整个项目用到的边框是通用的，这样我们把它提取出来做成一个公共组件，之后的项目直接引用即可。

2.页面布局

主页面引用

        <div >
          <ItemWrap title="线上线下用码数">
            ......
          </ItemWrap

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

博主逸尘

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Vue大屏实战八：生命周期飞线图的实现

博主逸尘

03-22

754

vue自定义坐标实现飞线图

一个开源的Vue大屏数据展示组件库(2)

2401_84447262的博客

05-01

327

设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。

3 条评论您还未登录，请先登录后发表或查看评论

VUE3.2 + vue-echarts + DataV 数据可视化大屏（项目）

CLONG_521的博客

03-08

1万+

VUE3.2+VUE-echarts+DataV 数据可视化界面（项目）

用Vue搭建一个大屏数据可视化页面实战一（Vue实战系列）

最新发布

weixin_45690427的博客

09-23

1166

/ 时间显示// 地图加载状态// 核心统计数据todaySales: 1258936, // 今日销售额orders: 8532, // 订单量avgPrice: 147.5, // 客单价conversionRate: 3.8, // 转化率onlineUsers: 15632, // 在线用户newUsers: 2341, // 新增用户activeRate: 68.5, // 活跃率repeatRate: 42.3 // 复购率});// 热销商品数据。

用Vue搭建一个大屏数据可视化页面实战二（Vue实战系列）

球球不吃虾WHR2349博客

04-20

5733

接上文把之前写的代码抽离成组件  <template> <div class="panel-hezi" ref="panelhezi"> <div class="panel-hezi-background"></div> <!-- <svg class="svg-head" preserveAspectRatio="

不要图片？CSS实现大屏常见不规则边框（系列二）

苏苏就是小苏苏的博客

04-09

2188

👏不要图片？CSS实现大屏常见不规则边框（系列二），速速来Get吧~🥇文末分享源代码

Vue组件，带标题的边框

weixin_41740463的博客

08-31

2697

适用于vue框架下，需要带标题的边框的场景

前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面

qq_45359288的博客

05-03

4267

目录1. 登录/退出功能1.1 登录概述1.2 token 原理分析1.3 登录功能实现1.3.1 Git 创建分支1.3.2 渲染Login组件并实现路由重定向1.3.3 设置背景颜色并在屏幕中央绘制登录盒子1.3.4 绘制默认头像1.3.5 绘制登录表单区域1.3.6 绘制带icon的input输入框1.3.7 实现表单的数据绑定1.3.8 实现表单的数据验证1.3.9 实现表单的重置功能1.3.10 实现登录前表单数据的预验证，配置axios发起登录请求 1. 登录/退出功能 1.1 登录概

实现一个拖拽排序组件：Vue 3 + TypeScript + Tailwind CSS

idree的博客

04-08

922

实现一个拖拽排序组件：Vue 3 + TypeScript + Tailwind CSS

vue 在电视屏幕上组件会出现黄色边框

lfl18326162160的博客

08-15

173

outline: none; -webkit-tap-highlight-color: transparent;

数据可视化大屏的css背景+边框+demo

12-26

7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css，非常酷炫，开箱即用，做大数据的可以使用哦

用vue写的可视化大屏

03-22

用vue、echarts写的可视化大屏，下载之后，运行npm install，加载完之后npm run dev就可以了

一个vue2中大屏适配的组件

m0_69696922的博客

04-02

1167

大屏适配

vue开发——可视化大屏

weixin_70056219的博客

05-30

1万+

利用vue做前端大屏时的总结及一些解决方法

不要图片？CSS实现大屏常见不规则边框（系列一）

苏苏就是小苏苏的博客

03-28

4295

不要图片？CSS实现大屏常见不规则边框（系列一）

前端实现自适应屏幕数据可视化大屏（vue + v-scale-screen组件 + dataV组件）

YangJing17的博客

08-31

7202

众所周知，未来的数据可视化趋势已成为了必然性，越来越多的企业、政府等的应用场景应用都会普及，销售、教育、医疗、贸易等行业领域也涉及广泛，根据实时的监控数据，把最新的数据展现在大屏幕上，清楚地看到自己想要看到的数据，同时根据这些数据做出决策的调整。数据可视化是指通过图表、图形、地图等视觉要素来表现数据中包含的信息的倾向、异常和模式。简而言之，数据可视化是用图形表达数据和信息。

Vue可视化大屏模板

qq_52600282的博客

09-27

865

该demo实现了可视化大屏的大概布局且实现屏幕的适配使用CSS --Scale方法实现。

vue+elmentui实现table行有边框、自动滚动组件

qq_43637824的博客

12-05

2922

技术栈：vue + elmentui组件功能：行边框 + 自动滚动参数：表格宽高+最大高度+数据+表头。

vue页面线条小狗边框样式

12-11

在Vue中创建一个线条小狗边框样式，你可以使用HTML、CSS和Vue的指令来实现。首先，在HTML部分，你可以创建一个div或者其他容器来表示小狗： ```html <template> <div class="dog-border" :style="{ borderColor: dogColor }">  </div> </template> ``` 然后，在CSS中定义`dog-border`类以及边框样式，并通过`:style`属性动态绑定到vue实例的`dogColor`数据： ```css <style scoped> .dog-border { border: 2px solid; border-radius: 50%; /* 如果你想让边框呈圆形 */ width: 100px; /* 或者设置合适的宽度和高度 */ height: 100px; } </style> ``` `dogColor`可以在JavaScript中根据需要改变，例如： ```javascript export default { data() { return { dogColor: 'black', // 黑色作为默认颜色 }; }, methods: { changeDogBorder(color) { this.dogColor = color; }, }, }; ``` 用户可以通过点击按钮或者调用`changeDogBorder`方法来改变小狗边框的颜色。