feat: migrate PullRefresh component

This commit is contained in:
chenjiahan 2020-07-25 22:21:22 +08:00
parent c0c175f5ff
commit bb8a3d60b7
3 changed files with 21 additions and 17 deletions

View File

@ -34,4 +34,5 @@ module.exports = [
'tree-select',
'notice-bar',
'share-sheet',
'pull-refresh',
];

View File

@ -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>
);

View File

@ -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',