mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 20:27:44 +08:00
feat(docs): InfiniteScroll code for composition (#2193)
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
parent
be2e8a0f22
commit
797b978f76
@ -26,6 +26,26 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
const load = () => {
|
||||
count.value += 2;
|
||||
};
|
||||
return {
|
||||
count,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@ -73,6 +93,36 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(10);
|
||||
const loading = ref(false);
|
||||
const noMore = computed(() => count.value >= 20);
|
||||
const disabled = computed(() => loading.value || noMore.value);
|
||||
const load = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
count.value += 2;
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
return {
|
||||
count,
|
||||
loading,
|
||||
noMore,
|
||||
disabled,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
@ -27,6 +27,26 @@ Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
const load = () => {
|
||||
count.value += 2;
|
||||
};
|
||||
return {
|
||||
count,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@ -74,6 +94,36 @@ Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(10);
|
||||
const loading = ref(false);
|
||||
const noMore = computed(() => count.value >= 20);
|
||||
const disabled = computed(() => loading.value || noMore.value);
|
||||
const load = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
count.value += 2;
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
return {
|
||||
count,
|
||||
loading,
|
||||
noMore,
|
||||
disabled,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
@ -26,6 +26,26 @@ Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la métho
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
const load = () => {
|
||||
count.value += 2;
|
||||
};
|
||||
return {
|
||||
count,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@ -73,6 +93,36 @@ Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la métho
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(10);
|
||||
const loading = ref(false);
|
||||
const noMore = computed(() => count.value >= 20);
|
||||
const disabled = computed(() => loading.value || noMore.value);
|
||||
const load = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
count.value += 2;
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
return {
|
||||
count,
|
||||
loading,
|
||||
noMore,
|
||||
disabled,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
@ -26,6 +26,26 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
const load = () => {
|
||||
count.value += 2;
|
||||
};
|
||||
return {
|
||||
count,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@ -73,6 +93,36 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(10);
|
||||
const loading = ref(false);
|
||||
const noMore = computed(() => count.value >= 20);
|
||||
const disabled = computed(() => loading.value || noMore.value);
|
||||
const load = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
count.value += 2;
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
return {
|
||||
count,
|
||||
loading,
|
||||
noMore,
|
||||
disabled,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
@ -26,6 +26,26 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
const load = () => {
|
||||
count.value += 2;
|
||||
};
|
||||
return {
|
||||
count,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@ -73,6 +93,36 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const count = ref(10);
|
||||
const loading = ref(false);
|
||||
const noMore = computed(() => count.value >= 20);
|
||||
const disabled = computed(() => loading.value || noMore.value);
|
||||
const load = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
count.value += 2;
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
return {
|
||||
count,
|
||||
loading,
|
||||
noMore,
|
||||
disabled,
|
||||
load,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user