diff --git a/README.md b/README.md index 7471bf256..f4d411649 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- logo + logo

Mobile UI Components built on Vue

diff --git a/README.zh-CN.md b/README.zh-CN.md index 39c019570..ce9899aff 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,5 +1,5 @@

- logo + logo

轻量、可靠的移动端 Vue 组件库

diff --git a/docs/src/components/DemoList.vue b/docs/src/components/DemoList.vue index 882d42376..6cdcee5fa 100644 --- a/docs/src/components/DemoList.vue +++ b/docs/src/components/DemoList.vue @@ -16,7 +16,7 @@

- + Vant

{{ description }}

diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 7bc7c88c4..6c4ffc174 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -15,7 +15,7 @@ export default { 'zh-CN': { header: { logo: { - image: 'https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png', + image: 'https://img.yzcdn.cn/vant/logo.png', title: 'Vant', href: '#/' }, @@ -349,7 +349,7 @@ export default { header: { logo: { image: - 'https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png', + 'https://img.yzcdn.cn/vant/logo.png', title: 'Vant', href: '#/' }, diff --git a/packages/style/var.less b/packages/style/var.less index 0591508f9..b37a9ed26 100644 --- a/packages/style/var.less +++ b/packages/style/var.less @@ -552,7 +552,7 @@ @toast-line-height: 20px; @toast-border-radius: 4px; @toast-background-color: rgba(@text-color, .88); -@toast-icon-size: 48px; +@toast-icon-size: 40px; @toast-text-min-width: 96px; @toast-text-padding: 8px 12px; @toast-default-padding: 15px; diff --git a/packages/toast/Toast.js b/packages/toast/Toast.js index e4d869964..dec203599 100644 --- a/packages/toast/Toast.js +++ b/packages/toast/Toast.js @@ -4,12 +4,12 @@ import Icon from '../icon'; import Loading from '../loading'; const [sfc, bem] = use('toast'); -const STYLE = ['success', 'fail', 'loading']; export default sfc({ mixins: [PopupMixin], props: { + icon: String, className: null, loadingType: String, forbidClick: Boolean, @@ -62,6 +62,7 @@ export default sfc({ } }, + /* istanbul ignore next */ onAfterEnter() { this.$emit('opened'); @@ -72,31 +73,43 @@ export default sfc({ }, render(h) { - const { type, message, loadingType } = this; - const style = STYLE.indexOf(type) !== -1 ? 'default' : type; + const { type, icon, message, loadingType } = this; - function Content() { - switch (style) { - case 'text': - return
{message}
; - case 'html': - return
; + const hasIcon = icon || (type === 'success' || type === 'fail'); + + function ToastIcon() { + if (hasIcon) { + return ; } - return [ - type === 'loading' ? ( - - ) : ( - - ), - isDef(message) &&
{message}
- ]; + if (type === 'loading') { + return ; + } + } + + function Message() { + if (!isDef(message) || message === '') { + return; + } + + if (type === 'html') { + return
; + } + + return
{message}
; } return ( -
- {Content()} +
+ {ToastIcon()} + {Message()}
); diff --git a/packages/toast/demo/index.vue b/packages/toast/demo/index.vue index 556b4aeb3..a0557e872 100644 --- a/packages/toast/demo/index.vue +++ b/packages/toast/demo/index.vue @@ -39,6 +39,22 @@ + + + {{ $t('customIcon') }} + + + + {{ $t('customImage') }} + + + `倒计时 ${second} 秒`, longTextButton: '长文字提示' }, @@ -76,6 +94,8 @@ export default { longText: 'This is a long message, text will wrap when over a certain length', text2: 'Success', text3: 'Fail', + customIcon: 'Custom Icon', + customImage: 'Custom Image', text4: second => `${second} seconds`, longTextButton: 'Long Text' } @@ -94,6 +114,20 @@ export default { this.$toast.fail(this.$t('text3')); }, + showIconToast() { + this.$toast({ + message: this.$t('customIcon'), + icon: 'like-o' + }); + }, + + showImageToast() { + this.$toast({ + message: this.$t('customImage'), + icon: 'https://img.yzcdn.cn/vant/logo.png' + }); + }, + showCustomizedToast() { const toast = this.$toast.loading({ duration: 0, diff --git a/packages/toast/en-US.md b/packages/toast/en-US.md index e44cd90cf..d7c1cd304 100644 --- a/packages/toast/en-US.md +++ b/packages/toast/en-US.md @@ -32,6 +32,20 @@ Toast.success('Success'); Toast.fail('Fail'); ``` +### Custom Icon + +```js +Toast({ + text: 'Custom Icon', + icon: 'like-o' +}); + +Toast({ + text: 'Custom Image', + icon: 'https://img.yzcdn.cn/vant/logo.png' +}); +``` + ### Advanced Usage ```javascript @@ -102,6 +116,7 @@ toast2.clear(); | type | Can be set to `loading` `success` `fail` `html` | `String` | `text` | | position | Can be set to `top` `middle` `bottom` | `String` | `middle` | | message | Message | `String` | `''` | +| icon | Custom icon | `String` | - | | mask | Whether to show mask | `Boolean` | `false` | | forbidClick | Whether to forbid click background | `Boolean` | `false` | | loadingType | Loading icon type, can be set to `spinner` | `String` | `circular` | diff --git a/packages/toast/index.js b/packages/toast/index.js index e4a5cf79f..e301c6875 100644 --- a/packages/toast/index.js +++ b/packages/toast/index.js @@ -3,6 +3,7 @@ import VueToast from './Toast'; import { isObj, isServer } from '../utils'; const defaultOptions = { + icon: '', type: 'text', mask: false, value: true, diff --git a/packages/toast/index.less b/packages/toast/index.less index 6575f1a88..8393eafb7 100644 --- a/packages/toast/index.less +++ b/packages/toast/index.less @@ -11,8 +11,10 @@ box-sizing: content-box; // hack for avoid max-width when use left & fixed - width: fit-content; + width: @toast-default-width; max-width: @toast-max-width; + min-height: @toast-default-min-height; + padding: @toast-default-padding; color: @toast-text-color; font-size: @toast-font-size; line-height: @toast-line-height; @@ -34,25 +36,13 @@ } &--text { + width: fit-content; min-width: @toast-text-min-width; + min-height: unset; padding: @toast-text-padding; - } - - &--default { - width: @toast-default-width; - min-height: @toast-default-min-height; - padding: @toast-default-padding; - - .van-toast__icon { - font-size: @toast-icon-size; - } - - .van-loading { - margin: 10px 0; - } .van-toast__text { - padding-top: 5px; + margin-top: 0; } } @@ -64,4 +54,16 @@ top: auto; bottom: @toast-position-bottom-distance; } + + &__icon { + font-size: @toast-icon-size; + } + + &__loading { + padding: 5px; + } + + &__text { + margin-top: 10px; + } } diff --git a/packages/toast/test/__snapshots__/demo.spec.js.snap b/packages/toast/test/__snapshots__/demo.spec.js.snap index 9d01227ef..54a47a230 100644 --- a/packages/toast/test/__snapshots__/demo.spec.js.snap +++ b/packages/toast/test/__snapshots__/demo.spec.js.snap @@ -15,6 +15,11 @@ exports[`renders demo correctly 1`] = `
+
diff --git a/packages/toast/test/__snapshots__/index.spec.js.snap b/packages/toast/test/__snapshots__/index.spec.js.snap index 9e8e33d85..c26ce1e39 100644 --- a/packages/toast/test/__snapshots__/index.spec.js.snap +++ b/packages/toast/test/__snapshots__/index.spec.js.snap @@ -1,7 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`create a forbidClick toast 1`] = ` -