TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue样式参数化。vue样式绑定值。vue绑定样式。vue可配置样式。颜色参数化,传递颜色
1307
人阅读
2021/1/8 18:56
总访问:
3997268
评论:
0
收藏:
0
手机
分类:
前端
[TOC] ## vue样式参数化可以直接使用:style绑定属性即可 ### 父子组件情况下的使用 **子组件** ``` <div class="modal-container" :style="{width:popWidth}"> </div> ``` 提供值可以是组件的props或者是data,这里贴一下props ``` props: { //弹窗的宽度 popWidth: { type: String, default: "1300px" }, } ``` **父组件** 引用这个组件的时候就可以通过参数传递进来了 ``` <popup popWidth="1500px"></popup> ``` ### 直接使用 上面是父子组件的情况下使用,直接使用如下。直接这样绑定样式即可 ![](https://img.tnblog.net/arcimg/aojiancc2/1496dbdd10c74ec18151b6136a2d8c2d.png) ![](https://img.tnblog.net/arcimg/aojiancc2/53925d3c66a64a618acf14810c3a53e9.png) ![](https://img.tnblog.net/arcimg/aojiancc2/a291bf3f81f74ae0b2e547e9d728f7bb.png) ## 除了直接绑定值,也可以使用一个方法来进行处理后,返回一串数据 下面简单介绍一下这种方法。 ### vue页面 ``` <div :style="columnStyleDeal(columnConfig)"> </div> ``` ### js: ``` methods: { // 处理列配置中的样式方法 columnStyleDeal: function (columnConfig) { let columnConfigItem = {} // 如果有配置列宽 if (columnConfig.width) { columnConfigItem["width"] = columnConfig.width } // 如果有配置paddingLeft if (columnConfig.paddingLeft) { columnConfigItem["paddingLeft"] = columnConfig.paddingLeft } return columnConfigItem } } ``` 其中的配置项可以是: ``` { width: "70px", paddingLeft: "20px" }, ``` ## 颜色的参数化,传递颜色 颜色的参数化也一样可以像上面那么设置,如果不是很好设置的情况下,比如修改某个组件内部的样式,比如修改element-ui 里边card那个头部的样式等,我们可以针对性的给头部颜色写几套样式嘛,但是参数就传递样式名就行了撒。 **比如这里写了两个关于样式的样式** 一个是headerdeepcolor,一个是headerredcolor ``` <style lang="scss" scoped="scoped"> .app-container-loadPortChargesTable { .headerdeepcolor { background-color: #3cba7b; color: #fff } .headerredcolor { background-color: #b87ecc; color: #fff } } </style> ``` **使用的时候** 先在需要的地方给上一个参数绑定样式 ``` :class="headerClass" ``` vue3子组件这样接收父组件的参数: ``` const props = defineProps({ //子组件接收父组件传递过来的值 title: String, headerClass: String }) //使用父组件传递过来的值 const { title } = toRefs(props) const { headerClass } = toRefs(props) ``` 父组件引用子组件的时候根据需要传递参数即可: ``` <LoadPortChargesTable title="起运地费用" header-class="headerdeepcolor" ref="LoadPortChargesTableRef"></LoadPortChargesTable> <LoadPortChargesTable title="目的地费用" headerClass="headerredcolor" ref="DestPortChargesTableRef"></LoadPortChargesTable> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}