mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Actionsheet: support lazy render (#1365)
This commit is contained in:
neverland
GitHub
parent
35a28df51f
commit
0afbd92d32
@ -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
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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>
|
||||
<!---->
|
||||
|
||||
@ -5,6 +5,7 @@ test('callback events', () => {
|
||||
const callback = jest.fn();
|
||||
const wrapper = mount(Actionsheet, {
|
||||
propsData: {
|
||||
value: true,
|
||||
actions: [
|
||||
{ name: 'Option', callback },
|
||||
{ name: 'Option' }
|
||||
|
||||
@ -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
|
||||
|
||||
@ -26,11 +26,29 @@ export default {
|
||||
lockScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// whether to lazy render
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
inited: this.value
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
shouldRender() {
|
||||
return this.inited || !this.lazyRender;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.inited = this.inited || this.value;
|
||||
this[val ? 'open' : 'close']();
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-if="inited || !lazyRender" v-show="value" :class="b({ [position]: position })">
|
||||
<div v-if="shouldRender" v-show="value" :class="b({ [position]: position })">
|
||||
<slot />
|
||||
</div>
|
||||
</transition>
|
||||
@ -17,10 +17,6 @@ export default create({
|
||||
|
||||
props: {
|
||||
transition: String,
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@ -35,22 +31,10 @@ export default create({
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
inited: this.value
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentTransition() {
|
||||
return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.inited = this.inited || this.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user