使用本SDK需要网站允许Iframe嵌入
1 代码展示
把以下代码复制到html的script标签中
(function () {
var moyin = document.createElement('script');
moyin.src = 'https://webfiles.moyincloud.com/hc/sdk/moyin-1.0.0.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(moyin, s);
})();
2
3
4
5
6
在调用弹窗的函数中使用
const {useDocIframe, useVideoIframe} = window.MoYinSDK
// 调用帮助文档弹窗
useDocIframe('https://xxxxx', {
dialogModal: {
background: 'rgb(0, 0, 0, 0.6)',
},
dialog: {
maxWidth: '1200px',
top: '10vh',
right: '10vw',
background: '#fff',
}
})
// 调用视频弹窗
useVideoIframe('https://xxxx', {
phoneMatchMediaWidth: 900,
dialogModal: {
phoneBg: '#000',
defaultBg: ''
},
dialog: {
width: '80vw',
maxWidth: '1200px',
paddingTop: '56.25%'
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2 参数说明
useDocIframe参数
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 帮助文档的url路径 | string | '' |
params | 弹窗的样式属性 | object | {} |
Params 参数配置
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
dialogModal | modal层样式属性 | object | {} |
dialog | 弹窗外层的样式属性 | object | {} |
dialogModal 参数配置
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
background | 背景 | string | '' |
dialog 参数配置
dialog设为了 position: fixed;
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
top | 弹窗距离页面顶部的距离 | string | 'unset' |
bottom | 弹窗距离页面底部的距离 | string | 'unset' |
left | 弹窗距离页面左边的距离 | string | 'unset' |
right | 弹窗距离页面右边的距离 | string | 'unset' |
width | 弹窗宽度 | string | '500px' |
height | 弹窗高度 | string | '450px' |
background | 弹窗背景 | string | '#ffffff' |
border | 弹窗边界样式 | string | '1px solid #EDEFF2' |
borderRadius | 弹窗圆角 | string | '6px' |
useVideoIframe参数
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 帮助文档的url路径 | string | '' |
params | 弹窗的样式属性 | object | {} |
Params 参数配置
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
phoneMatchMediaWidth | 手机尺寸最大宽度 | number | 900 |
dialogModal | modal层样式属性 | object | {} |
dialog | 弹窗外层的样式属性 | object | {} |
dialogModal 参数配置
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
phoneBg | 手机尺寸下的背景 | string | '' |
defaultBg | web页面尺寸下的背景 | string |
dialog 参数配置
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
margin | 弹窗外边距 | string | 'auto' |
width | 弹窗宽度 | string | '80vw' |
maxWidth | 弹窗最大宽度 | string | '1200px' |
paddingTop | 控制弹窗的高度,传百分比字符串,分母是宽度 | string(百分数) | '56.25%' |