Material Design风格神框架vuetify 学习笔记

作者: 熊爸天下_56c7 | 来源:发表于2021-08-26 10:18 被阅读0次

一. 导航抽屉 v-navigation-drawer

v-navigation-drawer是用户用于导航应用程序的组件。
导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。在应用程序中，通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。

1. 抽屉的显示和隐藏 v-model绑定

要控制抽屉的显示和隐藏, 我们使用v-model来绑定一个标志位参数

<template>
  <div class="home">
    <v-toolbar dense dark light>
      <v-app-bar-nav-icon @click="show_flag = !show_flag "></v-app-bar-nav-icon>
    </v-toolbar>
    <v-navigation-drawer app color="indigo white--text" v-model="show_flag">
      hello
    </v-navigation-drawer>
  </div>
</template>


<script>
export default {
  data() {
    return {
      show_flag: false,
    };
  },
};
</script>

2. 抽屉的样式

(1). app化动态调整

组件作为应用程序布局的一部分。用于动态调整内容的大小。

<v-navigation-drawer app color="indigo white--text" v-model="show_flag">
      hello
    </v-navigation-drawer>

值得注意的是, 它是会根据设备宽度(设备类型)自动调整行为的

(2). 折叠式 clipped

    <v-navigation-drawer clipped color="indigo white--text" v-model="show_flag">
      hello
    </v-navigation-drawer>

(3). 隐藏蒙版 hide-overlay

    <v-navigation-drawer
      app
      hide-overlay
      color="indigo white--text"
      v-model="show_flag"
    >
    </v-navigation-drawer>

(4). 修改遮罩蒙版 overlay-color/overlay-opacity

我们可以使用overlay-color更改遮罩颜色
使用overlay-opacity更改遮罩透明度

    <v-navigation-drawer
      overlay-color = "indigo"
      overlay-opacity = "0.5"
      v-model="show_flag">

(5). 缩小化抽屉 mini-variant

<v-navigation-drawer
      app
      mini-variant
      color="indigo white--text"
      v-model="show_flag"
    >

我们还可以使用 mini-variant-width来控制最小宽度

    <v-navigation-drawer 
    v-model="show_flag" 
    mini-variant
    mini-variant-width="64">

(6). hover展开 expand-on-hover

平时会默认缩小,鼠标hover时才会展开

<template>
  <div class="home">
    <v-toolbar dense dark light>
      <v-app-bar-nav-icon @click="show_flag = !show_flag"></v-app-bar-nav-icon>
    </v-toolbar>
    <v-navigation-drawer 
    v-model="show_flag" 
    expand-on-hover
    mini-variant-width="64"
    >
      <v-list nav dense>
        <v-list-item-group
          v-model="group"
          active-class="deep-purple--text text--accent-4"
        >
          <v-list-item>
            <v-list-item-avatar>
              <img src="~assets/head.jpg" alt="alt" />
            </v-list-item-avatar>
            <v-list-item-title>熊爸天下</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-qqchat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>QQ:xxxxxx</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-wechat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>微信:xxxxxxx</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Email:xxxx@xxx.com</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>


<script>
export default {
  data() {
    return {
      show_flag: false,
      group: null,
    };
  },
};
</script>

(7). 右侧抽屉 right

    <v-navigation-drawer
      v-model="show_flag"
      right
      app>

(8). 抽屉背景 src

    <v-navigation-drawer
      v-model="show_flag"
      app
      src = "~assets/background.jpg">

(9). 底部弹出 bottom

底部弹出只有在在移动设备上从屏幕底部展开(只能遇到 mobile-breakpoint 时激活), 有没有app属性也会影响其行为

<v-navigation-drawer bottom v-model="show_flag" >
<v-navigation-drawer bottom v-model="show_flag" app>

无app属性

有app属性

(10). 不管屏幕尺寸如何, 抽屉都可以看到 permanent

肯定能看到, 连v-modle都不好使了

    <v-navigation-drawer permanent>

3.append插槽

<template>
  <div class="home">
    <v-toolbar dense dark light>
      <v-app-bar-nav-icon @click="show_flag = !show_flag"></v-app-bar-nav-icon>
    </v-toolbar>
    <v-navigation-drawer
      mini-variant-width="64"
      dark
      permanent
      app
    >
      <v-list nav dense>
        <v-list-item-group
          v-model="group"
          active-class="deep-purple--text text--accent-4"
        >
          <v-list-item>
            <v-list-item-avatar>
              <img src="~assets/head.jpg" alt="alt" />
            </v-list-item-avatar>
            <v-list-item-title>熊爸天下</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-qqchat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>QQ:xxxxxx</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-wechat</v-icon>
            </v-list-item-icon>
            <v-list-item-title>微信:xxxxxxx</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon large>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Email:xxxx@xxx.com</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
      <template v-slot:append>
        <div class="pa-2">
          <v-btn block color="error"> 注销 </v-btn>
        </div>
      </template>
    </v-navigation-drawer>
  </div>
</template>


<script>
export default {
  data() {
    return {
      show_flag: false,
      group: null,
    };
  },
};
</script>

二. 卡片组件

1. 卡片相关组件

(1). 卡片 v-card

(2). 卡片标题 v-card-title

(3). 卡片副标题 v-card-subtitle

(4). 卡片文本 v-card-text

(5). 卡片动作 v-card-actions

用于为卡片放置动作的容器

    <v-card outlined>
      <v-card-title primary-title>
        <v-avatar size="36">
          <img src="~assets/head.jpg" alt="alt" />
        </v-avatar>
        <span class="ml-2">熊爸天下</span>
      </v-card-title>
      <v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle>
      <v-card-text>
        lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
        consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor
        sit amet, consectetur
      </v-card-text>
    </v-card>

2. 卡片的样式

(1). 外轮廓线样式 outlined

<v-card outlined>

(2). 形状的样式 shaped

<v-card shaped>

(3). 瓦片样式 tile

3. 卡片的禁用 disabled

4. 卡片的加载状态 loading

<v-card outlined loading>

5. 和v-expand-transition配合实现弹出动画卡片

<template>
  <v-container>
    <v-card>
      <v-card-title>
        <v-avatar size="36">
          <img src="~assets/head.jpg" alt="alt" />
        </v-avatar>
        <span class="ml-2">熊爸天下</span>
      </v-card-title>
      <v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle>
      <v-card-text>
        lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
        consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor
        sit amet, consectetur
      </v-card-text>
      <v-card-actions>
        <v-btn text color="success" @click="reveal = !reveal">详情</v-btn>
        <v-btn text color="error">取消</v-btn>
      </v-card-actions>

      <!-- 初始隐藏的扩展卡片 -->
      <v-expand-transition>
        <v-card
          v-show="reveal"
        >
          <v-card-text>
            <v-card-title>人类起源</v-card-title>
            <p>
              阿努纳奇（Anunnaki）来自太阳系一个拥有椭圆轨道的行星，这个行星被称为“尼比鲁”，它的轨道周期为3600个地球年。
              在苏美尔，阿卡德，亚述以及巴比伦文明中，阿努纳奇人是创造人类的众神。
            </p>
          </v-card-text>
          <v-card-actions>
            <v-btn text color="success" @click="reveal = false"> 关闭 </v-btn>
          </v-card-actions>
        </v-card>
      </v-expand-transition>
    </v-card>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      reveal: false,
    };
  },
};
</script>

配合css实现详情卡

<template>
  <v-container>
    <v-card>
      <v-card-title>
        <v-avatar size="36">
          <img src="~assets/head.jpg" alt="alt" />
        </v-avatar>
        <span class="ml-2">熊爸天下</span>
      </v-card-title>
      <v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle>
      <v-card-text>
        lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
        consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor
        sit amet, consectetur
      </v-card-text>
      <v-card-actions>
        <v-btn text color="success" @click="reveal = true">详情</v-btn>
        <v-btn text color="error">取消</v-btn>
      </v-card-actions>

      <!-- 初始隐藏的扩展卡片 -->
      <v-expand-transition>
        <v-card
          v-if="reveal"
          class="transition-fast-in-fast-out v-card--reveal"
          style="height: 100%"
        >
          <v-card-text class="pb-0">
            <v-card-title>人类起源</v-card-title>
            <p>
              阿努纳奇（Anunnaki）来自太阳系一个拥有椭圆轨道的行星，这个行星被称为“尼比鲁”，它的轨道周期为3600个地球年。
              在苏美尔，阿卡德，亚述以及巴比伦文明中，阿努纳奇人是创造人类的众神。
            </p>
          </v-card-text>
          <v-card-actions class="pt-0">
            <v-btn text color="success" @click="reveal = false"> 关闭 </v-btn>
          </v-card-actions>
        </v-card>
      </v-expand-transition>
    </v-card>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      reveal: false,
    };
  },
};
</script>
<style>
.v-card--reveal {
  bottom: 0;
  opacity: 1 !important;
  position: absolute;
  width: 100%;
}
</style>

网友评论

本文标题：Material Design风格神框架vuetify 学习笔记

本文链接：https://www.haomeiwen.com/subject/mnkliltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！