0

我正在尝试使用由 vue-router（vue-router 4 和 vue 3）切换的垂直窗格制作类似手风琴的用户界面。这里给出了一个非常紧凑的例子。垂直排列有3个平底锅，路由器切换其中的一些内容。这个概念有效，但我希望窗格平滑地收缩和扩展。我确信带有 css 动画的组件可以解决该任务，但无法找出正确的样式。

我尝试根据样式应用 js 转换，但它的行为很奇怪：

<!DOCTYPE html>
<html>
<body>
    <div id="app">
    </div>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script lang="javascript">
    const Default = {template: `<div> <h1> DEFAULT </h1> </div>`}
    const DefaultShrinked = {template: `<div>  <router-link to="/">DEFAULT</router-link> </div>`}
    const About = {template: `<div> <h1> ABOUT </h1> </div>`}
    const AboutShrinked = {template: `<div>  <router-link to="/about">ABOUT</router-link> </div>`}
    const News = {template: `<div> <h1> NEWS </h1> </div>`}
    const NewsShrinked = {template: `<div>  <router-link to="/news">NEWS</router-link> </div>`}

    const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes: [
            { path: '/', name: 'default', component: Default },
            { path: '/about', name: 'about', component: About },
            { path: '/news', name: 'news', component: News },
        ]
    })

    const Main = {
        components: {
        'pane-default-shrinked': DefaultShrinked,
        'pane-about-shrinked': AboutShrinked,
        'pane-news-shrinked': NewsShrinked,
        },
        methods: {
        isPaneActive(name) {
            return this.$route.name == name
        },
        enter(el, done) {
            el.style.transition = "1s"
            el.style.float = "left"
            el.style.width = "60%"
            done()
        },
        leave(el, done) { 
            el.style.transition = "1s"
            el.style.float = "left"
            el.style.width = "20%"
            done()
        },
        },
        template: `
        <div class=boyan>
        <transition @enter="enter" @leave="leave">
        <div v-if="isPaneActive('default')" style="width: 60%; float: left;" key="active"> <router-view></router-view> </div>
        <div v-else style="width: 20%; float: left;"  key="inactive"> <pane-default-shrinked></pane-default-shrinked></div>
        </transition>
        
        <transition @enter="enter" @leave="leave">
         <div v-if="isPaneActive('about')" style="width: 60%; float: left;"  key="active"> <router-view></router-view> </div>
        <div v-else style="width: 20%; float: left;"  key="inactive"> <pane-about-shrinked></pane-about-shrinked> </div>
        </transition>
  
        <transition @enter="enter" @leave="leave">
        <div v-if="isPaneActive('news')" style="width: 60%; float: left;" key="active"> <router-view></router-view> </div>
        <div v-else style="width: 20%; float: left;" key="inactive"> <pane-news-shrinked></pane-news-shrinked> </div>
        </transition>
        </div>
        `,
    }

    const app = Vue.createApp(Main);
    app.use(router);
    app.mount('#app');
</script>
</script>
</body>
</html>

如果有人帮助我，我将不胜感激。

4

0 回答 0