自己用的 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 | 设置滚动方式 |
-
:type="1"
:默认,进行左到右的无限滚动 -
:type="2"
:该模式下元素会移动到右边,然后又移动到左边,每次到顶点时暂停两秒
当该组件出现在屏幕中时才会显示出来
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 | 弹框关闭时执行的回调 |
函数也有两个静态方法来快速指定弹框样式,如Message.success("提示")
该指令会将挂载元素中的元素从左到右按间隔排序,一排排满时换行
v-hidden
该指令会根据参数 boolen 将挂载元素用visibility
隐藏
通过继承该类并在super()
写入异步操作(必须是箭头函数),该类实例化时将会异步实例const instence = await new AsyncClass()
。。。好累 不写了 反正就自己用