O komponentách ve VueJS již na tomto blogu vyšlo: VueJS 2: komponenty a VueJS 2: píšeme komponentu - zobrazení věku
Vlastní komponenta pomocí VueJS
Zadání
Vytvoříme komponentu, která zobrazí schématickou značku rezistoru. Použijeme přitom SVG grafiku.
Řešení
Poznámka: jde o ukázku, nebude se provádět kontrola vstupních údajů (hodnoty atributů).
Komponenty se bude jmenovat svg-resistor (anglický název), bude mít atributy: x (x-ová souřadnice), y (y-ová souřadnice), rotate (úhel natočení), color (barva).
Na webové stránce se použije tímto způsobem (ovšem uvitř elementu <svg>!):
<svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor>
Každý z atributů x, y, rotate, color má svou výchozí hodnotu; nebude-li zadán (jako v tomto případě, kdy chybí color), bude použita výchozí hodnota.
Deklarace komponenty
Vlastnosti (properties) komponenty jsou v části props, u každé je uveden datový typ a výchozí hodnota.
V části computed (vypočítané nebo vyhodnocené hodnoty) se skládá textový řetězec, jehož výsledek může vypadat např.: translate(100, 80), rotate(-90)a slouží k posunu (translate) a otočení (rotate) komponenty při jejím vykreslení uvnitř elementu SVG.
Část template definuje vizuální podobu komponenty, tj. to, co VueJS vloží do webové stránky namísto komponenty <svg-resistor></svg-resistor>
Vue.component("svg-resistor", {
props: {
x: {
type: Number,
default: 0
},
y: {
type: Number,
default: 0
},
rotate: {
type: Number,
default: 0
},
color: {
type: String,
default: "black"
}
},
computed: {
transform: function(){
return "translate(" + this.x + ", " + this.y + "), " + "rotate(" + this.rotate + ")";
}
},
template: '<path :transform="transform" d="M 0, 0 h 10 v -7.5 h 30 v 15 h -30 v -7.5 M 40, 0 h 10 " :stroke="color" fill="none" />'
});
Použití v HTML
<svg width="302" height="302">
<svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor>
<svg-resistor x="30" y="80" :rotate="0" ></svg-resistor>
</svg>
Výsledek
Jak vypadá výsledek se můžete podívat tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).
Žádné komentáře:
Okomentovat