PC Vue2 使用

PC 端 Vue2 老项目使用 @szhn/dh-design-pc-vue2。它基于 Element UI，组件标签继续使用 el- 前缀。

安装

pnpm

pnpm add @szhn/dh-design-pc-vue2

npm

npm install @szhn/dh-design-pc-vue2

yarn

yarn add @szhn/dh-design-pc-vue2

bun

bun add @szhn/dh-design-pc-vue2

按需引入

import Vue from 'vue'
import ElButton from '@szhn/dh-design-pc-vue2/components/button'
import ElInput from '@szhn/dh-design-pc-vue2/components/input'
import ElTag from '@szhn/dh-design-pc-vue2/components/tag'
import '@szhn/dh-design-pc-vue2/styles/base.css'
import '@szhn/dh-design-pc-vue2/styles/button.css'
import '@szhn/dh-design-pc-vue2/styles/input.css'
import '@szhn/dh-design-pc-vue2/styles/tag.css'

Vue.use(ElButton)
Vue.use(ElInput)
Vue.use(ElTag)

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

在页面使用

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

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

全量引入

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

import Vue from 'vue'
import DhDesignPcVue2 from '@szhn/dh-design-pc-vue2'
import '@szhn/dh-design-pc-vue2/style.css'

Vue.use(DhDesignPcVue2)

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

常用组件引入

页面标签	组件入口
<el-button>	components/button
<el-input>	components/input
<el-form> / <el-form-item>	components/form / components/form-item
<el-select> / <el-option>	components/select / components/option
<el-table> / <el-table-column>	components/table / components/table-column
<el-dialog>	components/dialog
<el-pagination>	components/pagination
<el-tag>	components/tag
<el-tabs> / <el-tab-pane>	components/tabs / components/tab-pane
<el-radio> / <el-checkbox> / <el-switch>	components/radio / components/checkbox / components/switch
<el-upload>	components/upload

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

Nuxt 2 / 服务端渲染

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

可选主题覆盖

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

import { applyDhDesignPcVue2Theme } from '@szhn/dh-design-pc-vue2/theme'

applyDhDesignPcVue2Theme({
  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 / radiusPill	标签、按钮、弹窗、圆角胶囊
buttonHeight / buttonHeightSmall / buttonHeightMini / buttonPadding	按钮高度和左右留白
fieldHeight / fieldPadding	输入框高度和表单留白

覆盖范围

第一版重点覆盖按钮、输入框、表单、表格、弹窗、抽屉、下拉、分页、标签、提示、单选、复选和开关。高级 PC Pro 组件不默认提供 Vue2 版本。