Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

体验新版 GitCode，发现更多精彩内容 >>

提交 c56e55cb 编写于 作者: D Drjnigfubo
1 浏览文件
操作

feat(toast): 增加标题属性，调整自定义位置

上级 deb1d0bf
隐藏空白更改
内联 并排
Showing with 97 addition and 69 deletion
src/packages/__VUE/toast/demo.vue
浏览文件 @ c56e55cb
<template>
<div class="demo">
<h2>基本用法</h2>
<nut-cell
title="Text 文字提示"
is-link
@click="textToast('网络失败，请稍后再试~')"
></nut-cell>
<nut-cell
title="Success 成功提示"
is-link
@click="successToast('成功提示')"
></nut-cell>
<nut-cell
title="Error 失败提示"
is-link
@click="errorToast('失败提示')"
></nut-cell>
<nut-cell
title="Warning 警告提示"
is-link
@click="warningToast('警告提示')"
></nut-cell>
<nut-cell
title="Loading 加载提示"
is-link
@click="loadingToast('加载中')"
></nut-cell>
<nut-cell title="Text 文字提示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
<nut-cell title="Title 标题展示" is-link @click="titleToast('网络失败，请稍后再试~')"></nut-cell>
<nut-cell title="Success 成功提示" is-link @click="successToast('成功提示')"></nut-cell>
<nut-cell title="Error 失败提示" is-link @click="errorToast('失败提示')"></nut-cell>
<nut-cell title="Warning 警告提示" is-link @click="warningToast('警告提示')"></nut-cell>
<nut-cell title="Loading 加载提示" is-link @click="loadingToast('加载中')"></nut-cell>
<h2>Toast不消失</h2>
<nut-cell
title="Toast 文字提示不消失"
is-link
@click="NoToast('Toast不消失~')"
></nut-cell>
<nut-cell title="Toast 文字提示不消失" is-link @click="NoToast('Toast不消失~')"></nut-cell>
<h2>Toast自定义距离底部高度</h2>
<nut-cell title="Toast 自定义底部高度" is-link @click="BottomToast('自定义距离~')"></nut-cell>
<h2>Loading带透明遮罩</h2>
<nut-cell
title="带文案+带透明遮罩+自动消失"
is-link
@click="NoLoading('加载中~')"
></nut-cell>
<nut-cell title="带文案+带透明遮罩+自动消失" is-link @click="NoLoading('加载中~')"></nut-cell>
</div>
</template>
......@@ -50,6 +25,11 @@ export default createDemo({
const textToast = (msg) => {
Toast.text(msg);
};
const titleToast = (msg) => {
Toast.text(msg, {
title: '标题文字'
});
};
const successToast = (msg) => {
Toast.success(msg);
};
......@@ -67,6 +47,12 @@ export default createDemo({
duration: 0
});
};
const BottomToast = (msg) => {
Toast.text(msg, {
center: false,
bottom: '10%'
});
};
const NoLoading = (msg) => {
Toast.loading(msg, {
cover: true
......@@ -74,12 +60,14 @@ export default createDemo({
};
return {
textToast,
titleToast,
successToast,
errorToast,
warningToast,
loadingToast,
NoToast,
NoLoading
NoLoading,
BottomToast
};
}
});
......
src/packages/__VUE/toast/doc.md
浏览文件 @ c56e55cb
......@@ -36,6 +36,9 @@ import { Toast } from '@nutui/nutui';
export default {
setup() {
Toast.text('网络失败，请稍后再试~');
Toast.text(msg,{
title:'标题文字'
});
return {};
},
};
......@@ -107,8 +110,9 @@ toast.hide();
| ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
| id | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number | - |
| duration | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失 | Number | 2000 |
| title | 标题 | String | '' |
| center | 是否展示在页面中部（为false时展示在底部） | Boolean | true |
| bottom | 距页面底部的距离（像素），option.center为false时生效 | Number | 30 |
| bottom | 距页面底部的距离（像素或者百分比），option.center为false时生效 | String | "30px" |
| textAlignCenter | 多行文案是否居中 | Boolean | true |
| bgColor | 背景颜色（透明度） | String | "rgba(0, 0, 0, 0.8)" |
| customClass | 自定义类名 | String | "" |
......
src/packages/__VUE/toast/doc.taro.md
浏览文件 @ c56e55cb
......@@ -18,6 +18,8 @@ app.use(Toast);
``` html
<nut-toast :msg="page.state.msg" v-model:visible="page.state.show" :type="page.state.type" @closed="page.methods.onClosed" :cover="page.state.cover" />
<nut-cell title="Text 文字提示" is-link @click="page.methods.openToast('text','网络失败，请稍后再试~')"></nut-cell>
<nut-cell title="Title 标题文字" is-link @click="page.methods.openToast('text', '网络失败，请稍后再试~',false,'标题文字')" ></nut-cell>
<nut-cell title="Text 自定义位置" is-link @click="page.methods.openToast('text', '自定义位置',false,'','20%',false)"></nut-cell>
<nut-cell title="Success 成功提示" is-link @click="page.methods.openToast('success','成功提示')"></nut-cell>
<nut-cell title="Error 失败提示" is-link @click="page.methods.openToast('fail','失败提示')"></nut-cell>
<nut-cell title="Warning 警告提示" is-link @click="page.methods.openToast('warn','警告提示')"></nut-cell>
......@@ -33,7 +35,10 @@ export default {
msg: 'toast',
type: 'text',
show: false,
cover: false
cover: false,
title:'',
bottom:'',
center:true,
}),
methods: {
openToast: (type: string, msg: string, cover: boolean = false) => {
......@@ -41,6 +46,9 @@ export default {
page.state.msg = msg;
page.state.type = type;
page.state.cover = cover;
page.state.title = title;
page.state.bottom = bottom;
page.state.center = center
},
onClosed: () => console.log('closed')
}
......@@ -70,8 +78,9 @@ export default {
|------------------------|-------------------------------------------------------------------------------|---------------|-------------------------------|
| msg | 消息文本内容,支持传入HTML | String/VNode | "" |
| duration | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0） | Number | 2000 |
| center | 是否展示在页面中部（为false时展示在底部） | Boolean | true |
| bottom | 距页面底部的距离（像素），center为false时生效 | Number | 30 |
| title | 标题 | String | '' |
| center | 是否展示在页面中部（为false时展示在底部） | Boolean | true |
| bottom | 距页面底部的距离（像素或者百分比），option.center为false时生效 | String | "30px" | | 距页面底部的距离（像素），center为false时生效 | Number | 30 |
| text-align-center | 多行文案是否居中 | Boolean | true |
| bg-color | 背景颜色（透明度） | String | "rgba(0, 0, 0, 0.8)" |
| custom-class | 自定义类名 | String | "" |
......
src/packages/__VUE/toast/index.scss
浏览文件 @ c56e55cb
......@@ -51,6 +51,12 @@
margin-bottom: -8px;
}
}
&-title {
font-size: 16px;
&:empty {
margin-bottom: -8px;
}
}
&-has-icon {
.nut-toast-icon-wrapper {
width: 100%;
......
src/packages/__VUE/toast/index.taro.vue
浏览文件 @ c56e55cb
......@@ -4,7 +4,7 @@
:class="toastBodyClass"
v-show="visible"
:style="{
bottom: center ? 'auto' : bottom + 'px',
bottom: center ? 'auto' : bottom,
'background-color': coverColor
}"
@click="clickCover"
......@@ -23,6 +23,9 @@
<view v-if="hasIcon" class="nut-toast-icon-wrapper">
<nut-icon size="20" color="#ffffff" :name="iconName"></nut-icon>
</view>
<div v-if="title" class="nut-toast-title">
{{ title }}
</div>
<view class="nut-toast-text" v-html="msg"></view>
</view>
</template>
......@@ -55,8 +58,8 @@ export default create({
},
customClass: String,
bottom: {
type: Number,
default: 30
type: String,
default: '30px'
},
size: {
type: [String, Number],
......@@ -86,6 +89,10 @@ export default create({
type: String,
default: 'rgba(0, 0, 0, 0)'
},
title: {
type: String,
default: ''
},
closeOnClickOverlay: {
type: Boolean,
default: false
......
src/packages/__VUE/toast/index.ts
浏览文件 @ c56e55cb
......@@ -6,8 +6,9 @@ const defaultOptions = {
duration: 2000, //显示时间(毫秒)
center: true, // 未实现
type: 'text',
title: '',
customClass: '', // 未实现
bottom: 30, // 未实现
bottom: '30px', // 未实现
size: 'base', // 未实现
icon: null, // 未实现
textAlignCenter: true, // 未实现
......
src/packages/__VUE/toast/index.vue
浏览文件 @ c56e55cb
......@@ -4,7 +4,7 @@
:class="toastBodyClass"
v-show="state.mounted"
:style="{
bottom: center ? 'auto' : bottom + 'px',
bottom: center ? 'auto' : bottom,
'background-color': coverColor
}"
@click="clickCover"
......@@ -19,6 +19,9 @@
<view v-if="hasIcon" class="nut-toast-icon-wrapper">
<nut-icon size="20" color="#ffffff" :name="icon"></nut-icon>
</view>
<div v-if="title" class="nut-toast-title">
{{ title }}
</div>
<view class="nut-toast-text" v-html="msg"></view>
</view>
</view>
......@@ -47,8 +50,8 @@ export default create({
type: String,
customClass: String,
bottom: {
type: Number,
default: 30
type: String,
default: '30px'
},
size: {
type: [String, Number],
......@@ -67,7 +70,6 @@ export default create({
type: String,
default: 'rgba(0, 0, 0, .8)'
},
onClose: Function,
unmount: Function,
cover: {
......@@ -78,6 +80,10 @@ export default create({
type: String,
default: 'rgba(0, 0, 0, 0)'
},
title: {
type: String,
default: ''
},
closeOnClickOverlay: {
type: Boolean,
default: false
......
src/sites/mobile-taro/vue/src/feedback/pages/toast/index.vue
浏览文件 @ c56e55cb
......@@ -7,32 +7,25 @@
:type="page.state.type"
@closed="page.methods.onClosed"
:cover="page.state.cover"
:title="page.state.title"
:bottom="page.state.bottom"
:center="page.state.center"
/>
<nut-cell title="Text 文字提示" is-link @click="page.methods.openToast('text', '网络失败，请稍后再试~')"></nut-cell>
<nut-cell
title="Text 文字提示"
title="Title 标题文字"
is-link
@click="page.methods.openToast('text', '网络失败，请稍后再试~')"
@click="page.methods.openToast('text', '网络失败，请稍后再试~', false, '标题文字')"
></nut-cell>
<nut-cell
title="Success 成功提示"
title="Text 自定义位置"
is-link
@click="page.methods.openToast('success', '成功提示')"
></nut-cell>
<nut-cell
title="Error 失败提示"
is-link
@click="page.methods.openToast('fail', '失败提示')"
></nut-cell>
<nut-cell
title="Warning 警告提示"
is-link
@click="page.methods.openToast('warn', '警告提示')"
></nut-cell>
<nut-cell
title="Loading 加载提示"
is-link
@click="page.methods.openToast('loading', '加载中')"
@click="page.methods.openToast('text', '自定义位置', false, '', '20%', false)"
></nut-cell>
<nut-cell title="Success 成功提示" is-link @click="page.methods.openToast('success', '成功提示')"></nut-cell>
<nut-cell title="Error 失败提示" is-link @click="page.methods.openToast('fail', '失败提示')"></nut-cell>
<nut-cell title="Warning 警告提示" is-link @click="page.methods.openToast('warn', '警告提示')"></nut-cell>
<nut-cell title="Loading 加载提示" is-link @click="page.methods.openToast('loading', '加载中')"></nut-cell>
<nut-cell
title="Loading 带白色背景遮罩"
is-link
......@@ -50,14 +43,28 @@ export default {
msg: 'toast',
type: 'text',
show: false,
cover: false
cover: false,
title: '',
bottom: '',
center: true
}),
methods: {
openToast: (type: string, msg: string, cover: boolean = false) => {
openToast: (
type: string,
msg: string,
cover: boolean = false,
title: string,
bottom: string,
center: boolean = true
) => {
page.state.show = true;
page.state.msg = msg;
page.state.type = type;
page.state.cover = cover;
page.state.title = title;
page.state.bottom = bottom;
page.state.center = center;
},
onClosed: () => console.log('closed')
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或