Zadání
Napíšeme si komponentu, která nám zobrazí chemickou rovnici na webové stránce. Použijeme knihovnu Katex a VueJS 2.
Řešení
Název komponenty bude chemula (chemical formula) a bude obsahovat jeden atribut formula. Zobrazí chemickou rovnici pomocí Katexu.
Deklarace komponenty
Vue.component("chemula", {
replace: true,
props: {
formula: {
type: String,
default: ""
}
},
data: function(){
return {
chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz() +->=",
numbers: "0123456789",
upIndex: "^",
dnIndex: "_",
leftBracket: "{",
rightBracket: "}"
}
},
computed: {
textToKatex: function(){
var text, katexStr;
katexStr = "";
text = " " + this.formula + " ";
for (var i = 1; i < text.length-1; i++){
if (this.chars.indexOf(text[i]) !== -1){
if (this.numbers.indexOf(text[i-1]) !== -1)
katexStr = katexStr + this.rightBracket + text[i];
else
katexStr = katexStr +text[i];
}
else
if (this.numbers.indexOf(text[i]) !== -1){
if (this.chars.indexOf(text[i-1]) !== -1)
katexStr = katexStr + this.dnIndex + this.leftBracket + text[i];
else
katexStr = katexStr + text[i];
}
};
katexStr = katexStr.replace(/\s\s+/g, ' ');
katexStr = katexStr.replace(/->/g, '\\rightarrow ');
katexStr = katexStr.replace(/=/g, '\\rightarrow ');
try {
return katex.renderToString(katexStr, {throwOnError: false});
} catch (err) {
return ""
}
}
},
template: '<span v-html="textToKatex"></span>'
});
Do atributu formula vložíme zápis chemické rovnice. Ten se prochází znak po znaku a postupně se přidává do proměnné katexStr i se speciálními znaky (dolní index, složená závorka). Výsledný zápis se do HTML kódu vloží v části template, která zobrazí řetězec v Katexu, získaný v části computed.
Použití v HTML kódu
Do webové stránky vložíme komponentu s rovnicí, např.:
<chemula formula="H2SO4 = H2O + SO3" ></chemula>
Jak to vypadá prakticky si můžete ověřit tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).
