Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>zat-vue3-snippetsNew to Visual Studio Code? Get it now.
zat-vue3-snippets

zat-vue3-snippets

jjmwinner

|
105 installs
| (0) | Free
vue3代码片段 + h5 tokens
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

zat-vue3-snippets README

zat vue3 snippets

Snippets

Vue3

Snippet Purpose
zat-vbase zat vue3 setup 页面模版 SCSS
zat-vbase-com zat vue3 setup Component 页面模版
zat-vroute zat vue3 route snippet
zat-vsrc zat vue3 img snippet
zat-vclass zat vue3 class binding snippet
zat-vreactive-setup zat vue3 Composition API Reactive Script
zat-vemit-child zat vue3 Emit from Child snippet
zat-vmounted zat vue3 onMounted
zat-vonunmounted zat vue3 onUnmounted
zat-vonbeforeunmount zat vue3 onBeforeUnmount
zat-vwatch zzat vue3 watch
zat-vcomputed zat vue3 Computed

H5 design-tokens

为了和 PC 端 design-tokens 区分,Snippet 中前缀为 zaui-h5

Snippet Remark
zaui-h5-global-bg 全局背景
zaui-h5-global-bg-white 全局背景返白 默认值#ffffff
zaui-h5-base-bg h5 标准区块背景 二三级页面的卡片背景 默认值#ffffff:#eeeff4
zaui-h5-dividing-line h5 分割线颜色 默认值#eeeff4
zaui-h5-brand h5 品牌色 默认值:#0d6efe
zaui-h5-price 金额色 默认值:#0d6efe
zaui-h5-text 一般用于订单、保单、续期、续保的具体详细信息描述 默认值:#818899
zaui-h5-text-collateral 一般用于订单、保单、续期、续保的具体详细信息描述 默认值:#818899
zaui-h5-text-weak 弱化的正文信息 默认值:#99a9c0
zaui-h5-aide-text 辅助文本 默认值:#99a9c0
zaui-h5-link 强链接按钮 强链接的文本颜色 默认值:#bcc7da
zaui-h5-aide-text-stress 文本强调色 默认值:#0d6efe
zaui-h5-danger 错误、告警色 默认值:#ff5050
zaui-h5-disabled-bg 主要按钮,同品牌色 默认值:#0d6efe
zaui-h5-border-radius-picture 图片圆角 默认值:12px
zaui-h5-border-radius-primary-button 主要按钮圆角 默认值:8px
zaui-h5-border-radius-searchBar 搜索框圆角 默认值:8px
zaui-h5-border-radius-tag-small 标签圆角小 默认值:8px
zaui-h5-border-radius-tag-big 标签圆角大 默认值:12px
zaui-h5-border-radius-card 区块圆角 默认值:20px
zaui-h5-border-radius-feedback h 临时层圆角 默认值:12px
zaui-h5-font-size-xl 超大控件文字大小 默认值:34px
zaui-h5-font-size-l 大控件文字大小 默认值:32px
zaui-h5-font-size-m 中控件文字大小 默认值:30px
zaui-h5-font-size-normal 常规控件文字大小 默认值:28px
zaui-h5-font-size-s 小控件文字大小 默认值:26px
zaui-h5-font-size-xs 超小控件文字大小 默认值:24px
zaui-h5-font-size-assist 辅助控件文字大小 默认值:22px
zaui-h5-space-home-card 首页、我的、名片区块行间距 默认值:30px
zaui-h5-space-card 内页区块行间距 默认值:20px
zaui-h5-page-border 区块距页面边距 默认值:30px
zaui-h5-card-border 内容距区块边距 默认值:30px
zaui-h5-space-border-big 内页区块与内容间距大 默认值:30px
zaui-h5-space-border-small 内页区块与内容间距小 默认值:20px
zaui-h5-button-primary-highlight-text 内页区块与内容间距小 默认值:20px
zaui-h5-button-secondary-highlight-text 次要按钮上的文字色 默认值:#0d6efe
zaui-h5-button-assist 辅助按钮 默认值:rgba(13, 110, 254, 0.1)
zaui-h5-popup-button-text 弹窗按钮未选中文字色 默认值:#515865"
zaui-h5-popup-button-highlight-text 弹窗按钮选中文字色 默认值:#0D6EFE
zaui-h5-text-title 标题文字色(第一层级)一般是卡片标题 默认值:#393d46
zaui-h5-icon-fill 弹窗按钮未选中文字色 默认值:#515865"
zaui-h5-icon-highlight-white 按钮填充色反白颜色 默认值:#fffff
zaui-h5-button-primary 主要按钮(页面的主要操作按钮)颜色 默认值:#0d6efe
zaui-h5-button-secondary 次要按钮(页面的次要操作按钮) 默认值:#ffffff
zaui-h5-button-secondary-line 要按钮边框色 默认值:#0D6EFE
zaui-h5-popup-button 弹窗按钮未选中背景色 默认值:#f6f7fc
zaui-h5-popup-highlight-button 弹窗按钮选中背景色 默认值:#0d6efe
zaui-h5-popup-highlight-button-line 弹窗按钮选中边框色 默认值:#0d6efe
zaui-h5-disabled-button 按钮 disabled 背景颜色 默认值:#8fbbfc
zaui-h5-disabled-button-text 按钮 disabled 文字颜色 默认值:#ffffff
zaui-h5-popup-highlight-button 弹阴影 默认值:0px 0px 16px 0px #e7eafa
zaui-h5-shadow-length-base 弹窗按钮选中背景色 默认值:#0d6efe
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft