Для создания похожего эффекта на Vue.js 3, который будет аналогичен функции slideToggle в jQuery, мы можем использовать анимацию и директивы.
1. Внедрите CSS-стили для анимации
К сожалению, Vue.js 3 не предоставляет встроенных анимаций, поэтому нам придется использовать анимацию CSS. Создайте стили анимации в соответствии с вашими требованиями по прятанию и отображению элементов. Например:
.slide-enter-active, .slide-leave-active { transition: height 0.5s; } .slide-enter, .slide-leave-to { height: 0; overflow: hidden; }
2. Создайте компонент Toggle
Создайте новый компонент Vue.js с именем Toggle. В этом компоненте определите статус isVisible и метод toggle, который будет изменять статус isVisible на противоположное значение.
<template> <div> <button @click="toggle">Toggle</button> <div v-if="isVisible" v-bind:class="{ 'slide-enter-active': isVisible, 'slide-leave-active': !isVisible, 'slide-enter': isVisible, 'slide-leave-to': !isVisible }"> <!-- Ваш контент --> </div> </div> </template> <script> export default { data() { return { isVisible: false }; }, methods: { toggle() { this.isVisible = !this.isVisible; } } }; </script>
3. Используйте Toggle компонент
Подключите компонент Toggle к вашему приложению и используйте его в нужных местах. Кнопка "Toggle" запускает метод toggle в компоненте Toggle, который изменяет статус isVisible на противоположное значение, а анимация CSS автоматически применяется, чтобы создать эффект slideToggle.
<template> <div> <toggle></toggle> <toggle></toggle> <toggle></toggle> </div> </template> <script> import Toggle from './Toggle.vue'; export default { components: { Toggle } }; </script>
Это краткое объяснение того, как достичь эффекта slideToggle, похожего на jQuery, с помощью Vue.js 3. Конечно, в зависимости от ваших потребностей и требований, вы можете настроить этот компонент дальше, добавив аргументы для определения длительности анимации или стилей анимации.