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

3
src/toast/index.less
View File

@ -35,7 +35,8 @@
}
}
&--text {
&--text,
&--html {
width: fit-content;
min-width: @toast-text-min-width;
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
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>
`;
@ -20,7 +20,7 @@ exports[`icon-prefix prop 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>Message</div>
</div>
@ -28,7 +28,7 @@ exports[`show html 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-toast__text">Message</div>
</div>