Dl-vue-ui NPM | npm.io

Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

VSCode + Volar

Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.

组件包的使用

项目中需要安装sass和element-plus依赖

在项目的main.ts中引入

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'

import 'element-plus/theme-chalk/index.css'

import zhCn from 'element-plus/es/locale/lang/zh-cn'

import DlVueUi from 'dl-vue-ui'

createApp(App).use(ElementPlus, {

locale: zhCn

}).use(DlVueUi).mount('#app')

DlGeneral——通用页面

参数

参数	类型	说明	默认值
`space`	`'large' \| 'small' \| 'mini'`	头部和主体的间隙	`mini`

插槽

插槽名	说明
`header`	头部的内容
`main`	底部/主体的内容

DLDialog——弹出框

使用

引入组件，直接在标签内写入元素

<dl-dialog>元素</dl-dialog>

参数

参数	类型	说明	默认值
`value`	`boolean`	必填项、dialog的显示和隐藏	`-`
`title`	`string`	dialog的标题	`'默认标题'`
`width`	`number \| string`	dialog的宽度,当为number类型时单位为px,string类型时需带上%,`'x%'`	`'50%'`
`modal`	`boolean`	是否需要遮罩层	`true`
`append-to-body`	`boolean`	是否插入到body元素上	`false`
`close-on-click-modal`	`boolean`	是否点击外部关闭dialog	`false`
`close-on-press-escape`	`boolean`	是否可以通过ESC关闭dialog	`false`
`show-close`	`boolean`	是否显示关闭按钮	`true`
`center`	`boolean`	是否对头部和底部采用居中布局	`false`
`is-fullscreen`	`boolean`	是否显示全屏图标	`true`
`fullscreen`	`boolean`	是否全屏	`false`
`magnify-icon`	`string`	方大图标使用阿里巴巴矢量图标库	`'icon-fangda'`
`shrink-icon`	`string`	缩小图标使用阿里巴巴矢量图标库	`'icon-suoxiao'`
`size`	`'large'\|'small'\|'mini'`	缩放图标尺寸	`'small'`