lighting-ui
Version:
A rich interaction, lightweight, high performance UI library based on Weex
81 lines (67 loc) • 2.74 kB
Markdown
# lc-popup
> Support the upper and lower direction of the panel pop-up
### Rule
- Commonly used to filter panel components.
- To surface from the top or bottom, click on the mask to close.
## [Demo](https://h5.m.taobao.com/trip/lc-popup/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Flc-popup%2Fdemo%2Findex.native-min.js)
<img src="https://img.alicdn.com/tfs/TB1WkKEhcLJ8KJjy0FnXXcFDpXa-562-1000.gif" width="240"/> <img src="https://img.alicdn.com/tfs/TB1_9v9SpXXXXcuXXXXXXXXXXXX-200-200.png" width="160"/>
## Code Example
```vue
<template>
<div class="wrapper">
<div class="btn yellow btn-margin" ="openBottomPopup">
<text class="btn-txt">Click</text>
</div>
<lc-popup popup-color="rgb(92, 184, 92)"
:show="isBottomShow"
="popupOverlayBottomClick"
pos="bottom"
height="400">
<div class="demo-content">
<image src="https://img.alicdn.com/tfs/TB1ojYvOXXXXXaOXFXXXXXXXXXX-180-41.png" class="demo-image"></image>
<text>Different from a "web app", "HTML5 app", or "hybrid app", you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript.</text>
</div>
</lc-popup>
</div>
</template>
<script>
import { LcPopup } from 'weex-ui';
export default {
components: { LcPopup },
data: () => ({
isBottomShow: false,
height: 400
}),
methods: {
openBottomPopup () {
this.isBottomShow = true;
},
popupOverlayBottomClick () {
this.isBottomShow = false;
}
}
};
</script>
```
More details can be found in [here](https://github.com/alibaba/weex-ui/blob/master/example/popup/index.vue)
### API
| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| show | `Boolean` |`Y`|`false` | whether to show |
| pos | `String` | `N`|`bottom` | out of the direction `top`/`bottom`/`left`/`right`|
| height | `String` |`N`| `840` | popup height(go up or down) |
| width | `String` |`N`| `750` | popup width(go right or left ) |
| popup-color | `String` |`N`| `#FFFFFF` | background color |
| stand-out | `Number` |`N`| `0` | Bottom stand out offset |
| animation | `Object` |`N`| `{timingFunction: 'ease-in'}` | animation timing function |
| overlay-cfg | `Object` |`N`| `{}` | [lc-overlay config](https://github.com/alibaba/weex-ui/blob/master/packages/lc-overlay/README.md)|
### Event
```
// need set `this.show=false`
// @LcPopupOverlayClicked="overlayClicked"
```
### Manual Close
```
<lc-popup ref="LcPopup"></lc-popup>
// this.$refs.LcPopup.hide();
```