sud-layer

vue-layer弹窗
632
Install
npm install sud-layer
Latest Version:1.0.0
Vue:2
Last Updated:Aug 9, 2022
Links: npm
Maintainer: sud520

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 关闭回调事件

Version History

Version Released Vue License
1.0.0 ^2.6.11
0.2.5 ^2.6.11
0.2.4 ^2.6.11
0.2.3 ^2.6.11
0.2.2 ^2.6.11