-
-
Notifications
You must be signed in to change notification settings - Fork 626
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
352 additions
and
102 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,56 @@ | ||
| <template> | ||
| <i | ||
| class="var-icon" | ||
| :class="[`${namespace}--set`, `${namespace}-${nextName}`, tickTransition ? 'var-icon--hidden' : null]" | ||
| :style="{ | ||
| color: color, | ||
| 'font-size': size, | ||
| transition: `transform ${transition}ms`,}" | ||
| v-bind="$attrs" | ||
| /> | ||
| <i | ||
| class="var-icon" | ||
| :class="[`${namespace}--set`, `${namespace}-${nextName}`, tickTransition ? 'var-icon--hidden' : null]" | ||
| :style="{ | ||
| transition: `transform ${transition}ms`, | ||
| }" | ||
| v-bind="$attrs" | ||
| /> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, watch, ref, Ref, nextTick } from 'vue' | ||
| import { props } from './props' | ||
| export default defineComponent({ | ||
| name: 'VarIcon', | ||
| inheritAttrs: false, | ||
| props, | ||
| setup(props) { | ||
| const nextName: Ref<string | undefined> = ref('') | ||
| const tickTransition: Ref<boolean> = ref(false) | ||
| watch( | ||
| () => props.name, | ||
| (newValue: string | undefined, oldValue: string | undefined) => { | ||
| if (oldValue === undefined) { | ||
| nextName.value = newValue | ||
| } | ||
| tickTransition.value = true | ||
| nextTick().then(() => { | ||
| setTimeout(() => { | ||
| if (oldValue !== undefined) { | ||
| nextName.value = newValue | ||
| } | ||
| tickTransition.value = false | ||
| }, props.transition) | ||
| }) | ||
| }, | ||
| { immediate: true } | ||
| ) | ||
| return { | ||
| nextName, | ||
| tickTransition | ||
| } | ||
| import { defineComponent, watch, ref, Ref, nextTick } from 'vue' | ||
| import { props } from './props' | ||
| export default defineComponent({ | ||
| name: 'VarIcon', | ||
| inheritAttrs: false, | ||
| props, | ||
| setup(props) { | ||
| const nextName: Ref<string | undefined> = ref('') | ||
| const tickTransition: Ref<boolean> = ref(false) | ||
| watch( | ||
| () => props.name, | ||
| (newValue: string | undefined, oldValue: string | undefined) => { | ||
| if (oldValue === undefined) { | ||
| nextName.value = newValue | ||
| } | ||
| tickTransition.value = true | ||
| nextTick().then(() => { | ||
| setTimeout(() => { | ||
| if (oldValue !== undefined) { | ||
| nextName.value = newValue | ||
| } | ||
| tickTransition.value = false | ||
| }, props.transition) | ||
| }) | ||
| }, | ||
| { immediate: true } | ||
| ) | ||
| return { | ||
| nextName, | ||
| tickTransition, | ||
| } | ||
| }) | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="less"> | ||
| @import './icon'; | ||
| @import './icon'; | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| # PullRefresh | ||
|
|
||
| ### Introduce | ||
|
|
||
| Provides a drop-down refresh interaction。 | ||
|
|
||
| ### install | ||
|
|
||
| ```js | ||
| import { PullRefresh } from '@varlet/ui' | ||
|
|
||
| export default defineComponent({ | ||
| components: { | ||
| [PullRefresh.name]: PullRefresh, | ||
| }, | ||
| }) | ||
| ``` | ||
|
|
||
| ### Basic Usage | ||
|
|
||
| The refresh event will be Emitted when pull refresh, you should set `v-model` to `true` at the beginning of the event indicates that loading is under way, and setting `v-model` to `false` after completion indicates that loading is over. | ||
|
|
||
| ```html | ||
| <var-pull-refresh v-model="isRefresh" @refresh="refresh"> | ||
| <ul class="pull-refresh__example"> | ||
| <li v-for="(item, index) in data" :key="index">{{ item + ' ' + (index + 1) }}</li> | ||
| </ul> | ||
| </var-pull-refresh> | ||
| ``` | ||
| ```javascript | ||
| import { defineComponent, ref } from 'vue' | ||
| import PullRefresh from '@varlet/ui' | ||
|
|
||
| const data1 = Array(10).fill('List Item') | ||
| const data2 = Array(10).fill('This is new List Item') | ||
|
|
||
| export default defineComponent({ | ||
| components: { | ||
| [PullRefresh.name]: PullRefresh | ||
| }, | ||
| setup() { | ||
| const isRefresh = ref(true) | ||
| const data = ref(data1) | ||
|
|
||
| const refresh = () => { | ||
| isRefresh.value = true | ||
| setTimeout(() => { | ||
| data.value = data.value[0] === 'List Item' ? data2 : data1 | ||
| isRefresh.value = false | ||
| }, 2000) | ||
| } | ||
|
|
||
| return { | ||
| refresh, | ||
| isRefresh, | ||
| data | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| ### Props | ||
|
|
||
| | Attribute | Description | Type | Default | | ||
| | ----- | -------------- | -------- | ---------- | | ||
| | v-model | Loading status | _boolean_ | - | | ||
| | disabled | Whether to disable pull refresh | _boolean_ | `false` | | ||
| | animation-duration | Animation duration(ms) | _number_ ｜ _string_ | `300` | | ||
| | success-duration | Success text display duration(ms) | _number_ ｜ _string_ | `2000` | | ||
| | bgColor | BackgroundColor of control | _string_ | `#005CAF` | | ||
| | color | color of control | _string_ | `#ffffff` | | ||
| | successBgColor | BackgroundColor of control when the status is success | _string_ | `#4CAF50` | | ||
| | successColor | color of control when the status is success | _string_ | `ffffff` | | ||
|
|
||
| ### Events | ||
| | Event | Description | Parameters | | ||
| | ----- | -------------- | -------- | | ||
| | refresh | Emitted after pulling refresh| - | | ||
|
|
||
| ### Slots | ||
| | Name | Description | SlotProps | | ||
| | ----- | -------------- | -------- | | ||
| | default | Default slot | - | |
Oops, something went wrong.