sud-layer
安装 sud-layer
npm install sud-layer
在 main.js 中写入以下内容
// 完整引入
import sudLayer from 'sud-layer';
import 'sud-layer/lib/sud-layer.css';
Vue.use(sudLayer);
// 按需引入
import { SudLayer } from 'sud-layer';
import 'sud-layer/lib/sud-layer.css';
Vue.use(SudLayer);
使用例子(父盒子必须有宽高)
<sud-layer
:visible.sync="vis"
title="测试标题"
:width.sync="width1"
:height.sync="height1"
@onMove="onMove"
@close="onClose">
<template v-slot:content>
<div>123</div>
</template>
</sud-layer>
data(){
return{
vis: false,
}
}
methods:{
onMove(){},
onClose(){}
}
简单说明
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| width |
窗口宽度 |
Number |
- |
520 |
| height |
窗口高度 |
Number |
- |
520 |
| zIndex |
窗口堆叠顺序 |
Number |
- |
1000 |
| title |
窗口标题 |
String |
- |
标题 |
| visible |
窗口隐藏显示标识 |
Boolean |
- |
false |
| isResize |
窗口显示是否回初始位置标识 |
Boolean |
- |
false |
| isZoom |
窗口是否支持缩放(支持pc端) |
Boolean |
- |
true |
| location |
窗口显示的位置,left (左距离,支持 0、’0px‘、’0%‘), top(上距离), right(右距离), bottom: (下距离) |
Object |
- |
{} |
| transition |
渐变动画 |
String |
sud-layer-(fade(忽隐忽现)/fade-transform(左进右出)/fade-in(上进下出)/pop-in(大进小出)) |
sud-layer-pop-in |
Slots
| 参数 |
说明 |
| header |
头部内容 |
| content |
内容 |
Events
| 参数 |
说明 |
| onMove |
按下头部回调事件 |
| close |
关闭回调事件 |