记录一些个人常用的组件内部API，免得记混淆了在官方文档慢慢的定位。说实话官方文档很多地方不够详细且存在缺失，以及翻译没有更新完毕半英半中的。

v-btn

图标按钮

<!-- 单图标 -->
<v-btn icon="mdi-github">
</v-btn>

<!-- 图标+文字 -->
<v-btn prepend-icon="mdi-github">
  Button
</v-btn>

按钮样式

可选：flat：悬浮才出现颜色、elevated：透明带阴影、tonal：淡色、outlined：线框、plain：点击才出现颜色

variant="tonal"

文字

text="示例文字"

宽高占满容器

block

悬浮时鼠标旁出现提示文字

title="按钮提示文字"

强调阴影elevation：可以提供24层级的阴影深度，默认的值为 2dp。

elevation="4"

v-text-field

输入框样式

可选：outlined、plain、underlined、filled、solo、solo-inverted、solo-filled

variant="solo-filled"

隐藏下方占空间的输入提示

hide-details="false"

输入框内部左侧图标

prepend-inner-icon="mdi-account"

有文字输入后，出现一键清除按钮

clearable

可输入的字符长度提示，超出后冒红，默认25

counter="25"

输入框类型

type="password"

未输入时内部文字提示

placeholder="请输入密码"

v-img

图片地址

src="https://"

设置图片不可拖动

draggable="false"

图片与文字同行，需要同时设置图片的宽或高

inline
width="42"

v-checkbox-btn

复选框右侧文字

label="记住密码"

v-expansion-panels

用于隐藏和展开详情，需要在内部放一个v-expansion-panel(去掉了后缀的s)，配合插槽使用最佳

阴影强调，范围1-24

elevation

隐藏title右侧的箭头或自定义图标

flat

圆角，值可以是0、xs、sm、 true 、lg、xl、pill、circle、shaped

rounded

详情展开后让标题的容器保持不变大

static

弹出动画的过渡效果类型，值可以是default、inset、accordion、popout

variant

自己写的示例，放了两个按钮在详情text里（插槽大法）

<v-expansion-panels hide-actions focusable static flat rounded="lg">
  <v-expansion-panel>
    <template #title><span class="ml-0">其他方式</span></template>
    <template #text>
      <span class="d-flex align-center justify-center py-0">
        <v-btn
          title="GitHub单点登录"
          icon="mdi-github"
          class="mr-2"
          size="56"
          variant="tonal"
        />
        <v-btn
          title="游客登录"
          color="info"
          icon="mdi-lightning-bolt"
          size="56"
          variant="tonal"
        />
      </span>
    </template>
  </v-expansion-panel>
</v-expansion-panels>

杂项

情景：父容器class设置d-flex，内部有两个子元素，只设置了第一个子元素的大小，要让第二个子元素占满剩余空间。多个子容器直接设置block会导致出现空间占用不正确的bug。解决方案：只需为需要占满剩余空间的子元素class设置flex-1-0即可。