Will all the default values of vue components become invalid after they are introduced into prop?

I want to implement: 

(:colorpropsp)

problems encountered: 

getStyle()colorfont-size

Target: 

1.stylegetStyle()colorfont-size()
2.colorcolorfont-sizegetStyle()()
3.colorfont-weight(font-size)()
4.font-weightfont-italic(:),()

here is a small example I wrote: 

:)

<template>
    <div>
        <p :style="getStyle()">haha

    </div>
</template>
<script>
export default {
    name: "Test",
    props: {
        textStyle: Object
    },
    methods: {
        getStyle() {
            return this.textStyle || {
                "color": "-sharp999",
                "font-size": "22px"
            }
        }
    }
}
</script>
Vue.js
Mar.13,2021 
    getStyle() {
        return Object.assign({
            'color': '-sharp999',
            'font-size': '22px'
        },this.textStyle)
    }

I understand your problem is to merge the style attribute of the default setting with the externally passed attribute. If the two have the same attribute, the externally passed attribute will prevail, and if this attribute is not passed in externally, the default value will be used. For some properties that do not have a default value, they use the properties that are passed in externally.

The simpler way to

is to merge the two attributes directly with Object.assign . Also, I recommend that you use the computed calculation property instead of methods to define this, because the calculation attribute can calculate new values in real time based on external property changes. 

<template>
    <div>
        <p :style="getStyle">haha

    </div>
</template>
<script>
export default {
    name: 'Test',
    props: {
        textStyle: Object
    },
    computed: {
        getStyle() {
            const defaultStyle = {
                'color': '-sharp999',
                'font-size': '22px'
            }
            return Object.assign(defaultStyle, this.textStyle || {})
        }
    }
}
</script>

what if it's a method

Previous: Why doesn't WeChat Mini Programs have a background picture on Android 6.0now?

Next: Jquery problem alert does not come out

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu