firefox
есть такая нестандартная фича как -moz-element
, которая идеально подходит под задачу: canvas
движке(можно попробовать что-то такое), и тогда просто получать копию холста на меньший canvas
. Это более оптимально но требует переписывание всего и сложности основной работы.Vue.observable
\reactive
или vuex
), один из которых уменьшать с помощью transform: scale()
.html2canvas
, предложенный выше, имеет очень ограниченную область применения и вряд ли тут сработает, но можете попробоватьthis.$el.cloneNode(true)
и класть полученную копию в нужное место с тем же transform: scale()
, но это может весьма сильно тормозить в зависимости от количества элементов и частоты обновления. components: {
some: () => import('@/components/some.vue')
}
или Vue.component('some', () => import('@/components/some.vue'));
computed
? computed
не должен иметь сайдэффектов, только отдавать значение.computed
: при первом обращении к нему производится первое вычисление, а также, условно, вешается watch
на все реактивные свойства, к которым внутри него было обращение. Соответственно перевычисление computed
происходит исключительно если одно из этих свойств поменялось.computed
на стороне сервера вообще не кэшируется вроде, т.е. перевычисляется при каждом обращении. Инфа не 100%.) created
вешаешь обработчик на resize
(а лучше mediaQuery
addListener
\onchange
раз у тебя есть конкретный берйкпоинт), на destroyed
обязательно снимаешь обработчик. Сам обработчик ставит какую-то переменную в data
. <div class="lang-changer" @click="toggle = !toggle">
<div :class="toggle ? 'lang-tog': 'lang'">
<span :class="toggle ? 'a': 'b'">РУ</span>
<span :class="toggle ? 'x': 'y'"></span>
</div>
</div>
data(){
return {
toggle: false;
}
}
v-on:
\@
и v-bind:
\:
- это разные вещи и они работают по-разному.v-bind
на вход получает выражение, т.е. по сути чистый js, и исполняет его, при: :clickMethod=" $router.push('/auth')"
в свойство clickMethod
прилетит результат вызова $router.push('/auth')
.<MainButton @clickMethod=" $router.push('/auth')"
условно(на самом деле там внутренняя система) происходит следующее: MainButton.addEventListener('clickMethod', ($event) => {
this.$router.push('/auth')
})
clickMethod
коллбэк, ты должен собственно передать туда заранее заданный в компоненте метод:<MainButton :clickMethod="clickMethod"
methods: {
clickMethod() {
this.$router.push('/auth')
}
}
Но так делать ни в коем случае не надо. Так пишут в React и это очень криво. Надо использовать именно v-on:
\@
и $emit
, как посоветовал Alex_mos . Это гораздо более удобно и контролируемо. Ну и в принципе это vue-way: вниз props - вверх события.