拿到的设想图长啥品德?
我脑海里YY到了哪些内容
我们拿到设想图能够看到,现在是两种toast,我们在封装组件的时刻要斟酌背面有能够增添其他款式的组件,所以我们在设想的时刻,只管要有拓展性
- 肯定要有type属性,根据type属性掌握显现哪一种范例的组件
- 肯定要有text属性,经由过程属性传入差别的案牍
- 肯定要有timeout属性,经由过程属性传入,若干ms组件消逝
裤子都脱了,该进入正题了,上代码
<template>
<transition name="fade">
<div class="toastWrap" v-if="isShow" v-cloak>
<div class="toast-content no-wrap">
// 运用传入的type来通知组件运用哪个子组件
<component :is="getType()" :text="textinfo"></component>
</div>
</div>
</transition>
</template>
<script>
const toastText = {
props: ['text'],
template: `<div class="text" v-text="text"></div>`
}
const toastIcon = {
props: ['text'],
template: `<div class="icon-wrap"><div class="icon-img"></div><div class="icon-text" v-text="text"></div></div>`
}
export default {
props: {
show: {
type: Boolean,
default: true,
required: false
},
type: {
type: String,
default: 'toastText', //toastText,toastIcon
required: false
},
timeout: {
type: Number,
default: 1600,
required: false
},
text: {
type: String,
default: '正在提交',
required: false
}
},
data: function() {
return {
isShow: true,
textinfo: '',
}
},
mounted: function() {
this.showToast()
},
methods: {
getType() {
return this.type
},
/**
* 假如经由过程外部参数通报,则显现外部参数,不然显现默许参数
* @param text
* @param timeout
* @returns {Promise}
*/
showToast(text = this.text, timeout = this.timeout) {
this.textinfo = text
return new Promise((reslove,reject) => {
setTimeout(() => {
this.isShow = false
// 宣布音讯
this.$emit('toast-cb')
reslove()
}, timeout)
})
}
},
components: {
toastText,
toastIcon
},
}
</script>
<style lang="css">
.fade-enter-active,.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,.fade-leave-to {
opacity: 0;
}
.toastWrap {
position: fixed;
width: 100%;
height: 100%;
z-index: 100;
}
.toastWrap .toast-content {
border-radius: 7px;
background: rgba(0,0,0,0.7);
padding: 15px 10px;
color: #fff;
font-size: 14px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.icon-wrap {
text-align: center;
font-size: 14px;
}
.icon-img {
width: 30px;
height: 30px;
line-height: 30px;
margin: auto auto 5px;
background: url('./img/icon-loading.png') center no-repeat;
background-size: 80%;
animation: myrotate 0.8s infinite linear;
}
.icon-text {
white-space: nowrap;
}
.no-wrap {
white-space: nowrap;
}
@-moz-keyframes myrotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes myrotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes myrotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes myrotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
另有哪些改良?
toastIcon子组件的icon没有经由过程动态设置,背面假如设想出其他的icon的toast时,可把属性提出来,经由过程参数通报
Npm宣布
宣布包之前你起首要有一个npm的账号
在终端输入npm adduser,提醒输入账号,暗码和邮箱,然后将提醒建立胜利
然后,实行npm init,天生package.json
npm publish //宣布命令