Sud-layer NPM | npm.io

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