[TOC] ## vue样式参数化可以直接使用:style绑定属性即可 ### 父子组件情况下的使用 **子组件** ``` <div class="modal-container" :style="{width:popWidth}"> </div> ``` 提供值可以是组件的props或者是data,这里贴一下props ``` props: { //弹窗的宽度 popWidth: { type: String, default: "1300px" }, } ``` **父组件** 引用这个组件的时候就可以通过参数传递进来了 ``` <popup popWidth="1500px"></popup> ``` ### 直接使用 上面是父子组件的情况下使用，直接使用如下。直接这样绑定样式即可    ## 除了直接绑定值，也可以使用一个方法来进行处理后，返回一串数据 下面简单介绍一下这种方法。 ### 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" }, ``` ### 注意就算方法没有参数的时候也要加上括号哦 应该是这个样式的,绑定方法哪里要加上括号哦 ``` :style="methods.calDynamicHeight()" ``` 不应该是这个样子的 ``` :style="methods.calDynamicHeight" ``` ## 颜色的参数化，传递颜色 颜色的参数化也一样可以像上面那么设置，如果不是很好设置的情况下，比如修改某个组件内部的样式，比如修改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> ```