[Day 14] 实作-页面选单 v-menu v-btn

今天来做选单啦

先来看一下 Vuetify 提供的 Menus组件，他这个比较适合选单复杂的程序，

就是上面一排，然後每个都可以点开子选单的那种，

因为我的系统页面没这麽多，所以我又翻了一阵子，想挑个适合的组件

後来看了一圈，还是用最简单的 Button 来做好了，

Vuetify有个很贴心的功能，像Button这种有很多属性的组件，有时候单看说明可能不好理解用途，

他会做成这种范例功能，只要点击属性就可以预览结果。

增加按钮

那一样在App.vue，v-main里 的上面先加上5个按钮

v-row 跟 v-col 属於 Grid System 的部分，这边就先不提

<v-main>
      <!-- 给应用提供合适的间距 -->
      <v-container fluid>
        <v-row
          align="center"
          justify="space-around"
        >
          <v-col>
            <v-btn text block>
              首页
            </v-btn>
          </v-col>
          <v-col>
            <v-btn text block>
              找活动
            </v-btn>
          </v-col>
          <v-col>
            <v-btn text block>
              主题推荐
            </v-btn>
          </v-col>
          <v-col>
            <v-btn text block>
              节庆活动
            </v-btn>
          </v-col>
          <v-col>
            <v-btn text block>
              相关网站
            </v-btn>
          </v-col>
        </v-row>
        <!-- 如果使用 vue-router -->
        <div id="app">
          <img src="./assets/logo.png">
          <router-view/>
        </div>
      </v-container>
    </v-main>

这是加上按钮後的样子，看起来有一点样子了，

不过按钮的字有点小，滑鼠滑过的变色也不是我要的

程序码的部分也有点冗长，可以来改造一下

利用 v-for 渲染menu

首先按钮的部分，除了名称以外其他的程序码都是重复的，

可以把它用v-for的方式递回渲染，先改v-main的部分

<v-main>
      <!-- 给应用提供合适的间距 -->
      <v-container>
        <v-row
          align="center"
          justify="space-around"
        >
          <v-col v-for="item in menus"
                 :key="item.key"
                 :name="item.value"
          >
            <v-btn
              text
              block
              @click="$router.push(item.routerName)" <!-- 点击後会用router切换到对应的页面 -->
            >
              {{ item.title }}
            </v-btn>
          </v-col>
        </v-row>
        <!-- 如果使用 vue-router -->
        <div id="app">
          <img src="./assets/logo.png">
          <router-view/>
        </div>
      </v-container>
    </v-main>

然後在script的地方，增加menu的清单

value : 设定一个key值

routerName : 到时候在 /router/index.js 那页，要设定的分页路径

title : 画面上要显示的名字

<script>
export default {
  name: 'App',
  data() {
    return {
      menus: [
        { value: 1, routerName: 'index', title: '首页' },
        { value: 2, routerName: 'search', title: '找活动' },
        { value: 3, routerName: 'topic', title: '主题推荐' },
        { value: 4, routerName: 'festival', title: '节庆活动' },
        { value: 5, routerName: 'other', title: '相关网站' },
      ],
    };
  },
};
</script>

先确认一下前端画面，看起来跟原本的一模一样！

差别在点击按钮时，网址列 / 後面会跟着变动

变更按钮样式

好的，接下来修改按钮的样式

我想要字体放大 + 滑鼠移过时变色成绿色的

把按钮放大

字体变大如果用最懒人的方法，就是在v-btn加上 x-large属性，这样就会放大字 + 加高按钮高度

<v-btn
    text
    block
    x-large <!-- 加上这个 -->
    @click="$router.push(item.routerName)"
>
    {{ item.title }}
</v-btn>

更改hover样式

先把父组件的 v-col 加上 id，然後针对 父组件 id = menus 的 v-btn设定样式，

点击後更改颜色则用 v-ripple设定，套用预设的class green --text

<v-col
	   id="menus"   <!-- 加上id -->
	   v-for="item in menus"
	   :key="item.key"
	   :name="item.value"
>
       <v-btn
           text
           block
           x-large
           @click="$router.push(item.routerName)"
           v-ripple="{ class: 'green--text' }"   <!-- 点击後更改颜色 -->
        >
              {{ item.title }}
        </v-btn>
</v-col>

<style>
...

#menus .v-btn::before {  /* 针对 父组件 id = menus 的 v-btn设定样式 */
  background-color: green;
}
</style>

大功告成！