blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Toast): add type classNames (#4785)

Browse Source
This commit is contained in:
neverland 2019-10-19 16:45:34 +08:00 committed by GitHub
parent c0bc240bc8
commit ce8d04fc40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/toast/Toast.js
View File

@ -81,15 +81,12 @@ export default createComponent({
onAfterLeave() { onAfterLeave() {
this.$emit('closed'); this.$emit('closed');
} },
},
render() { genIcon() {
const { type, icon, message, iconPrefix, loadingType } = this; const { icon, type, iconPrefix, loadingType } = this;
const hasIcon = icon || (type === 'success' || type === 'fail');
const hasIcon = icon || (type === 'success' || type === 'fail');
function ToastIcon() {
if (hasIcon) { if (hasIcon) {
return <Icon class={bem('icon')} classPrefix={iconPrefix} name={icon || type} />; return <Icon class={bem('icon')} classPrefix={iconPrefix} name={icon || type} />;
} }
@ -97,9 +94,11 @@ export default createComponent({
if (type === 'loading') { if (type === 'loading') {
return <Loading class={bem('loading')} type={loadingType} />; return <Loading class={bem('loading')} type={loadingType} />;
} }
} },
genMessage() {
const { type, message } = this;
function Message() {
if (!isDef(message) || message === '') { if (!isDef(message) || message === '') {
return; return;
} }
@ -110,7 +109,9 @@ export default createComponent({
return <div class={bem('text')}>{message}</div>; return <div class={bem('text')}>{message}</div>;
} }
},
render() {
return ( return (
<transition <transition
name={this.transition} name={this.transition}
@ -119,14 +120,11 @@ export default createComponent({
> >
<div <div
vShow={this.value} vShow={this.value}
class={[ class={[bem([this.position, { [this.type]: !this.icon }]), this.className]}
bem([this.position, { text: !hasIcon && type !== 'loading' }]),
this.className
]}
onClick={this.onClick} onClick={this.onClick}
> >
{ToastIcon()} {this.genIcon()}
{Message()} {this.genMessage()}
</div> </div>
</transition> </transition>
); );

3
src/toast/index.less
View File

@ -35,7 +35,8 @@
} }
} }
&--text { &--text,
&--html {
width: fit-content; width: fit-content;
min-width: @toast-text-min-width; min-width: @toast-text-min-width;
min-height: unset; min-height: unset;

6
src/toast/test/__snapshots__/index.spec.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`create a forbidClick toast 1`] = ` exports[`create a forbidClick toast 1`] = `
<div class="van-toast van-toast--middle" style="z-index: 2001;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon"> <div class="van-toast van-toast--middle van-toast--success" style="z-index: 2001;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
<!----></i></div> <!----></i></div>
`; `;
@ -20,7 +20,7 @@ exports[`icon-prefix prop 1`] = `
`; `;
exports[`show html toast 1`] = ` exports[`show html toast 1`] = `
<div class="van-toast van-toast--middle van-toast--text" style="z-index: 2004;" name="van-fade"> <div class="van-toast van-toast--middle van-toast--html" style="z-index: 2004;" name="van-fade">
<div class="van-toast__text"> <div class="van-toast__text">
<div>Message</div> <div>Message</div>
</div> </div>
@ -28,7 +28,7 @@ exports[`show html toast 1`] = `
`; `;
exports[`show loading toast 1`] = ` exports[`show loading toast 1`] = `
<div class="van-toast van-toast--middle" style="z-index: 2003;" name="van-fade"> <div class="van-toast van-toast--middle van-toast--loading" style="z-index: 2003;" name="van-fade">
<div class="van-loading van-loading--circular van-toast__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular van-toast__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-toast__text">Message</div> <div class="van-toast__text">Message</div>
</div> </div>