Windslayer-ui NPM

windSlayer-UI

介绍

wind-ui,个人以自己工作项目经验需求而实现的组件库

软件架构

vite+vue3+typescript

安装教程

已上线npm：

npm i windslayer-ui

使用说明

全局引入：

import WindUI from 'windslayer-ui'

createApp(App).use(WindUI).mount('#app')

修改样式 ：使用的都是‘弱样式’，即只需要增加组件内对应的class的优先级即可修改，嵌套父级选择器即可

后续补充，在个人博客上有写：https://blog.csdn.net/exxes?type=blog 开源仓库地址：https://gitee.com/li-hanming/wind-slayer-ui/ 别问为什么不用github，问就是上不去

分页器组件

引入：

import { windPagination } from 'windslayer-ui'

demo示例：

<wind-pagination  
      class="pagination"  
      :total-num="testList.length"  
      :total-list="testList"  
      :show-num="showNum"  
      :one-page-num="onePageNum"  
      @now-list="getNowList"  
      @now-page="getNowPage"  
    ></wind-pagination>

props
total-list : Array	可选，将整个数据列表传递过去，然后可通过监听now-list去获取当前页的数据
show-num : Number	可选，可以将每一个页看成一个格子，有多少个格子的意思，默认9个
total-num : Number	必选，数据的总条数，需要根据这个总条数来计算多少页和页面的布局(是否需要省略)
one-page-num : Number	可选，一页有多少条数据，默认50

emits
now-list( list : Array )	需要配合total-list使用，获取当前页的数据
now-page( page : Number )	获取当前的页码

样式修改的class
page	最外层div
pre	上一页按钮
next	下一页按钮
pageItem	页码按钮

输入图片说明

弹窗组件

标签式使用：

import { windDialog } from 'windslayer-ui'

demo示例：

<wind-dialog
      :show="show"
      :mask-close="maskClose"
      :mask-color="maskColor"
      :align-x="alignX"
      :align-y="alignY"
      :opacity="opacity"
      :animation="animation"
    >
      <div class="text">111</div>
</wind-dialog>

标签中间是加上自定义的内容的使用了slot

props
show : Boolean	必选，使用这个来控制弹窗的展示和隐藏，使用函数式调用时不需要传递这个
animation : 'fade' , 'bounce' , 'fade-down'	可选，弹窗显示的动画，默认fade
alignX : 'left' , 'center' , 'right'	可选，弹窗在水平方向的位置，默认center
alignY : 'top' , 'center' , 'bottom'	可选，弹窗在垂直方向的位置，默认center
maskClose : Boolean	可选，点击蒙层能否关闭，默认false
maskColor : String	可选，蒙层颜色值，默认灰色
opacity : Number 0,1	可选，蒙层透明度，需要maskColor的格式为rgb(xx, xx, xx)才能设置

函数式使用：

import { slayerDialog } from 'windslayer-ui'

demo示例：

import Test from './test.vue'
slayerDialog(Test).show({maskClose:true...})
slayerDialog(Test).close()

slayerDialog : Function	将需要变成弹窗的组件通过这个函数传递
slayerDialog().show(props?)	调用这个函数才会展示弹窗，可传递一个对象类型为上面定义的props
slayerDialog().close()	调用这个函数能关闭弹窗，但这个函数用处应该不大，一般都是使用变成弹窗的那个组件去控制关闭
emit('close')	在变成弹窗的那个组件中emit一个close事件即可关闭