iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
0

今天想要實現component render的效果。
如下圖想要有一個menu的鈕,可以收放一些常用功能,且可以在每個頁面都有。
https://ithelp.ithome.com.tw/upload/images/20181030/20108846FHSy4aSVEG.png

先建立一個menubutton.vue

我先簡單套用vue material的speed dial去實現,
並將我的route設定在裡面,如此讓頁面可以互相切換。

<template>
<div>
    <md-speed-dial class="md-bottom-right">
        <md-speed-dial-target style="background-color:red">
            <md-icon>menu</md-icon>
        </md-speed-dial-target>

        <md-speed-dial-content>

            <md-button class="md-icon-button">
                <md-icon>add</md-icon>
            </md-button>

            <md-button class="md-icon-button" @click="GoRoute('/category')">
                <md-icon>home</md-icon>
            </md-button>

            <md-button class="md-icon-button" @click="GoRoute('/user')">
                <md-icon>people</md-icon>
            </md-button>

            <md-button class="md-icon-button" @click="GoRoute('/house')">
                <md-icon>domain</md-icon>
            </md-button>

            <md-button class="md-icon-button" @click="GoRoute('/contract')">
                <md-icon>content_paste</md-icon>
            </md-button>

        </md-speed-dial-content>
    </md-speed-dial>
</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class MenuButton extends Vue {
  GoRoute(route) {
    this.$router.push(route);
  }
}
</script>

<style scoped>
</style>

引用component

<template>
<div>
...
<MenuButton></MenuButton>
</div>
</template>

@Component({
  components: { MenuButton }
})

在要使用的component中,將MenuButton引入。

完成

今天先簡單實作component render。


上一篇
Day15 - PHP-Laravel MVC介紹
下一篇
Day17 - Vue & Transitions
系列文
VUE & PHP (Apache2) & Docker 實戰開發30

尚未有邦友留言

立即登入留言