-
Notifications
You must be signed in to change notification settings - Fork 276
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: enhance the divider dialogbox treemenu function
- Loading branch information
Showing
90 changed files
with
2,035 additions
and
242 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
128 changes: 128 additions & 0 deletions
128
examples/sites/demos/mobile-first/app/dialog-box/double-dialog-height.vue
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,128 @@ | ||
| <template> | ||
| <div> | ||
| <tiny-button @click="changModdeFn" type="primary">当前为 {{ flag }} 模式</tiny-button> | ||
| <tiny-button @click="changFn">双层抽屉 </tiny-button> | ||
| <tiny-dialog-box | ||
| :visible="boxVisibility" | ||
| right-slide | ||
| @update:visible="boxVisibility = $event" | ||
| title="父弹窗" | ||
| width="30%" | ||
| :custom-style="customStyle1" | ||
| > | ||
| <span>父弹窗内容</span> | ||
| <tiny-dialog-box | ||
| append-to-body | ||
| right-slide | ||
| :modal="false" | ||
| :close-on-click-modal="false" | ||
| no-animation | ||
| :visible="boxVisibility2" | ||
| :custom-style="customStyle2" | ||
| @close="dialogClose" | ||
| @update:visible="boxVisibility2 = $event" | ||
| title="子弹窗" | ||
| width="300px" | ||
| > | ||
| <span>子弹窗内容</span> | ||
| <template #footer> | ||
| <tiny-button type="primary" @click="boxVisibility2 = false"> 确定 </tiny-button> | ||
| </template> | ||
| </tiny-dialog-box> | ||
| <template #footer> | ||
| <tiny-button @click="boxVisibility = false">取消</tiny-button> | ||
| <tiny-button type="primary" @click="openDialog"> 子弹窗 </tiny-button> | ||
| </template> | ||
| </tiny-dialog-box> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Button, DialogBox } from '@opentiny/vue' | ||
| export default { | ||
| components: { | ||
| TinyButton: Button, | ||
| TinyDialogBox: DialogBox | ||
| }, | ||
| data() { | ||
| return { | ||
| flag: 'auto', | ||
| boxVisibility: false, | ||
| customStyle1: {}, | ||
| customStyle2: {}, | ||
| boxVisibility2: false | ||
| } | ||
| }, | ||
| methods: { | ||
| changFn() { | ||
| this.boxVisibility = true | ||
| }, | ||
| changModdeFn() { | ||
| this.flag = this.flag === 'full' ? 'auto' : 'full' | ||
| }, | ||
| openDialog() { | ||
| if (this.flag === 'full') { | ||
| this.customStyle1 = { | ||
| right: '8px', | ||
| bottom: '8px', | ||
| top: '8px', | ||
| height: 'auto', | ||
| borderRadius: '8px', | ||
| transition: 'right 0.2s ease-in-out' | ||
| } | ||
| this.customStyle2 = { | ||
| bottom: '8px', | ||
| top: '8px', | ||
| height: 'auto', | ||
| borderRadius: '8px', | ||
| opacity: 0 | ||
| } | ||
| const rightW = document.body.offsetWidth * 0.3 | ||
| this.customStyle1.right = -rightW + 80 + 'px' | ||
| this.customStyle2.right = rightW + 'px' | ||
| this.customStyle2.transition = 'right 200ms ease-in-out opacity 100ms linear' | ||
| this.boxVisibility2 = true | ||
| setTimeout(() => { | ||
| this.customStyle2.right = '85px' | ||
| }, 10) | ||
| setTimeout(() => { | ||
| this.customStyle2.opacity = 1 | ||
| }, 100) | ||
| } else { | ||
| this.customStyle1 = { | ||
| right: '8px', | ||
| bottom: '8px', | ||
| top: '8px', | ||
| height: 'auto', | ||
| borderRadius: '8px', | ||
| transition: 'right 0.2s ease-in-out' | ||
| } | ||
| this.customStyle2 = { | ||
| bottom: '8px', | ||
| top: 'unset', | ||
| height: 'auto', | ||
| borderRadius: '8px', | ||
| opacity: 0 | ||
| } | ||
| const rightW = document.body.offsetWidth * 0.3 | ||
| this.customStyle2.right = rightW + 46 + 'px' | ||
| this.customStyle2.transition = 'opacity 100ms linear' | ||
| this.boxVisibility2 = true | ||
| setTimeout(() => { | ||
| this.customStyle2.opacity = 1 | ||
| }, 100) | ||
| } | ||
| }, | ||
| dialogClose() { | ||
| setTimeout(() => { | ||
| this.customStyle1.right = '8px' | ||
| this.customStyle2.opacity = 0 | ||
| }, 50) | ||
| } | ||
| } | ||
| } | ||
| </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
19 changes: 19 additions & 0 deletions
19
examples/sites/demos/mobile-first/app/divider/basic-usage.vue
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,19 @@ | ||
| <template> | ||
| <div> | ||
| <p>基础使用</p> | ||
| <tiny-divider> </tiny-divider> | ||
| <br /> | ||
| <p>带文本分割线</p> | ||
| <tiny-divider> 分割线 </tiny-divider> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Divider } from '@opentiny/vue' | ||
| export default { | ||
| components: { | ||
| TinyDivider: Divider | ||
| } | ||
| } | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <template> | ||
| <div> | ||
| <tiny-divider color="#55ccd9"></tiny-divider> | ||
| <br /> | ||
| <tiny-divider color="#eb74df"> 分割线 </tiny-divider> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Divider } from '@opentiny/vue' | ||
| export default { | ||
| components: { | ||
| TinyDivider: Divider | ||
| } | ||
| } | ||
| </script> |
17 changes: 17 additions & 0 deletions
17
examples/sites/demos/mobile-first/app/divider/content-position.vue
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,17 @@ | ||
| <template> | ||
| <div> | ||
| <tiny-divider> 分割线 </tiny-divider> | ||
| <tiny-divider content-position="left"> 分割线 </tiny-divider> | ||
| <tiny-divider content-position="right"> 分割线 </tiny-divider> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Divider } from '@opentiny/vue' | ||
| export default { | ||
| components: { | ||
| TinyDivider: Divider | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.