自己用的 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;
}

RollText

将放入的元素滚动

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

• :type="1"：默认，进行左到右的无限滚动

• :type="2"：该模式下元素会移动到右边，然后又移动到左边，每次到顶点时暂停两秒

SliderBox

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

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

SwitchButton

正常的switch

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

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

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

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

可以通过:deep(.switchButton)修改.chosed .notChosed来修改被选择的组件的样式

可以通过修改.switchButton下的 css 变量：--width --height来修改按钮宽高

SplitButton

分页按钮

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

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

Message

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

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

函数也有两个静态方法来快速指定弹框样式，如Message.success("提示")

指令

v-fill

该指令会将挂载元素中的元素从左到右按间隔排序，一排排满时换行

v-hidden

该指令会根据参数 boolen 将挂载元素用visibility隐藏

函数或工具类

AsyncConstructor

通过继承该类并在super()写入异步操作（必须是箭头函数），该类实例化时将会异步实例const instence = await new AsyncClass()

。。。好累 不写了 反正就自己用