What virtue does the design drawing get?
What did YY in my mind
We can see from the design drawings that there are two kinds of toast at present. When packaging components, we should consider that other styles of components may be added later, so we should try to be extensible when designing
- There must be a type attribute, which controls which type of component is displayed
- There must be a text attribute, which can be used to pass in different copybooks
- There must be a timeout attribute. How many MS components will disappear after being passed in through the attribute
Your pants are off. It’s time to get to the point. Go to the code
<template>
<transition name="fade">
<div class="toastWrap" v-if="isShow" v-cloak>
<div class="toast-content no-wrap">
//Use the type passed in to tell the component which subcomponent to use
<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: 'submitting',
required: false
}
},
data: function() {
return {
isShow: true,
textinfo: '',
}
},
mounted: function() {
this.showToast()
},
methods: {
getType() {
return this.type
},
/**
*If passed through an external parameter, the external parameter is displayed; otherwise, the default parameter is displayed
* @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
//Release news
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>What other improvements?
The icon of toasticon sub component is not dynamically set. If the toast of other icons is designed later, the attribute can be proposed and passed through parameters
NPM release
Before releasing the package, you must first have an NPM account
Enter NPM addUser in the terminal, prompt for account, password and email, and then prompt for successful creation
Then, execute NPM init to generate package json
NPM publish // issue the command