-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* fix(drawer): 拖拽时取消浏览器默认行为 * docs(drawer): resizable描述精确化 * docs(drawer): 补充文档案例，自定义头部和页脚 * feat(drawer): 页脚操作体验优化 * feat(drawer): 增加操作按钮loading和是否展示取消的配置项 * feat(drawer): 增加是否显示底部分割线的配置项 * docs(drawer): 抽屉文档描述补充
- Loading branch information
Showing
9 changed files
with
305 additions
and
17 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| <template> | ||
| <FForm> | ||
| <FFormItem label="是否展示取消按钮:"> | ||
| <FRadioGroup | ||
| v-model="showCancel" | ||
| :options="[ | ||
| { label: '是(默认)', value: true }, | ||
| { label: '否', value: false }, | ||
| ]" | ||
| /> | ||
| </FFormItem> | ||
| <FFormItem label="是否显示底部分割线:"> | ||
| <FRadioGroup | ||
| v-model="showFooterBorder" | ||
| :options="[ | ||
| { label: '是', value: true }, | ||
| { label: '否(默认)', value: false }, | ||
| ]" | ||
| /> | ||
| </FFormItem> | ||
| </FForm> | ||
|
|
||
| <FDivider></FDivider> | ||
|
|
||
| <FSpace> | ||
| <FButton @click="() => (normalShow = true)">常规</FButton> | ||
| <FButton @click="() => (customShow = true)">自定义页脚</FButton> | ||
| </FSpace> | ||
|
|
||
| <FDrawer | ||
| v-model:show="normalShow" | ||
| title="常规" | ||
| displayDirective="if" | ||
| :footer="true" | ||
| :footerBorder="showFooterBorder" | ||
| :okLoading="normalOkLoading" | ||
| :okText="normalOkText" | ||
| :showCancel="showCancel" | ||
| @ok="() => handleNormalOk()" | ||
| @cancel="normalShow = false" | ||
| > | ||
| <div style="height: 1000px">我是内容...</div> | ||
| <div>我是内容...</div> | ||
| <div>我是内容...</div> | ||
| </FDrawer> | ||
|
|
||
| <FDrawer | ||
| v-model:show="customShow" | ||
| displayDirective="if" | ||
| :footer="true" | ||
| :footerBorder="showFooterBorder" | ||
| title="自定义页脚" | ||
| > | ||
| <div style="height: 1000px">我是内容...</div> | ||
| <div>我是内容...</div> | ||
| <div>我是内容...</div> | ||
| <template #footer> | ||
| <FSpace justify="end"> | ||
| <FButton | ||
| v-show="showCancel" | ||
| type="warning" | ||
| :loading="customCancelLoading" | ||
| @click="handleCustomCancel" | ||
| > | ||
| {{ customCancelText }} | ||
| </FButton> | ||
| <FButton | ||
| type="primary" | ||
| :loading="customOkLoading" | ||
| @click="handleCustomOk" | ||
| > | ||
| {{ customOkText }} | ||
| </FButton> | ||
| </FSpace> | ||
| </template> | ||
| </FDrawer> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref, nextTick } from 'vue'; | ||
| function sleep(time) { | ||
| return new Promise((resolve) => setTimeout(resolve, time)); | ||
| } | ||
| function useDrawer() { | ||
| const show = ref(false); | ||
| const okLoading = ref(false); | ||
| const cancelLoading = ref(false); | ||
| const okText = ref('提交更新'); | ||
| const cancelText = ref('数据还原'); | ||
| const handleCancel = async () => { | ||
| cancelLoading.value = true; | ||
| cancelText.value = '3s后自动关闭'; | ||
| await sleep(3000); | ||
| cancelLoading.value = false; | ||
| show.value = false; | ||
| await nextTick(); | ||
| cancelText.value = '数据还原'; | ||
| }; | ||
| const handleOk = async () => { | ||
| okLoading.value = true; | ||
| okText.value = '2s后自动关闭'; | ||
| await sleep(2000); | ||
| okLoading.value = false; | ||
| show.value = false; | ||
| await nextTick(); | ||
| okText.value = '提交更新'; | ||
| }; | ||
| return { | ||
| show, | ||
| okLoading, | ||
| cancelLoading, | ||
| handleCancel, | ||
| handleOk, | ||
| okText, | ||
| cancelText, | ||
| }; | ||
| } | ||
| export default { | ||
| setup() { | ||
| const showCancel = ref(true); | ||
| const showFooterBorder = ref(true); | ||
| const { | ||
| show: normalShow, | ||
| okLoading: normalOkLoading, | ||
| handleOk: handleNormalOk, | ||
| okText: normalOkText, | ||
| } = useDrawer(); | ||
| const { | ||
| show: customShow, | ||
| cancelLoading: customCancelLoading, | ||
| okLoading: customOkLoading, | ||
| handleCancel: handleCustomCancel, | ||
| handleOk: handleCustomOk, | ||
| okText: customOkText, | ||
| cancelText: customCancelText, | ||
| } = useDrawer(); | ||
| return { | ||
| showFooterBorder, | ||
| normalShow, | ||
| normalOkLoading, | ||
| handleNormalOk, | ||
| normalOkText, | ||
| showCancel, | ||
| customShow, | ||
| customCancelLoading, | ||
| customOkLoading, | ||
| handleCustomCancel, | ||
| handleCustomOk, | ||
| customOkText, | ||
| customCancelText, | ||
| }; | ||
| }, | ||
| }; | ||
| </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,34 @@ | ||
| <template> | ||
| <FSpace> | ||
| <FButton @click="show = true">自定义页脚</FButton> | ||
| <FDrawer | ||
| v-model:show="show" | ||
| title="这里是标题" | ||
| :footer="true" | ||
| displayDirective="if" | ||
| > | ||
| <div style="height: 1000px">我是内容...</div> | ||
| <div>我是内容...</div> | ||
| <div>我是内容...</div> | ||
| <template #footer> | ||
| <FSpace justify="end"> | ||
| <FButton>取消</FButton> | ||
| <FButton type="primary">确认</FButton> | ||
| </FSpace> | ||
| </template> | ||
| </FDrawer> | ||
| </FSpace> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref } from 'vue'; | ||
| export default { | ||
| setup() { | ||
| const show = ref(false); | ||
| return { | ||
| show, | ||
| }; | ||
| }, | ||
| }; | ||
| </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,41 @@ | ||
| <template> | ||
| <FSpace> | ||
| <FButton @click="show = true">自定义头部</FButton> | ||
| <FDrawer v-model:show="show" title="这里是标题" @ok="show = false"> | ||
| <template #title> | ||
| <div class="header"> | ||
| <span style="margin-right: 8px">自定义头部标题</span> | ||
| <EditOutlined /> | ||
| </div> | ||
| </template> | ||
| <div>我是内容...</div> | ||
| <div>我是内容...</div> | ||
| <div>我是内容...</div> | ||
| </FDrawer> | ||
| </FSpace> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref } from 'vue'; | ||
| import { EditOutlined } from '@fesjs/fes-design/icon'; | ||
| export default { | ||
| components: { | ||
| EditOutlined, | ||
| }, | ||
| setup() { | ||
| const show = ref(false); | ||
| return { | ||
| show, | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .header { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } | ||
| </style> |
Oops, something went wrong.