This is the 18th day of my participation in the August Challenge

Three basic pieces

We have already written about the Modal pop-up component, the Notice component, and the Message component in this chapter, which basically covers the main ways of information feedback.

A Modal cartridge is similar to the function of the Alert method, and a Notice Message is similar to the function of an in-app notification. So what is the function of the Message component?

Let’s take a look at the demo.

The image is not complete, but you can see it as a message at the top of the middle of the page, the equivalent of a light message on the phone.

The role of the PC end is to prompt a message that is dispensable, to do an information feedback. After all, important news needs to be visible.

Structure, structure, or ** structure.

However, compared to the first two components, the structure of this component is much simpler. After all, it is all about show, hide, icon, and content.

block content
transition(
  name="slideY-fade" 
  @after-leave="afterLeave" 
  appear)
    div.yx-message( v-show="isShow" )
      span
        yx-icnos(:type="iconType[icon]") {{content}}
Copy the code

So that’s the structure. Transition is going in and out. An icon is then displayed, along with a presentation section of the content.

The style is also relatively simple, I believe that my partner is OK.

Logic is the core

Logic is the core, but the logical part of this component is really not that much, as there is no interaction, and there is no support for premature shutdown.

So just one, just turn off the animation.

if (duration > 0) {
 setTimeout(close, duration * 1000)
}

const close = () => {
  isShow.value = false
}
Copy the code

If necessary, you can refer to the previous Notice information component to add a function that stops the countdown when the mouse is over, i.e. does not exit automatically.

In this way, you can let part of the user a buffer time to see clear information content.

Change in the method can also refer to the previous.

I don’t want to repeat myself here.