タグに自動で色がつくようにしました。なお、同一のタグは同一の色がつくようになっています
タグのコンポーネントはこんな感じ
<template>
<b-badge pill v-bind:style="'background-color : #'+ string_to_utf8_hex_string(tag).substr(1,6) + ';'" class="mr-2" v-bind:to="to">{{tag}}</b-badge>
</template>
<script>
export default {
props:["tag","to"],
methods : {
string_to_utf8_hex_string : function(text){
var bytes1 = this.string_to_utf8_bytes(text);
var hex_str1 = this.bytes_to_hex_string(bytes1);
return hex_str1;
},
string_to_utf8_bytes : function(text){
var result = [];
if (text == null)
return result;
for (var i = 0; i < text.length; i++) {
var c = text.charCodeAt(i);
if (c <= 0x7f) {
result.push(c);
} else if (c <= 0x07ff) {
result.push(((c >> 6) & 0x1F) | 0xC0);
result.push((c & 0x3F) | 0x80);
} else {
result.push(((c >> 12) & 0x0F) | 0xE0);
result.push(((c >> 6) & 0x3F) | 0x80);
result.push((c & 0x3F) | 0x80);
}
}
return result;
},
bytes_to_hex_string : function(bytes){
var result = "";
for (var i = 0; i < bytes.length; i++) {
result += this.byte_to_hex(bytes[i]);
}
return result;
},
byte_to_hex : function(byte_num){
var digits = (byte_num).toString(16);
if (byte_num < 16) return '0' + digits;
return digits;
}
}
}
</script>
この後はワードクラウドとか作りたい
私的Nuxt.jsでどのアーキテクチャを選ぶかフロー
2021年4月27日(火) 15時51分42秒 | 176 viewWebサイトの変更を監視してLINEに即通知を行うシステムを開発・提供しています
2021年6月28日(月) 5時21分3秒 | 163 viewLIFF(LINE)ブラウザでwindow.prompt()が期待する動作をしない
2021年10月16日(土) 14時22分50秒 | 120 viewtweetlogを作った
2020年10月10日(土) 3時22分55秒 | 34 viewなんかタグが一文字だと表示されない
2020年10月27日(火) 15時59分28秒 | 5 view