Skip to content

Commit

Permalink
feat: toast修改完成 (#611)
Browse files Browse the repository at this point in the history
* feat: toast修改完成

* test: update snapshots

---------

Co-authored-by: anlyyao <[email protected]>
  • Loading branch information
mistakers and anlyyao authored Apr 21, 2023
1 parent 46dbcb1 commit bb4ec8d
Show file tree
Hide file tree
Showing 20 changed files with 281 additions and 489 deletions.
340 changes: 63 additions & 277 deletions src/toast/__test__/__snapshots__/demo.test.jsx.snap

Large diffs are not rendered by default.

20 changes: 8 additions & 12 deletions src/toast/__test__/demo.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,18 @@
*/

import { mount } from '@vue/test-utils';
import iconTextVue from '@/toast/demos/iconText.vue';
import maskVue from '@/toast/demos/mask.vue';
import baseVue from '@/toast/demos/base.vue';
import closeVue from '@/toast/demos/close.vue';
import coverVue from '@/toast/demos/cover.vue';
import mobileVue from '@/toast/demos/mobile.vue';
import overlayVue from '@/toast/demos/overlay.vue';
import positionVue from '@/toast/demos/position.vue';
import preventScrollThroughVue from '@/toast/demos/preventScrollThrough.vue';
import textVue from '@/toast/demos/text.vue';
import themeVue from '@/toast/demos/theme.vue';

const mapper = {
iconTextVue,
maskVue,
baseVue,
closeVue,
coverVue,
mobileVue,
overlayVue,
positionVue,
preventScrollThroughVue,
textVue,
themeVue,
};

describe('Toast', () => {
Expand Down
16 changes: 1 addition & 15 deletions src/toast/__test__/index.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe('Toast', () => {
icon,
},
});
expect(wrapper.find('.t-toast > svg').classes()).toContain('t-icon');
expect(wrapper.findComponent(LoadingIcon).exists()).toBeTruthy();
});

it(': message', async () => {
Expand All @@ -47,20 +47,6 @@ describe('Toast', () => {
expect(wrapper.findComponent(Overlay).vm.duration).toEqual(1000);
});

it(': placement', async () => {
const wrapper = mount(Toast, {
props: {
placement: 'top',
},
});
expect(wrapper.find('.t-toast').classes()).toContain('t-toast--top');
await wrapper.setProps({
placement: 'bottom',
});
expect(wrapper.find('.t-toast').classes()).not.toContain('t-toast--top');
expect(wrapper.find('.t-toast').classes()).toContain('t-toast--bottom');
});

it(': showOverlay', async () => {
const wrapper = mount(Toast, {
props: {
Expand Down
41 changes: 41 additions & 0 deletions src/toast/demos/base.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<div class="toast-demo">
<t-button block size="large" theme="primary" variant="outline" @click="showText()">纯文本</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="showMultiText()">多行文字</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="showHorizontalText()">带横向图标</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="showVerticalText()">带竖向图标</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="showLoading()">加载状态</t-button>
</div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue';
import { Toast } from 'tdesign-mobile-vue';
const showText = () => {
Toast('轻提示文字内容');
};
const showMultiText = () => {
Toast('最多一行展示十个汉字宽度限制最多不超过三行文字行文字行文字');
};
const showHorizontalText = () => {
Toast({
theme: 'success',
direction: 'row',
message: '轻提示文字内容',
});
};
const showVerticalText = () => {
Toast({
theme: 'success',
direction: 'column',
message: '轻提示文字内容',
});
};
const showLoading = () => {
Toast({
theme: 'loading',
message: '轻提示文字内容',
});
};
</script>
25 changes: 25 additions & 0 deletions src/toast/demos/close.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<template>
<div class="toast-demo">
<t-button block size="large" theme="primary" variant="outline" @click="showOverlay">显示提示</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="hideToast">关闭提示</t-button>
</div>
</template>

<script setup lang="ts">
import { Toast } from 'tdesign-mobile-vue';
const showOverlay = () => {
Toast({
message: '未知点击事件',
onClose: () => {
console.log('onClose');
},
onDestroy: () => {
console.log('onDestroy');
},
});
};
const hideToast = () => {
Toast.clear();
};
</script>
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<template>
<div class="toast-demo">
<t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="showPreventScrollThrough"
>禁止滑动和点击</t-button
>
</div>
</template>

Expand All @@ -16,6 +18,7 @@ const showPreventScrollThrough = () => {
placement: 'bottom',
duration: 5000,
preventScrollThrough: true,
showOverlay: true,
icon: () => h(PoweroffIcon),
});
};
Expand Down
49 changes: 0 additions & 49 deletions src/toast/demos/iconText.vue

This file was deleted.

17 changes: 0 additions & 17 deletions src/toast/demos/mask.vue

This file was deleted.

28 changes: 10 additions & 18 deletions src/toast/demos/mobile.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,24 @@
<div class="tdesign-mobile-demo">
<h1 class="title">Toast 轻提示</h1>
<p class="summary">一种轻量级反馈或提示,不会打断用户操作。</p>
<tdesign-demo-block title="01 类型" summary="基础提示">
<textDemo />
<tdesign-demo-block title="01 组件类型" summary="基础提示">
<baseDemo />
</tdesign-demo-block>
<tdesign-demo-block summary="默认提示">
<iconTextDemo />
</tdesign-demo-block>
<tdesign-demo-block title="02 展示位置和展示时间" summary="弹窗展示位置为顶部、中部、底部三种,展示时间可自定义">
<positionDemo />
<tdesign-demo-block title="01 组件状态" summary="内置主题">
<themeDemo />
</tdesign-demo-block>
<tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩,禁止滑动和点击">
<preventScrollThroughDemo />
<coverDemo />
</tdesign-demo-block>
<tdesign-demo-block title="04 手动关闭" summary="手动关闭轻提示">
<maskDemo />
</tdesign-demo-block>
<tdesign-demo-block title="05 透传 Overlay" summary="向 Overlay 遮罩透传属性">
<overlayDemo />
<closeDemo />
</tdesign-demo-block>
</div>
</template>

<script lang="ts" setup>
import textDemo from './text.vue';
import iconTextDemo from './iconText.vue';
import positionDemo from './position.vue';
import maskDemo from './mask.vue';
import preventScrollThroughDemo from './preventScrollThrough.vue';
import overlayDemo from './overlay.vue';
import baseDemo from './base.vue';
import themeDemo from './theme.vue';
import coverDemo from './cover.vue';
import closeDemo from './close.vue';
</script>
21 changes: 0 additions & 21 deletions src/toast/demos/overlay.vue

This file was deleted.

31 changes: 0 additions & 31 deletions src/toast/demos/position.vue

This file was deleted.

28 changes: 0 additions & 28 deletions src/toast/demos/text.vue

This file was deleted.

35 changes: 35 additions & 0 deletions src/toast/demos/theme.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<div class="toast-demo">
<t-button block size="large" theme="primary" variant="outline" @click="showSuccessToast()">成功提示</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="showWarningToast()">警告提示</t-button>
<t-button block size="large" theme="primary" variant="outline" @click="showErrorToast()">错误提示</t-button>
</div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue';
import { Toast } from 'tdesign-mobile-vue';
import { ErrorCircleIcon } from 'tdesign-icons-vue-next';
const showSuccessToast = () => {
Toast({
theme: 'success',
direction: 'column',
message: '轻提示文字内容',
});
};
const showWarningToast = () => {
Toast({
icon: () => h(ErrorCircleIcon),
direction: 'column',
message: '轻提示文字内容',
});
};
const showErrorToast = () => {
Toast({
theme: 'error',
direction: 'column',
message: '轻提示文字内容',
});
};
</script>
Loading

0 comments on commit bb4ec8d

Please sign in to comment.