vuetify 属性集合

阅读原文时间：2023年07月09日阅读：3

1.v-form 组件具有 three 功能，可以通过在该组件上设置 ref 来访问它们。 ref 允许我们访问组件上的内部方法，例如。this.$refs.form.validate() 将验证所有输入并返回所有输入是否有效。 this.$refs.form.reset() 将清除所有输入并重置其验证错误。this.$refs.form.resetValidation() 将仅重置输入验证，而不会更改其状态。
2. 导航抽屉
3.遮罩层
4.打印属性类
    .d-print-none
    .d-print-inline
    .d-print-inline-block
    .d-print-block
    .d-print-table
    .d-print-table-row
    .d-print-table-cell
    .d-print-flex
    .d-print-inline-flex

5. col-x 例如：col-2表示两格
text-truncate 超出的省略号显示

6.display 对应的值
.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg and xl

   value属性可以为下列之一

    none
    inline
    inline-block
    block
    table
    table-cell
    table-row
    flex
    inline-flex

7.display:none 和visibility:hidden同时可以起到隐藏的总用。
不同点：visibility:none依然占据空间

8.边距
   {property}{direction}-{size}   例如：mx-2
property:
   m- 用来设置外边距
   p-用来设置内边距

direction:指定属性所应用的方向

    t - 应用 margin-top 和 padding-top 的间距。
    b - 应用 margin-bottom 和 padding-bottom 的间距。
    l - 适用 margin-left 和 padding-left 的间距。
    r - 应用 margin-right 和 padding-right 的间距。
    s - 应用 margin-left/padding-left (LTR mode) 和 margin-right/padding-right (RTL mode)
    e - 应用 margin-right/padding-right (LTR model) 和 margin-left/padding-left (RTL model)
    x - 同时对应*-left和*-right属性
    y - 同时对应*-top和*-bottom属性
    a - 在所有方向应用该属性的间距。
size:
    0 - 消除所有 margin 或者 padding 并设置为 0
    1 - 设置 margin 或者 padding 到 4px
    2 - 设置 margin 或者 padding 到 8px
    3 - 设置 margin 或者 padding 到 12px
    4 - 设置 margin 或者 padding 到 16px
    5 - 设置 margin 或者 padding 到 20px
    6 - 设置 margin 或者 padding 到 24px
    7 - 设置 margin 或者 padding 到 28px
    8 - 设置 margin 或者 padding 到 32px
    9 - 设置 margin 或者 padding 到 36px
    10 - 设置 margin 或者 padding 到 40px
    11 - 设置 margin 或者 padding 到 44px
    12 - 设置 margin 或者 padding 到 48px
    n1 - 将负的 margin 设置到 4px
    n2 - 将负的 margin 设置到 8px
    n3 - 将负的 margin 设置到 12px
    n4 - 将负的 margin 设置到 16px
    n5 - 将负的 margin 设置到 20px
    n6 - 将负的 margin 设置到 24px
    n7 - 将负的 margin 设置到 28px
    n8 - 将负的 margin 设置到 32px
    n9 - 将负的 margin 设置到 36px
    n10 - 将负的 margin 设置到 40px
    n11 - 将负的 margin 设置到 44px
    n12 - 将负的 margin 设置到 48px
    auto - 设置边距为 auto
设置竖直水平居中：class="mx-auto my-auto px-auto"

9.purple 紫色
darken- 例如：darken-2
text-"value" 里面有 left center right bottom top
text--"颜色" 例如：text--white

10.elevation 海拔 0-24分25个级别

11.#pannel {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
在vuetify中可以定义为 d-flex flex-row

基本的类有：
    .d-flex
    .d-inline-flex
    .d-sm-flex
    .d-sm-inline-flex
    .d-md-flex
    .d-md-inline-flex
    .d-lg-flex
    .d-lg-inline-flex
    .d-xl-flex
    .d-xl-inline-flex