0.1.1

移动端 Vue2 使用 ​

移动端 Vue2 老项目使用 @szhn/dh-design-mobile-vue2。它基于 Vant 2，组件标签继续使用 van- 前缀。

安装 ​

shell
pnpm add @szhn/dh-design-mobile-vue2
shell
npm install @szhn/dh-design-mobile-vue2
shell
yarn add @szhn/dh-design-mobile-vue2
shell
bun add @szhn/dh-design-mobile-vue2

按需引入 ​

ts
import Vue from 'vue'
import Button from '@szhn/dh-design-mobile-vue2/components/button'
import Field from '@szhn/dh-design-mobile-vue2/components/field'
import Tag from '@szhn/dh-design-mobile-vue2/components/tag'
import '@szhn/dh-design-mobile-vue2/styles/base.css'
import '@szhn/dh-design-mobile-vue2/styles/button.css'
import '@szhn/dh-design-mobile-vue2/styles/field.css'
import '@szhn/dh-design-mobile-vue2/styles/tag.css'

Vue.use(Button)
Vue.use(Field)
Vue.use(Tag)

组件和对应样式都从独立入口引入，不要在业务项目里直接从 vant 引入。base.css 在应用入口引入一次，每个组件再引入同名样式；这样不会把整套 Vant 2 带进页面。

在页面使用 ​

vue
<template>
  <div>
    <van-button type="primary">提交</van-button>
    <van-field v-model="keyword" placeholder="请输入" />
    <van-tag type="success">已完成</van-tag>
  </div>
</template>

组件属性、事件和插槽沿用 Vant 2。DHdesign 只统一包入口和主题样式。

全量引入 ​

存量项目需要快速迁移时，也可以一次注册全部组件：

ts
import Vue from 'vue'
import DhDesignMobileVue2 from '@szhn/dh-design-mobile-vue2'
import '@szhn/dh-design-mobile-vue2/style.css'

Vue.use(DhDesignMobileVue2)

全量引入更省事，但会注册所有 Vant 2 常用组件。新页面或对体积敏感的项目，优先用上面的独立入口。

常用组件引入 ​

页面标签组件入口
<van-button>components/button
<van-field>components/field
<van-form>components/form
<van-cell> / <van-cell-group>components/cell / components/cell-group
<van-popup>components/popup
<van-dialog>components/dialog
<van-picker>components/picker
<van-search>components/search
<van-tag>components/tag
<van-tabs> / <van-tab>components/tabs / components/tab
<van-radio> / <van-checkbox> / <van-switch>components/radio / components/checkbox / components/switch
<van-uploader>components/uploader

组件样式使用相同名字的 styles/*.css 入口。

Nuxt 2 / 服务端渲染 ​

Vant 2 的整包入口依赖浏览器环境。Nuxt 2 项目应在仅客户端运行的插件中注册 DHdesign；不要在服务端入口直接加载整包。

可选主题覆盖 ​

默认字体、颜色、间距、圆角等已经由组件包提供，普通项目不需要再配置。只有项目要换品牌色或做专属主题时，才需要覆盖：

ts
import { applyDhDesignMobileVue2Theme } from '@szhn/dh-design-mobile-vue2/theme'

applyDhDesignMobileVue2Theme({
  colorPrimary: '#075AED',
})

可覆盖的不只有下面这些，表里列的是业务最常用的主题入口。

属性控制内容
colorPrimary / colorPrimaryLight / colorPrimaryBg主色、悬停色、浅背景
colorSuccess / colorWarning / colorDanger成功、警告、危险状态
colorTextPrimary / colorTextSecondary / colorTextPlaceholder / colorTextDisabled正文、辅助文字、占位文字、禁用文字
colorBorder / colorBorderLight边框和分割线
colorSurface / colorSurfaceSoft白色表面和浅灰背景
fontFamily / fontSizeBase / fontSizeMd / lineHeightBase全局字体、常用字号和行高
space8 / space12 / space16 / space24 / space32单元格、表单、搜索框、弹层等常用间距
radius4 / radiusMedium / radius12 / radius16 / radiusPill标签、按钮、弹窗、弹层、圆角胶囊
buttonHeight / buttonHeightSmall / buttonHeightMini / buttonPadding按钮高度和左右留白
fieldHeight / fieldPadding输入框高度和表单留白

覆盖范围 ​

第一版重点覆盖按钮、单元格、输入框、搜索、导航栏、标签页、弹窗、弹出层、选择器、标签、单选、复选和开关。新项目继续使用 Vue3 移动端包。

vue2