答案 0 :(得分:0)
我希望我参加晚会不会太晚,因为这个问题到现在已经有一个月了,但我觉得迟到总比没有好。
如果您知道该类别的索引,则可以使用以下代码:
data () {
let msg = '';
return {
msg: msg,
rgbValue: '',
newColor: {
color: msg
}
}
},
components: {
HeaderComponent: require('./HeaderComponent.vue')
},
methods: {
msgFunc: function () {
colorsRef.push(this.newColor);
const app = document.querySelector('#app');
const rgbValueContainer = document.querySelector('.rgb-value');
if (this.msg[0] !== '#') {
this.msg = '#'
}
app.style.backgroundColor = this.msg
function convert(hex) {
hex = hex.replace('#', '');
const r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
const g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
const b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
this.rgbValue = convert(this.msg)
rgbValueContainer.style.opacity = '1'
this.msg = '#'
}
如果您只知道名称,则需要迭代这些类别:
<section class="input-container">
<label for="inputLabel">Type your HEX color | Click & Press enter</label>
<input type="text" id="inputLabel" v-model="msg" @change="msgFunc" @click="sharpStr">
</section>