在SCSS（SASS）变量VUEJS中使用V-Bind

Question

我正在研究Vuejs中的一个组件，我想制作一个颜色属性，该属性采用十六进制的颜色，并使用SASS的RGBA功能转换为RGB颜色并与之合作。

props: {
    color: {
        type: String,
        default: '#195cff'
    }
}

我试图这样做：

$color: v-bind(color);

input {
    background: rgba($color, 0.5);
}

但是我认为在SASS变量中无法访问V-Bind。我该如何完成这项工作。

Answer 1

这绝对是不可能的，但是我找到了一种获得类似结果的方法。

props: {
        color: {
            type: String,
            default: '#195cff',
        },
    },
    methods: {
        hexToRgb(hex) {
            let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }
    },
    data: function () {
        return {
            rgbColor: `${this.hexToRgb(this.color).r},${this.hexToRgb(this.color).g},${this.hexToRgb(this.color).b}`
        }
    }

和在CSS中

input {
    background: rgb(v-bind(rgbColor),0.5);
}