windslayer-ui

wind-ui,个人以自己工作项目经验需求而实现的组件库
2,469
Install
npm install windslayer-ui
Latest Version:1.4.1
Vue:3
License:ISC
Last Updated:Apr 9, 2024
Links: npm
Maintainer: wild-wind

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事件即可关闭
参与贡献
  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request
更新日志

v1.3.17 虚拟列表、放大镜和裁剪组件发布

v1.1.15 完成按需引入

v1.1.1 修复了弹窗蒙层透明度的问题

v1.0.37 新增了dialog弹窗组件

v1.0.34 第二个正式版，修复了若干问题

v1.0.10 第一个正式版，完成好打包部署

Version History

Version Released Vue License
1.4.1 ^3.2.25 ISC
1.3.27 ^3.2.25 ISC
1.3.26 ^3.2.25 ISC
1.3.25 ^3.2.25 ISC
1.3.24 ^3.2.25 ISC