# SuMobilePane 手机模式预览。


## 导入使用
```code[javascript]
import SuMobilePane from "ss-universal-client-web/comp/view/su-mobile-pane";
```
## iframe模式
:::demo 
```html
<template>
    <su-mobile-pane title="预览375*667" src="https://youzan.github.io/vant/mobile.html" type="iframe"></su-mobile-pane>
</template>
<script>
export default {
    components:{
        SuMobilePane
    },
    data() {
        return {}
    },
    methods: {
    }
};
</script>
```
:::

## image模式
:::demo 
```html
<template>
    <su-mobile-pane title="预览375*667" :images="images" type="image"></su-mobile-pane>
</template>
<script>
export default {
    components:{
        SuMobilePane
    },
    data() {
        return {
            images:[
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic5.997788.com%2Fpic_search%2F00%2F12%2F99%2F16%2Fse12991682.jpg&refer=http%3A%2F%2Fpic5.997788.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626665991&t=6112521264c8ee8a635f747ad06c8d16",
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            ]
        }
    },
    methods: {
    }
};
</script>
```
:::
## slot模式
:::demo 
```html
<template>
    <su-mobile-pane title="预览" type="slot">
        <div style="height: 800px;background-color: aliceblue;">content</div>
    </su-mobile-pane>
</template>
<script>
export default {
    components:{
        SuMobilePane
    },
    data() {
        return {
        }
    },
    methods: {
    }
};
</script>
```
:::


### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| title       | 标题 |String | - | 预览 |
| src         | type=iframe 网址链接 |String | - | - |
| images        | type=image 图片地址数组  |Array | - |

### Slot
| 名称      | 描述   |
|---------- |-------------- |
| default      |  type=slot 显示区域  |