133 lines
3.3 KiB
Plaintext
133 lines
3.3 KiB
Plaintext
|
<t-button
|
||
|
|
t-class="wrapper"
|
||
|
|
size="large"
|
||
|
|
theme="primary"
|
||
|
|
variant="outline"
|
||
|
|
data-key="imageOnTop"
|
||
|
|
bind:tap="showDialog"
|
||
|
|
block
|
||
|
|
>
|
||
|
|
图片置顶-带标题描述
|
||
|
|
</t-button>
|
||
|
|
<t-dialog
|
||
|
|
visible="{{imageOnTop}}"
|
||
|
|
title="对话框标题"
|
||
|
|
content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
|
||
|
|
confirm-btn="{{ {content: '确定', variant: 'base' } }}"
|
||
|
|
cancel-btn="取消"
|
||
|
|
bind:confirm="closeDialog"
|
||
|
|
bind:cancel="closeDialog"
|
||
|
|
>
|
||
|
|
<t-image slot="top" t-class="dialog-image" src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" />
|
||
|
|
</t-dialog>
|
||
|
|
|
||
|
|
<t-button
|
||
|
|
t-class="wrapper"
|
||
|
|
size="large"
|
||
|
|
theme="primary"
|
||
|
|
variant="outline"
|
||
|
|
data-key="imageOnTopWithContent"
|
||
|
|
bind:tap="showDialog"
|
||
|
|
block
|
||
|
|
>
|
||
|
|
图片置顶-无标题
|
||
|
|
</t-button>
|
||
|
|
<t-dialog
|
||
|
|
visible="{{imageOnTopWithContent}}"
|
||
|
|
content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
|
||
|
|
confirm-btn="{{ {content: '确定', variant: 'base' } }}"
|
||
|
|
cancel-btn="取消"
|
||
|
|
bind:confirm="closeDialog"
|
||
|
|
bind:cancel="closeDialog"
|
||
|
|
>
|
||
|
|
<t-image slot="top" t-class="dialog-image" src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" />
|
||
|
|
</t-dialog>
|
||
|
|
|
||
|
|
<t-button
|
||
|
|
t-class="wrapper"
|
||
|
|
size="large"
|
||
|
|
theme="primary"
|
||
|
|
variant="outline"
|
||
|
|
data-key="imageOnTopWithTitle"
|
||
|
|
bind:tap="showDialog"
|
||
|
|
block
|
||
|
|
>
|
||
|
|
图片置顶-纯标题
|
||
|
|
</t-button>
|
||
|
|
<t-dialog
|
||
|
|
visible="{{imageOnTopWithTitle}}"
|
||
|
|
title="对话框标题"
|
||
|
|
confirm-btn="{{ {content: '确定', variant: 'base' } }}"
|
||
|
|
cancel-btn="取消"
|
||
|
|
bind:confirm="closeDialog"
|
||
|
|
bind:cancel="closeDialog"
|
||
|
|
>
|
||
|
|
<t-image slot="top" t-class="dialog-image" src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" />
|
||
|
|
</t-dialog>
|
||
|
|
|
||
|
|
<t-button
|
||
|
|
t-class="wrapper"
|
||
|
|
theme="primary"
|
||
|
|
size="large"
|
||
|
|
variant="outline"
|
||
|
|
data-key="imageOnMiddleWithImage"
|
||
|
|
bind:tap="showDialog"
|
||
|
|
block
|
||
|
|
>
|
||
|
|
图片置顶-纯图片
|
||
|
|
</t-button>
|
||
|
|
<t-dialog
|
||
|
|
visible="{{imageOnMiddleWithImage}}"
|
||
|
|
confirm-btn="{{ {content: '确定', variant: 'base' } }}"
|
||
|
|
cancel-btn="取消"
|
||
|
|
bind:confirm="closeDialog"
|
||
|
|
bind:cancel="closeDialog"
|
||
|
|
>
|
||
|
|
<t-image slot="top" t-class="dialog-image" src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" />
|
||
|
|
</t-dialog>
|
||
|
|
|
||
|
|
<t-button
|
||
|
|
t-class="wrapper"
|
||
|
|
theme="primary"
|
||
|
|
size="large"
|
||
|
|
variant="outline"
|
||
|
|
data-key="imageOnMiddle"
|
||
|
|
bind:tap="showDialog"
|
||
|
|
block
|
||
|
|
>
|
||
|
|
图片居中-带标题描述
|
||
|
|
</t-button>
|
||
|
|
<t-dialog
|
||
|
|
visible="{{imageOnMiddle}}"
|
||
|
|
title="对话框标题"
|
||
|
|
content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
|
||
|
|
confirm-btn="{{ {content: '确定', variant: 'base' } }}"
|
||
|
|
cancel-btn="取消"
|
||
|
|
bind:confirm="closeDialog"
|
||
|
|
bind:cancel="closeDialog"
|
||
|
|
>
|
||
|
|
<t-image slot="middle" t-class="image-host dialog-image" src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" />
|
||
|
|
</t-dialog>
|
||
|
|
|
||
|
|
<t-button
|
||
|
|
t-class="wrapper"
|
||
|
|
theme="primary"
|
||
|
|
size="large"
|
||
|
|
variant="outline"
|
||
|
|
data-key="imageOnMiddleWithTitle"
|
||
|
|
bind:tap="showDialog"
|
||
|
|
block
|
||
|
|
>
|
||
|
|
图片居中-纯标题
|
||
|
|
</t-button>
|
||
|
|
<t-dialog
|
||
|
|
visible="{{imageOnMiddleWithTitle}}"
|
||
|
|
title="对话框标题"
|
||
|
|
confirm-btn="{{ {content: '确定', variant: 'base' } }}"
|
||
|
|
cancel-btn="取消"
|
||
|
|
bind:confirm="closeDialog"
|
||
|
|
bind:cancel="closeDialog"
|
||
|
|
>
|
||
|
|
<t-image slot="middle" t-class="image-host dialog-image" src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" />
|
||
|
|
</t-dialog>
|