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

博主逸尘

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

阅读量1.5k

点赞数

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

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

本文链接：https://blog.csdn.net/qq_16497617/article/details/126935241

版权

Vue大屏专栏收录该内容

8 篇文章 39 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

文章目录

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

1.最终效果预览

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

2.页面布局

主页面引用

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

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

博主逸尘

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue大屏实战四：公共组件边框的实现

Vue大屏开发之公共边框组件的实现
复制链接

扫一扫

专栏目录

订阅专栏

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

12-26

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

vue大屏三屏显示包含地图组件

05-25

总的来说，这个Vue大屏项目利用了Vue CLI 3的便利，结合地图组件，提供了灵活的多屏幕内容展示功能，适用于需要地理数据可视化和多视图展示的场合。通过合理的项目结构和配置，确保了代码质量和开发效率。开发者只...

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

vue3边框流光特效

m0_59074147的博客

09-19

1573

流光边框

vue开发——可视化大屏

weixin_70056219的博客

05-30

2170

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

VUE CSS流动边框特效（一）

LEON_RAY

03-18

3264

效果： HTML： <div class="divSide" /> CSS： .divSide { width: 460px; height: 994px; position: relative; background-color: #021025; border: 1px solid rgba(11, 85, 140, 0.5); &::before { content: ""; position: absolute; ...

gin-vue-blog自建博客

2401_84435700的博客

04-26

419

front 后期我会用flutter重写运行&&部署[server]AppMode = debug # debug 开发模式，release 生产模式HttpPort = :3000 # 项目端口JwtKey = 89js82js72 #JWT密钥，随机字符串即可[database]Db = mysql #数据库类型，不能变更为其他形式DbHost = 127.0.0.1 # 数据库地址DbPort = 3306 # 数据库端口DbUser = ginblog # 数据库用户名。

Vue3实现大屏el-table表格隔行变色、表格无任何边框、鼠标悬浮变色

weixin_48240707的博客

05-18

3561

vue3结合element plus 实现大屏表格效果为无任何边框且隔行变色

使用Vue实现数据可视化大屏功能(二)

初学者

03-08

9896

数据可视化页面一般是在浏览器中进行全屏的展示，全屏容器会根据当前的浏览器屏幕窗口大小自动的进行缩放处理，在浏览器全屏之后，整个的全屏容器就会充满全屏。注意在使用之前请将body的margin属性设置为0。Vue中引入代码如下< template > < div id = " index " > < dv-full-screen-container > 数据可视化

Vue2大屏项目的简要总结（vue、JavaScript、echarts、组件封装）

博客

04-23

6518

主要就是使用vue进行大屏开发使用到的一些知识总结，通过引用组件、下包、封装js，等方法实现

Vue+DataV+Echarts组件创建炫酷科技大屏~(注释多多)

Itmei的博客

04-30

9420

DataV介绍：组件库基于Vue 开发，主要用于构建大屏，数据展示页面即数据可视化边框：带有不同边框的容器装饰：增加视觉效果图表：图表组件基于Charts封装，轻量，易用其他：飞线图/水位图/轮播表等 1.入门开始 1.创建Vue项目 1.安装Vue/Cli查看更多 npm i -g @vue/cli 2.使用命令，创建Vue项目 vue create datav-demo 创建成功 3.打开项目进入终端，在项目目录下，运行命令 npm install @jiaminghi/data-

科技感大屏边框框架 datav

taotaobaobei的博客

03-06

395

主要用于构建大屏（全屏）数据展示页面即数据可视化

Vue+Echarts监控大屏实例四：智慧农业监控模板实例

04-11

Vue+Echarts监控大屏实例四：智慧农业监控模板实例，包括源码，开发文档、素材等。使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。高德地图并...

Vue+Echarts监控大屏实例十：智慧养老监控模板实例

05-30

使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。高德地图并展示对于报表，界面尺寸进行调整使用vh及rem设置对应尺寸以便自适应，代码使用vue3...

Vue开发实战教程：从基础到精通-Markdown文章材料.zip

最新发布

06-13

【Vue开发】实战教程：从基础到精通的全方位指南对于想要掌握Vue.js前端开发框架的开发者来说，一本全面而深入的实战教程是不可或缺的。我们为您精心准备了这份《Vue开发实战教程：从基础到精通》的Markdown文章...

vue大屏可视化demo

01-25

vue大屏可视化demo 使用方法： # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...

VUE大屏可视化实战

weixin_42258633的博客

11-22

5190

VUE大屏可视化/自适应布局/echarts实践/element实践

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

苏苏就是小苏苏的博客

03-28

3012

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

input按钮的background-image属性兼容性问题

weixin_34038652的博客

08-22

607

一般来说，设置input按钮的background-p_w_picpath属性，在Firefox,Chrome等标准W3C浏览器中，只要写二行css:background-p_w_picpath: url(p_w_picpaths/hello.jpg);background-repeat: no-repeat;但是在IE下，只写上面二行CSS，input元素是不会显示背景图片...

vue外边框怎么设置

weixin_42577735的博客

02-14

4815

Vue 中可以通过 CSS 来设置外边框。你可以在组件的样式表中添加如下代码来设置外边框： .your-class { border: 1px solid black; } 然后在组件的模板中使用该 class： <template> <div class="your-class"> <!-- Your content goes here --&gt...

vue如何封装一个公共组件

03-27

Vue的组件是可重用的UI元素，可以封装为公共组件供其他组件和应用程序使用。下面是一个简单的步骤来封装一个Vue的公共组件。 1. 创建组件文件：在项目中创建一个组件文件，命名为Example.vue。 2. 编写组件内容：在Example.vue文件中定义组件的模板、样式和行为。 3. 导出组件：在Example.vue文件中使用export default将组件导出，以便其他组件和应用程序可以使用它。 4. 引入组件：在需要使用该组件的文件中，使用import Example from './Example.vue'导入该组件。 5. 注册组件：在需要使用该组件的Vue实例中，使用Vue.component('example', Example)注册该组件，其中'example'是组件的名称，可以在模板中使用该名称来引用该组件。 6. 使用组件：在该Vue实例的模板中使用<example></example>标签来使用该组件。下面是一个简单的示例，演示如何封装一个Vue的公共组件： Example.vue文件： ``` <template> <div class="example"> <h2>{{ title }}</h2> <p>{{ content }}</p> </div> </template> <script> export default { name: 'Example', props: { title: String, content: String } } </script> <style> .example { border: 1px solid #ccc; padding: 10px; } .example h2 { margin-top: 0; } </style> ``` 在需要使用该组件的文件中： ``` <template> <div> <example title="Hello" content="This is an example component"></example> </div> </template> <script> import Example from './Example.vue' export default { components: { Example } } </script> ``` 在Vue实例中注册组件： ``` Vue.component('example', Example) ``` 使用组件： ``` <example title="Hello" content="This is an example component"></example> ```

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交