-
Notifications
You must be signed in to change notification settings - Fork 769
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
44 changed files
with
648 additions
and
261 deletions.
There are no files selected for viewing
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
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
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 |
|---|---|---|
| @@ -1,23 +1,39 @@ | ||
| <template> | ||
| <view> | ||
| <u-popup v-model="show" @close="close"> | ||
| <view>出淤泥而不染，濯清涟而不妖</view> | ||
| </u-popup> | ||
| <u-button @click="show = true">打开</u-button> | ||
| <view style="padding-top: 200px;"> | ||
| <u-button @click="show = true" :custom-style="{ | ||
| color: 'red', | ||
| borderColor: 'blue' | ||
| }">打开</u-button> | ||
| </view> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| show: false | ||
| show: true, | ||
| list: [{ | ||
| name: '待收货' | ||
| }, { | ||
| name: '待付款' | ||
| }, { | ||
| name: '待评价' | ||
| }], | ||
| current: 0 | ||
| } | ||
| }, | ||
| onLoad() { | ||
| // setTimeout(() => { | ||
| // this.show = false; | ||
| // }, 2000) | ||
| }, | ||
| methods: { | ||
| close() { | ||
| console.log('close'); | ||
| //console.log('close'); | ||
| }, | ||
| change(index) { | ||
| this.current = index; | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| </script> |
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,94 @@ | ||
| <template> | ||
| <view class="u-demo"> | ||
| <view class="u-demo-wrap"> | ||
| <view class="u-demo-title">演示效果</view> | ||
| <view class="u-demo-area"> | ||
| <view class="no-mode-here"> | ||
| 选择节流或者防抖模式，点击按钮，将会执行回调并显示在下方： | ||
| </view> | ||
| <view class="u-demo-result-line" v-if="result.length"> | ||
| <view v-for="(item, index) in result" :key="index">{{(index >= 1) ? '-' : ''}}回调</view> | ||
| </view> | ||
| </view> | ||
| </view> | ||
| <view class="u-config-wrap"> | ||
| <view class="u-button" hover-class="u-button--hover" hover-stay-time="150" @tap="btnClick"> | ||
| 点击触发 | ||
| </view> | ||
| <view class="u-config-title u-border-bottom"> | ||
| 参数配置 | ||
| </view> | ||
| <view class="u-config-item"> | ||
| <view class="u-item-title">模式</view> | ||
| <u-subsection vibrateShort :list="['节流', '防抖']" @change="modeChange"></u-subsection> | ||
| </view> | ||
| <view class="u-config-item"> | ||
| <view class="u-item-title">时间间隔</view> | ||
| <u-subsection vibrateShort current="1" :list="['500ms', '1000ms', '2000ms']" @change="timeoutChange"></u-subsection> | ||
| </view> | ||
| <view class="u-config-item"> | ||
| <view class="u-item-title">执行时机</view> | ||
| <u-subsection vibrateShort :list="['开始处', '结束处']" @change="immediateChange"></u-subsection> | ||
| </view> | ||
| </view> | ||
| </view> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| result: [], | ||
| timeout: 1000, | ||
| immediate: true, | ||
| mode: 'throttle' | ||
| } | ||
| }, | ||
| methods: { | ||
| modeChange(index) { | ||
| this.mode = index ? 'debouncd' : 'throttle'; | ||
| }, | ||
| timeoutChange(index) { | ||
| this.timeout = [500, 1000, 2000][index]; | ||
| }, | ||
| immediateChange(index) { | ||
| this.immediate = !index; | ||
| }, | ||
| getResult() { | ||
| if(this.result.length >= 6) this.result = []; | ||
| this.result.push(0); | ||
| }, | ||
| btnClick() { | ||
| if(this.mode == 'throttle') { | ||
| this.$u.throttle(this.getResult, this.timeout, this.immediate); | ||
| } else { | ||
| this.$u.debounce(this.getResult, this.timeout, this.immediate); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .u-button { | ||
| margin-top: 50rpx; | ||
| margin-bottom: 50rpx; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 80rpx; | ||
| border-radius: 6rpx; | ||
| border: 1px solid $u-type-primary; | ||
| color: $u-type-primary; | ||
| } | ||
| .u-button--hover { | ||
| color: #fff; | ||
| background-color: $u-type-primary; | ||
| } | ||
| .u-demo-result-line { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| </style> |
Oops, something went wrong.