@nw-design/ui

---

layout: doc

快速上手

@nw-design/ui为封装的常用组件库

在开始之前，由于大部分组件都是基于 ant-design-vue,所以首先需要安装 ant-design-vue,样式文件暂时打包进封装的@nw-design/ui

安装

你可以选择npm, yarn, pnpm 安装

组件库的peerDependencies有 @ant-design/icons-vue,@vueuse/core,ant-design-vue,lodash-es,resize-observer-polyfill,vue 所以你需要提前安装它们

# 选择一个包管理器

# NPM
npm install @nw-design/ui --save

# Yarn
yarn add @nw-design/ui

# pnpm
pnpm install @nw-design/ui

使用组件

该组件库没有把ant-design-vue组件库的样式文件打包，所以使用先需要先引入以下组件

import {Button, Menu,Divider,Popover,Modal,Tooltip} from 'ant-design-vue'
app.use(Button).use(Menu).use(Divider).use(Popover).use(Modal).use(Tooltip)

全局完整注册

import { createApp } from 'vue'
import nwui from '@nw-design/ui'
import App from './App'
import '@nw-design/ui/dist/es/style.css'
const app = createApp(App)
app.use(nwui).mount('#app')

局部注册组件

样式文件暂时全部在 main.ts 全局引入

import { ScrollBar } from '@nw-design/ui'
export default {
  components: {
    ScrollBar
  }
}

主要更新内容

更新时间 2023-09-06
1.调整table的search的样式，整体样式，
2.增加Modal内动态加载内容并自动调整高度，调用弹窗暴露的外部方法 redoModalHeight()
3.增加modal内loading的功能