Sdt3 NPM | npm.io

自己用的 vue3 组件库

下载

npm i -s sdt3

vue 组件：

在主文件main.js中引入下载方法和 css 并挂载

import SDT from "sdt3";
import "sdt3/style";
app.use(SDT);

可以指定某个组件或指令挂载为全局

import { RollText } from "sdt3";
import "sdt3/style";
app.use(RollText);

函数：

直接指定需要的函数或对象引入

import { SDIDB } from "sdt3";

组件中的颜色通过 css 变量定义，如果要修改部分主题颜色可以通过新建 css 文件指定新的主题色使用，如：

:root {
    --color-text-default: xxx;
}

将放入的元素滚动

props	说明
duration	设置滚动的周期
type	设置滚动方式

当该组件出现在屏幕中时才会显示出来

props	说明
duration	设置动画时间
direction	设置动画方向支持`top bottom left right`

正常的switch

props	说明
v-model	绑定到组件的布尔值

emits	说明
onStatuChange	当按钮状态改变时触发，接收一个参数表示当前 v-model 参数被改变后的值

slots	说明
left	在按钮左边的组件
right	在按钮右边的组件

设定了slot后组件会根据按钮的当前状态修改左右组件的颜色

可以通过:deep(.switchButton)修改.chosed .notChosed来修改被选择的组件的样式
可以通过修改.switchButton下的 css 变量：--width --height来修改按钮宽高

分页按钮

props	说明
v-model	绑定列表的数组，传入后组件会按照页数将该数组缓存，当重新回到页面时会修改绑定的数组为缓存的数组，如果不传入将不缓存
limit	显示的页数按钮数，默认为 7
totalPage	总页数，必须
currentPage	初始页码，组件不会修改该值，如果有`vueRouter`的配置，为了保证刷新页面后显示正常，将`query.page`或类似的值绑定上

emits	说明
onPageChange	页面改变时触发的函数，接收一个参数表示改变到的页数
getNewData	在页面改变时获得新数据的函数，接收一个参数表示改变到的页数；如果组件绑定了`v-model`，被缓存的页数被点击到不会触发该函数

通过函数调用使用，接收两个参数：text，options

opions	说明
duration	弹框持续时间如果为零则只能点击关闭
align	文字对齐方式支持`center left` 默认为`left`
isCanClose	是否能点击关闭
style	弹框的自定义样式
type	弹框的内置样式，有`default success error`
onClose	弹框关闭时执行的回调