mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: migrate PullRefresh component
This commit is contained in:
parent
c0c175f5ff
commit
bb8a3d60b7
@ -34,4 +34,5 @@ module.exports = [
|
||||
'tree-select',
|
||||
'notice-bar',
|
||||
'share-sheet',
|
||||
'pull-refresh',
|
||||
];
|
||||
|
@ -23,7 +23,7 @@ export default createComponent({
|
||||
pullingText: String,
|
||||
loosingText: String,
|
||||
loadingText: String,
|
||||
value: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
@ -41,6 +41,8 @@ export default createComponent({
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['refresh', 'update:modelValue'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
status: 'normal',
|
||||
@ -66,12 +68,14 @@ export default createComponent({
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(loading) {
|
||||
modelValue(loading) {
|
||||
this.duration = this.animationDuration;
|
||||
|
||||
if (loading) {
|
||||
this.setStatus(+this.headHeight, true);
|
||||
} else if (this.slots('success') || this.successText) {
|
||||
} else if (
|
||||
this.$slots.success ? this.$slots.success() : this.successText
|
||||
) {
|
||||
this.showSuccessTip();
|
||||
} else {
|
||||
this.setStatus(0, false);
|
||||
@ -123,7 +127,7 @@ export default createComponent({
|
||||
|
||||
if (this.status === 'loosing') {
|
||||
this.setStatus(+this.headHeight, true);
|
||||
this.$emit('input', true);
|
||||
this.$emit('update:modelValue', true);
|
||||
|
||||
// ensure value change can be watched
|
||||
this.$nextTick(() => {
|
||||
@ -168,14 +172,13 @@ export default createComponent({
|
||||
|
||||
genStatus() {
|
||||
const { status, distance } = this;
|
||||
const slot = this.slots(status, { distance });
|
||||
|
||||
if (slot) {
|
||||
return slot;
|
||||
if (this.$slots[status]) {
|
||||
return this.$slots[status]({ distance });
|
||||
}
|
||||
|
||||
const nodes = [];
|
||||
const text = this[`${status}Text`] || t(status);
|
||||
const text = (status !== 'normal' && this[`${status}Text`]) || t(status);
|
||||
|
||||
if (TEXT_STATUS.indexOf(status) !== -1) {
|
||||
nodes.push(<div class={bem('text')}>{text}</div>);
|
||||
@ -209,7 +212,7 @@ export default createComponent({
|
||||
<div class={bem('head')} style={this.headStyle}>
|
||||
{this.genStatus()}
|
||||
</div>
|
||||
{this.slots()}
|
||||
{this.$slots.default?.()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -204,10 +204,10 @@ module.exports = {
|
||||
path: 'overlay',
|
||||
title: 'Overlay 遮罩层',
|
||||
},
|
||||
// {
|
||||
// path: 'pull-refresh',
|
||||
// title: 'PullRefresh 下拉刷新',
|
||||
// },
|
||||
{
|
||||
path: 'pull-refresh',
|
||||
title: 'PullRefresh 下拉刷新',
|
||||
},
|
||||
{
|
||||
path: 'share-sheet',
|
||||
title: 'ShareSheet 分享面板',
|
||||
@ -538,10 +538,10 @@ module.exports = {
|
||||
path: 'overlay',
|
||||
title: 'Overlay',
|
||||
},
|
||||
// {
|
||||
// path: 'pull-refresh',
|
||||
// title: 'PullRefresh',
|
||||
// },
|
||||
{
|
||||
path: 'pull-refresh',
|
||||
title: 'PullRefresh',
|
||||
},
|
||||
{
|
||||
path: 'share-sheet',
|
||||
title: 'ShareSheet',
|
||||
|
Loading…
x
Reference in New Issue
Block a user