WPCのBLOG

in heart

0%

vutify1

Posted on Edited on In Valine:

v-container

v-container 提供了将你的网站内容居中和水平填充的功能。 你还可以使用 fluid 属性将容器在所有视口和设备尺寸上完全扩展。 保持了之前 1.x 的功能，其中属性作为 v-container 上的类进行传递，以使应用辅助类（如 ma-#/pa-#/fill-height）生效。

v-col

v-col 包裹内容，它必须是 v-row 的直接子代。 这是 2.x 版本对 1.x 版本中 v-flex 的替代。

v-row

v-row 是 v-col 的容器组件。 它使用 flex 属性来控制其内栏的布局和流。 它使用的是 24px 的标准间隔。 这可以用 dense 属性来减小，或者用 no-gutters 来完全去除。 这是 2.x 版本对 1.x 版本中 v-layout 的替代。

v-spacer

v-spacer 是一个基本而又通用的间隔组件，用于分配父子组件之间的剩余宽度。 当一个 v-spacer 放置在子组件之前或之后时，组件将推到其容器的左右两侧。 当多个组件之间使用多个 v-spacer 时，剩余的宽度将均匀地分布在每个 spacer 之间。

icon

mdi-open-in-new 分享图标、mdi-home 回家图标、mdi-email 邮件图标、mdi-alarm 闹钟图标、mdi-record 点样式、mdi-folder 文件夹图标、mdi-folder-open 打开的文件夹图标、mdi-clear X图标、mdi-close-circle-outline 带圆的 X 图标、 mdi-cart 购物车图标、mdi-magnify 搜索图标、mdi-dots-vertical 更多图标、mdi-arrow-left-bold-box-outline 左箭头， mdi-arrow-right-bold-box-outline 右箭头、mdi-star 星标、mdi-book-variant 收藏书图标、mdi-airballoon 气球图标。

单选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-radio-group v-model="radios" column>
            <v-radio label="Radio 1" value="radio-1" color="red"></v-radio>
            <v-radio label="Radio 2" value="radio-2" color="green"></v-radio>
          </v-radio-group>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

说明：radios 双向绑定用来保存单选按钮的值，column row 控制列显示还是行显示

开关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-container>
            <v-switch v-model="sw" :label="`Switch: ${sw.toString()}`"></v-switch>
              <v-switch v-model="people" label="james" value="james"></v-switch>
            <v-switch v-model="people" label="mary" value="mary"></v-switch>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

说明：sw 存 boolean 型，people 数组存 value

复选框

1
2
3
4
5
6
7
8
9
<v-checkbox v-model="checked" :label="`Checkbox: ${checked.toString()}`" color="blue"></v-checkbox>
<v-checkbox v-model="selected" label="james" value="james"></v-checkbox>
<v-checkbox v-model="selected" label="mary" value="mary"></v-checkbox>
<v-checkbox indeterminate></v-checkbox>
<v-checkbox disable></v-checkbox>
<v-row align="center">
    <v-checkbox v-model="checked" hide-details class="shrink mr-2 mt-0"></v-checkbox>
    <v-text-field label="Include files"></v-text-field>
</v-row>

说明：与开关类似，不过多了不定状态和禁用状态，还可以内联文本框

徽章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<v-toolbar>
<v-tabs dark background-color="primary" grow>
  <v-tab>
    <v-badge color="pink" dot>One</v-badge>
  </v-tab>
  <v-tab>
    <v-badge color="grey" content="6">Two</v-badge>
  </v-tab>
  <v-tab>
    <v-badge color="deep-purple accent-4" icon="mdi-vuetify">Three</v-badge>
  </v-tab>
  <v-tab>
    <v-badge
        :value="hover"
        color="deep-purple accent-4"
        content="1000"
        left
        transition="slide-x-transition"
    >
      <v-hover v-model="hover">
        <v-icon color="grey lighten-1" large>mdi-account-circle</v-icon>
      </v-hover>
    </v-badge>
  </v-tab>
</v-tabs>
</v-toolbar>

<div>
  <v-btn class="mx-1" color="primary" @click="messages++">Send Message</v-btn>
  <v-btn class="mx-1" color="error" @click="messages = 0">Clear Notifications</v-btn>
</div>
<v-badge :content="messages" :value="messages" color="green" overlap>
  <v-icon large>mdi-email</v-icon>
</v-badge>

说明：dark 暗色主题颜色应用到组件，grow 强制占满空间。dot 点形状，content 徽标内容，icon 徽标图标，

left 位置(同样的有 bottom 和 overlap)，transition 动画效果，value 控制是否显示，v-hover 制造悬停效果，作用在图标上。

通过控制 content 和 value 可以进行更新。

横幅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<v-banner single-line :sticky="sticky">
  Hello world.
  <template v-slot:actions>
    <v-btn text color="deep-purple accent-4">Get Online</v-btn>
  </template>
</v-banner>

<template>
  <v-app>
    <v-container>
      <v-row class="text-center">
        <v-col>
          <v-banner>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nec sem id malesuada.
            <template v-slot:actions>
              <v-btn text color="primary">Dismiss</v-btn>
              <v-btn text color="primary">Retry</v-btn>
            </template>
          </v-banner>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

说明：single-line 单行横幅，text 背景透明，class="text-center" 文本居中

警报

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <v-btn color="primary" @click="alert = !alert">Toggle</v-btn>
</div>
<v-alert
    :value="alert"
    color="pink"
    dark
    border="top"
    icon="mdi-home"
    transition="scale-transition"
>
  lorem ipsum
</v-alert>

说明：border 边框位置（top | right | bottom | left）

v-app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <v-app>
    <v-app-bar
        app
        color="primary"
        dark
    >
      <div class="d-flex align-center">
        <v-img
            alt="Vuetify Logo"
            class="shrink mr-2"
            contain
            src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
            transition="scale-transition"
            width="40"
        />
        <v-img
            alt="Vuetify Name"
            class="shrink mt-1 hidden-sm-and-down"
            contain
            min-width="100"
            src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
            width="100"
        />
      </div>
      <v-spacer></v-spacer>
      <v-btn
          href="https://github.com/vuetifyjs/vuetify/releases/latest"
          target="_blank"
          text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>
    <v-main>
    </v-main>
  </v-app>
</template>

说明：app 指定该组件作为应用程序布局的一部分。用于动态调整内容的大小。使用此属性的组件只有位于 v-main组件的 外部才能正常运行。注意： 使用此属性会自动应用position: fixed 到布局元素上。contain 用于防止图片被裁剪。

长宽比

1
2
3
<v-responsive :aspect-ratio="16/9">
  <v-card-text>Lorem ipsum</v-card-text>
</v-responsive>

说明：创造了宽16，高9的容器。

头像

1
2
3
4
5
6
7
8
9
10
11
<v-avatar color="green" size="36">
  <span class="white--text headline">36</span>
</v-avatar>
<v-avatar tile color="blue">
  <v-icon dark>mdi-alarm</v-icon>
</v-avatar>
<v-avatar color="white">
  <v-avatar>
    <v-img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
  </v-avatar>
</v-avatar>

说明：size以像素为单位，tile 方形图，v-img 添加渐变效果。

虚拟滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <v-card class="mx-auto" max-width="400">
    <v-virtual-scroll :items="items" :item-height="50" height="700">
      <template v-slot="{ item }">
        <v-list-item>
          <v-list-item-avatar>{{ item.initials }}</v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>{{ item.fullName }}</v-list-item-title>
          </v-list-item-content>
          <v-list-item-action>
            <v-btn depressed small>
              View User
              <v-icon color="orange darken-4" right>mdi-open-in-new</v-icon>
            </v-btn>
          </v-list-item-action>
        </v-list-item>
      </template>
    </v-virtual-scroll>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    colors: ["#2196F3", "#90CAF9", "#64B5F6"],
    names: ["Oliver", "Jake", "Noah", "James", "Jack"],
    surnames: ["Smith", "Anderson", "Clark", "Wright", "Mitchell"],
  }),
  computed: {
    items() {
      const namesLength = this.names.length;
      const surnamesLength = this.surnames.length;
      const colorsLength = this.colors.length;

      return Array.from({ length: 10000 }, () => {
        const name = this.names[this.genRandomIndex(namesLength)];
        const surname = this.surnames[this.genRandomIndex(surnamesLength)];

        return {
          color: this.colors[this.genRandomIndex(colorsLength)],
          fullName: `${name} ${surname}`,
          initials: `${name[0]}${surname[0]}`,
        };
      });
    },
  },
  methods: {
    genRandomIndex(length) {
      return Math.ceil(Math.random() * (length - 1));
    },
  },
};
</script>

说明：items 项目数组，item-height 项目高度，height 组件高度。depressed 移除按钮的阴影效果。

外部单击

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <v-list>
    <v-list-item v-click-outside="onClickOutsideStandard" @click="models.base = true">
      <v-list-item-title>Default Click Outside</v-list-item-title>
      <v-list-item-action>
        <v-icon :color="models.base ? 'green' : 'red'">mdi-record</v-icon>
      </v-list-item-action>
    </v-list-item>
    <v-list-item
        v-click-outside="{
        handler: onClickOutsideWithConditional,
        closeConditional,
      }"
        @click="models.conditional = true"
    >
      <v-list-item-title>Close Conditional</v-list-item-title>
      <v-list-item-action>
        <v-icon :color="models.conditional ? 'green' : 'red'">mdi-record</v-icon>
      </v-list-item-action>
    </v-list-item>
  </v-list>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    models: {
      base: false,
      conditional: false,
    },
  }),

  methods: {
    onClickOutsideStandard() {
      this.models.base = false;
    },
    onClickOutsideWithConditional() {
      this.models.conditional = false;
    },
    closeConditional(e) {
      return this.models.conditional;
    },
  },
};
</script>

说明：v-click-outside 定义外部单击事件处理。

树视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  <v-treeview open-all :items="items"></v-treeview>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        id: 1,
        name: "Root",
        children: [
          { id: 2, name: "Child 1" },
          { id: 3, name: "Child 2" },
          {
            id: 4,
            name: "Child 3",
            children: [
              { id: 5, name: "Grandchild 1" },
              { id: 6, name: "Grandchild 2" },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

<template>
  <v-treeview v-model="tree" :open="open" :items="items" activatable item-key="name" open-on-click>
    <template v-slot:prepend="{ item, open }">
      <v-icon v-if="item.children">{{ open ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
      <v-icon v-else>{{ item.id }}</v-icon>
    </template>
  </v-treeview>
</template>

说明：open-all 预先打开，列表属性 open 判断视图是否打开，activatable 允许用户通过单击节点将其标记为活动节点，item 一定要有 name 属性。open-on-click 如果为 true ，将导致通过单击节点上的任意位置来打开节点，而不是仅通过单击展开图标来打开节点。 将此属性与 activatable 一起使用时，您将无法将带有子节点标记为活动状态。prepend 左侧插槽，label 标签插槽，append 右侧插槽。

搜索过滤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<template>
  <v-card class="mx-auto" max-width="500">
    <v-sheet class="pa-4 primary lighten-2">
      <v-text-field
          v-model="search"
          label="Search"
          dark
          flat
          solo-inverted
          hide-details
          clearable
          clear-icon="mdi-close-circle-outline"
      ></v-text-field>
      <v-checkbox v-model="caseSensitive" dark hide-details label="Case sensitive search"></v-checkbox>
    </v-sheet>
    <v-card-text>
      <v-treeview :items="items" :search="search" :filter="filter" :open.sync="open"></v-treeview>
    </v-card-text>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    open: [1, 2],
    search: null,
    caseSensitive: false,
    items: [
      {
        id: 1,
        name: "Root",
        children: [
          { id: 2, name: "Child 1" },
          { id: 3, name: "Child 2" },
          {
            id: 4,
            name: "Child 3",
            children: [
              { id: 5, name: "Grandchild 1" },
              { id: 6, name: "Grandchild 2" },
            ],
          },
        ],
      },
    ],
  }),
  computed: {
    filter() {
      return this.caseSensitive
          ? (item, search, textKey) => item[textKey].includes(search)
          : undefined;
    },
  },
};
</script>

说明：flat 移除阴影，solo-inverted 减少元素不透明度， clearable 添加清除已输入内容功能，默认图标是 mdi-clear，clear-icon 配合 clearable 使用，filter 函数完成筛选功能，search 为关键字。

监视绑定元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <v-card v-scroll.self="onScroll" class="overflow-y-auto" max-height="400">
    <v-banner class="justify-center headline font-weight-light" sticky>
      Scroll Me - Method invoked
      <span class="font-weight-bold" v-text="scrollInvoked"></span>
      times
    </v-banner>
    <v-card-text>
      <div
          v-for="n in 12"
          :key="n"
          class="mb-4"
      >Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
    </v-card-text>
  </v-card>
</template>

说明：v-scroll.self，每次滚动运行方法。

触摸支持

1
v-touch

调整大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <v-row v-resize="onResize" align="center" justify="center">
    <v-subheader>Window Size</v-subheader>
    {{ windowSize }}
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    windowSize: {
      x: 0,
      y: 0,
    },
  }),

  mounted() {
    this.onResize();
  },

  methods: {
    onResize() {
      this.windowSize = { x: window.innerWidth, y: window.innerHeight };
    },
  },
};
</script>

说明：v-resize 指令可用于在窗口尺寸发生变化时调用指定的函数，v-subheader 副标题。

波纹效果

1
2
3
<template>
  <div v-ripple={center:false} class="text-center elevation-2 pa-12 headline">v-ripple</div>
</template>

说明：v-ripple 点击波纹，center 强制从中间开始，class 定义色彩。组件中的波纹用 :ripple。

滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div>
    <v-row justify="center" align="center">
      <v-subheader>Offset Top</v-subheader>
      {{ offsetTop }}
    </v-row>
    <v-container id="scroll-target" style="max-height: 400px" class="overflow-y-auto">
      <v-row
          v-scroll:#scroll-target="onScroll"
          align="center"
          justify="center"
          style="height: 1000px"
      ></v-row>
    </v-container>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    offsetTop: 0,
  }),

  methods: {
    onScroll(e) {
      this.offsetTop = e.target.scrollTop;
    },
  },
};
</script>

说明：justify 应用 justify-content CSS 属性，target 默认目标为 window。

交叉监测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <div>
    <div class="d-flex align-center text-center justify-center">
      <v-avatar
        :color="isIntersecting ? 'green' : 'red'"
        class="mr-3 swing-transition"
        size="32"
      ></v-avatar>
    </div>

    <v-responsive class="overflow-y-auto" max-height="400">
      <v-responsive height="200vh" class="d-flex align-center text-center pa-2">
        <v-card
          v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0, 0.5, 1.0]
            }
          }"
          class="mx-auto"
          max-width="336"
        >
          <v-card-title>Title</v-card-title>
          <v-card-text>
            Lorem ipsum dolor sit amet.
          </v-card-text>
        </v-card>
      </v-responsive>
    </v-responsive>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    isIntersecting: false,
  }),

  methods: {
    onIntersect(entries, observer) {
      this.isIntersecting = entries[0].intersectionRatio >= 0.5;
    },
  },
};
</script>

说明：overflow-y-auto 允许上下滚动，v-card 里的 v-intersect 设置组件可见时调用的函数，并设定了阈值。

突变监测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
  <div>
    <div>
      <div class="text-center">
        <v-btn @click="content = !content">
          Change Content
        </v-btn>
      </div>

      <v-container>
        <v-row>
          <v-col cols="12" md="6">
            <v-card>
              <v-card-title>Card 1</v-card-title>

              <div class="title text-center pb-3">Times Mutated: {{ card1 }}</div>

              <v-card-text v-mutate="() => onMutate('card1')">
                <p
                    v-for="n in +content + 2"
                    :key="n"
                    :class="n === +content + 2 && 'mb-0'"
                >Phasellus nec sem in justo pellentesque facilisis.</p>
              </v-card-text>
            </v-card>
          </v-col>

          <v-col cols="12" md="6">
            <v-card>
              <v-card-title>Card 2</v-card-title>

              <div class="title text-center pb-3">Times Mutated: {{ card2 }}</div>

              <v-card-text v-mutate.once="() => onMutate('card2')">
                <p
                    v-for="n in +content + 2"
                    :key="n"
                    :class="n === +content + 2 && 'mb-0'"
                >Suspendisse enim turpis.</p>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    content: false,
    card1: 0,
    card2: 0,
  }),

  methods: {
    onMutate(card) {
      this[card]++;
    },
  },
};
</script>

说明：v-col 中 cols 用来分配列数，满列时12，md 用来分配列数，默认与cols 相同。v-mutate 监测变化，once 让函数只调用一次。

您的打赏将会成为我前进的动力！！