<template>
<div class="demo-list">
<lc-title title="提示"></lc-title>
<category title="基本用法"></category>
<div>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="textToast1('我只传了文案一个参数')"
>
<span slot="title">
<label>文字提示</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="
textToast2('我传了文案和显示时长两个参数，多行文字默认居中展示', 5000)
"
>
<span slot="title">
<label>长文字提示</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="sucToast('操作成功')"
>
<span slot="title">
<label>成功提示</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="failToast('操作失败')"
>
<span slot="title">
<label>失败提示</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="warnToast('操作警告')"
>
<span slot="title">
<label>警告提示</label>
</span>
</lc-cell>
</div>
<category title="加载提示"></category>
<div>
<lc-cell :showIcon="true" :isLink="true" @click.native="showLoading()">
<span slot="title">
<label>Loading</label>
</span>
<span slot="desc">带文案+带透明遮罩（默认）+自动消失</span>
</lc-cell>
<lc-cell :showIcon="true" :isLink="true" @click.native="showLoading2()">
<span slot="title">
<label>Loading</label>
</span>
<span slot="desc">带文案+带半透明遮罩+自动消失</span>
</lc-cell>
<lc-cell :showIcon="true" :isLink="true" @click.native="showLoading3()">
<span slot="title">
<label>Loading</label>
</span>
<span slot="desc">不自动消失+不带遮罩</span>
</lc-cell>
<lc-cell :showIcon="true" :isLink="true" @click.native="hideLoading()">
<span slot="title">
<label>隐藏Loading</label>
</span>
<span slot="desc">点击手动隐藏上面的Loading</span>
</lc-cell>
</div>
<category title="自定义样式"></category>
<div>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="cusBgToast('我修改了背景色和透明度')"
>
<span slot="title">
<label>自定义背景色和透明度</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="cusClassToast('我有一个名为 my-class 自定义class')"
>
<span slot="title">
<label>自定义class</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="cusIconToast('自定义Icon')"
>
<span slot="title">
<label>自定义Icon</label>
</span>
</lc-cell>
</div>
<category title="共享实例"></category>
<div>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="idToast1('我设置了id为123')"
>
<span slot="title">
<label>我设置了id为123</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="idToast2('我设置了id为321')"
>
<span slot="title">
<label>我设置了id为321</label>
</span>
</lc-cell>
</div>
<category title="更改默认配置"></category>
<div>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="setDefaultOptions()"
>
<span slot="title">
<label>将所有Toast提示展示时长设置为5000毫秒</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="resetDefaultOptions()"
>
<span slot="title">
<label>恢复所有Toast提示默认配置</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="setDefaultOptions2()"
>
<span slot="title">
<label>更改文字提示默认配置</label>
</span>
</lc-cell>
<lc-cell
:showIcon="true"
:isLink="true"
@click.native="resetDefaultOptions2()"
>
<span slot="title">
<label>恢复文字提示默认配置</label>
</span>
</lc-cell>
</div>
</div>
</template>
<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
components: { LcTitle, Category },
data() {
return {};
},
methods: {
textToast1(msg) {
this.$toast.text(msg);
},
textToast2(msg, duration) {
this.$toast.text(msg, { duration });
},
sucToast(msg) {
this.$toast.success(msg, { duration: 3000 });
},
failToast(msg) {
this.$toast.fail(msg);
},
warnToast(msg) {
this.$toast.warn(msg);
},
showLoading() {
this.hideLoading();
this.$toast.loading("加载中...", {
duration: 3000
});
},
showLoading2() {
this.hideLoading();
this.$toast.loading("加载中...", {
duration: 3000,
coverColor: "rgba(0,0,0,0.5)",
closeOnClickOverlay: true
});
},
showLoading3() {
if (this.loading) return;
this.loading = this.$toast.loading("", {
cover: false
});
},
hideLoading() {
this.loading && this.loading.hide();
this.loading = null;
},
cusBgToast(msg) {
this.$toast.text(msg, {
bgColor: "rgba(50, 50, 50, 0.6)"
});
},
cusClassToast(msg) {
this.$toast.text(msg, { customClass: "my-class" });
},
cusIconToast(msg) {
this.$toast.text(msg, {
icon:
"https://img13.360buyimg.com/imagetools/jfs/t1/98294/28/14470/22072/5e65ba08E865683aa/ded7441bdd098511.png",
duration: 3000
});
},
idToast1(msg) {
this.$toast.success(msg, { id: 123 });
},
idToast2(msg) {
this.$toast.text(msg, { id: 321, duration: 4000 });
},
setDefaultOptions() {
this.$toast.setDefaultOptions({
duration: 5000,
coverColor: "rgba(0, 0, 0, 0.2)",
closeOnClickOverlay: true,
cover: true
});
this.$toast.text(
"将所有Toast提示展示时长设置为5000毫秒，并且点击遮罩层可关闭提示"
);
},
resetDefaultOptions() {
this.$toast.resetDefaultOptions();
this.$toast.text("恢复所有Toast提示默认配置");
},
setDefaultOptions2() {
this.$toast.setDefaultOptions("text", {
size: "large",
cover: true,
coverColor: "rgba(0, 0, 0, 0.2)",
duration: 4000,
closeOnClickOverlay: true
});
this.$toast.text(
"设置文字提示默认配置为：大小设置为large，遮罩层透明度0.2，展示4秒"
);
},
resetDefaultOptions2() {
this.$toast.resetDefaultOptions("text");
this.$toast.text("文字提示默认配置已恢复");
}
}
};
</script>
<style lang="less" scoped>
p{ line-height: 26px; padding:10px; font-size: 14px;}
</style>
|
