vue样式参数化。vue样式绑定值。vue绑定样式。vue可配置样式。颜色参数化，传递颜色

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>