Bom dia,
Eu percebi uma outra forma de rotacionar imagem com menos linha de código. veja o seguinte
<my-responsive-img v-my-transform.animate.reverse="15" :url="photo.url" :title="photo.titulo"/>Na home o instrutor colocou o modificador reverse para rotacionar a imagem anti-horário
e no transform ficaria assim
import Vue from 'vue'
Vue.directive('my-transform', {
bind(el, binding, vnode) {
let current = 0;
el.addEventListener('dblclick', function () {
let increment = binding.value || 90;
if(binding.modifiers.reverse){
current-=increment;
} else {
current += increment;
}
el.style.transform = `rotate(${current}deg)`;
if (binding.modifiers.animate) el.style.transition = 'transform 0.5s';
})
}
});Mas eu analisando, eu percebi que podemos economizar linhas de código, deixando o mesmo assim
<my-responsive-img v-my-transform.animate="-15" :url="photo.url" :title="photo.titulo"/>tiro o reverse e passo o 15 negativo
e no transform ficaria assim
import Vue from 'vue'
Vue.directive('my-transform', {
bind(el, binding, vnode) {
let current = 0;
el.addEventListener('dblclick', function () {
let increment = binding.value || 90;
current += increment;
el.style.transform = `rotate(${current}deg)`;
if (binding.modifiers.animate) el.style.transition = 'transform 0.5s';
})
}
});veja que economizei um IF e linhas de código.
Agora minha dúvida é, os dois jeitos estão certos? Quais dos dois são boas práticas de programação?
