ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-12-19 01:02:29 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

[Improvement] Actionsheet: support lazy render (#1365)

Browse Source
This commit is contained in:
neverland
2018-06-29 20:34:55 +08:00
committed by GitHub
parent 35a28df51f
commit 0afbd92d32
8 changed files with 27 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/actionsheet/en-US.md
View File

@@ -74,6 +74,7 @@ Actionsheet will get another style if there is a `title` prop.
| cancel-text | Text of cancel button | `String` | - |
| overlay | Whether to show overlay | `Boolean` | - |
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | - |
| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
| get-container | Return the mount node for actionsheet | `() => HTMLElement` | - |
### Event

2
packages/actionsheet/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="van-slide-bottom">
<div v-show="value" :class="b({ 'withtitle': title })">
<div v-if="shouldRender" v-show="value" :class="b({ 'withtitle': title })">
<div v-if="title" class="van-hairline--top-bottom" :class="b('header')">
<div v-text="title" />
<icon name="close" @click="onCancel" />

44
packages/actionsheet/test/__snapshots__/demo.spec.js.snap
View File

@@ -5,55 +5,17 @@ exports[`renders demo correctly 1`] = `
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">弹出 Actionsheet</span></button>
<div class="van-actionsheet" style="display:none;">
<ul class="van-hairline--bottom">
<li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span>
<!---->
</li>
<li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span> <span class="van-actionsheet__subname">描述信息</span></li>
<li class="van-actionsheet__item van-hairline--top">
<div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</li>
<li class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">禁用选项</span>
<!---->
</li>
</ul>
<div class="van-actionsheet__content"></div>
</div>
<!---->
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button>
<div class="van-actionsheet" style="display:none;">
<ul class="van-hairline--bottom">
<li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span>
<!---->
</li>
<li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span> <span class="van-actionsheet__subname">描述信息</span></li>
<li class="van-actionsheet__item van-hairline--top">
<div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</li>
<li class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">禁用选项</span>
<!---->
</li>
</ul>
<div class="van-actionsheet__cancel van-hairline--top">取消</div>
</div>
<!---->
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">弹出带标题的 Actionsheet</span></button>
<div class="van-actionsheet van-actionsheet--withtitle" style="display:none;">
<div class="van-hairline--top-bottom van-actionsheet__header">
<div>标题</div>
<i class="van-icon van-icon-close" style="color:undefined;">
<!---->
</i>
</div>
<div class="van-actionsheet__content">
<p>内容</p>
</div>
</div>
<!---->
</div>
</div>
`;

2
packages/actionsheet/test/__snapshots__/index.spec.js.snap
View File

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`callback events 1`] = `
<div class="van-actionsheet" style="display: none;" name="van-slide-bottom">
<div class="van-actionsheet" name="van-slide-bottom">
<ul class="van-hairline--bottom">
<li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span>
<!---->

1
packages/actionsheet/test/index.spec.js
View File

@@ -5,6 +5,7 @@ test('callback events', () => {
const callback = jest.fn();
const wrapper = mount(Actionsheet, {
propsData: {
value: true,
actions: [
{ name: 'Option', callback },
{ name: 'Option' }

1
packages/actionsheet/zh-CN.md
View File

@@ -77,6 +77,7 @@ export default {
| cancel-text | 取消按钮文字 | `String` | - |
| overlay | 是否显示遮罩层 | `Boolean` | - |
| close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | - |
| lazy-render | 是否在首次显示弹层时才渲染 DOM 节点 | `Boolean` | `true` |
| get-container | 指定挂载的 HTML 节点 | `() => HTMLElement` | - |
### Event