Vue 3 메시지 메시지 구성 요소 예제 구현

대부분의 웹 제품 에서 전체적인 Message 구성 요 소 는 비교적 큰 사용 장면 을 차지 하고 사용자 에 게 피드백,정보 알림 과 시스템 과 의 대화 장면 에 자주 나타난다.전통 적 인 구성 요소 작성 법 을 사용 하려 면 구성 요 소 를 도입 하여 components 에 등록 한 다음 템 플 릿 에서 태그 로 호출 하여 사용자 정의 props 속성 을 입력 하고 emit 를 통 해 이 벤트 를 촉발 해 야 합 니 다.이러한 구성 요 소 는 다음 과 같은 단점 이 있 습 니 다.

빈번하게 도입 하고 등록 해 야 한다

템 플 릿 에서 태그 형식 으로 구성 요 소 를 사용 해 야 합 니 다

추가 적 인 매개 변수 제어 구성 요소 의 속성 과 상태

가 필요 합 니 다.

사용자 정의 구성 요소 의 마 운 트 위 치 를 우호 적 으로 정의 할 수 없 으 며 다른 구성 요소 에 영향 을 줄 수 있 습 니 다

따라서 Message 와 같은 구성 요소 에 대해 서 는 자바 스 크 립 트 에서 호출 할 수 있 기 를 바 랍 니 다.사용자 정의 매개 변수 제어 구성 요소 상 태 를 입력 할 수 있 고 호출 할 때 body 끝 에 구성 요 소 를 수 동 으로 마 운 트 하지 않 아 도 됩 니 다.만약 에 주류 제3자 라 이브 러 리,예 를 들 어 Element UI plus 나 Ant Design for Vue 를 사용 한 적 이 있다 면 그들의 메시지 구성 요소 API 를 잘 알 고 있 을 것 입 니 다.다음은 Vue 3 으로 전체적인 Message 구성 요 소 를 실현 하 겠 습 니 다.
구성 요소 최종 구현 효과

구성 요소 설계
최종 구성 요소 API 정의
간단 한 Message 메시지 구성 요 소 를 실현 합 니 다.형식 API 는 텍스트(text),성공(success),실패(error)가 있 습 니 다.즉,텍스트 를 직접 전송 하 는 것 도 지원 하고 구성 요 소 를 통 해 구체 적 인 option 설정 을 지원 합 니 다.메시지 내용 을 정의 하고 닫 기 지연,닫 기 단 추 를 보 여 주 는 지 여부 등 기능 을 지원 합 니 다.

// Message   （type）：  、  、  
["text", "success", "error"]

// Message   （option）
[String]:     
[Object]:     

// option   
text [String] ""     
duration [Number] 0          ，0      
close [Boolean] false         

//     
Message[type](option);

호출 예시

Message.text("        ");
Message.error({
    text: "    ，     ",
    duration: 3000,
    close: true
});

구성 요소 구조 정의
Message 폴 더 저장 구성 요소 의 전체 구 조 를 만 듭 니 다.src 에는 구성 요소 의 템 플 릿,스타일,인 스 턴 스 파일 이 포함 되 어 있 습 니 다.같은 단계 에서 index.js 를 만 들 면 프로젝트 와 업무 구성 요소 에 전체 구성 요 소 를 노출 시 킵 니 다.

|--- Message
 |--- src
 | |--- Message.vue //     
 | |--- Message.less //         
 | |--- Message.js //            
 | |--- Instance.js //     
 |---index.js //     

템 플 릿 과 스타일
템 플 릿 템 플 릿
템 플 릿 은 상대 적 으로 간단 합 니 다.바깥쪽 은 애니메이션 구성 요소 로 감 싸 고 v-show 를 통 해 메시지 표시 와 닫 기 를 제어 합 니 다.내용 부분 은 아이콘,메시지 텍스트,그리고 설정 가능 한 수 동 닫 기 단 추 를 포함 합 니 다.

<template>
  <!--      -->
  <transition name="slide-fade">
    <div class="message-container" v-show="visibled">
      <!--    -->
      <div class="message-content">

        <!--       ，        ，text        -->
        <div class="message-icon" v-if="config.icon">
          <i :class="config.icon"></i>
        </div>

  <!--      -->
        <span v-text="config.content"></span>

        <!--        -->
        <div class="option" v-if="!config.close">
          <i class="ri-close-fill" @click="onClose"></i>
        </div>

      </div>
    </div>
  </transition>
</template>

메시지 아이콘
주의해 야 할 것 은 아이콘 은 호출 API 의 형식 으로 확 정 됩 니 다.인 스 턴 스 를 만 들 때 아이콘 형식 을 확인 합 니 다.여 기 는 원본 아이콘 라 이브 러 리 Remix Icon 을 참조 합 니 다.구체 적 인 인용 방법 은 더 이상 설명 하지 않 습 니 다.주소:remixicon.cn/
양식
Message.less 에서 스타일 과 애니메이션 을 정의 합 니 다.

@radius: 4px;
@normalHeight: 34px;

.message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  z-index: 9999;
  transform: translateZ(9999px);
  padding-top: 28px;
  transition: top .4s ease;

  .message-container {
    margin-bottom: 14px;

    .message-icon {
      display: inline-block;

      i {
        font-size: 18px;
        font-weight: 400;
        margin-top: -3px;
        margin-right: 6px;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
      }

      .ri-checkbox-circle-fill {
        color: #58c05b;
      }

      .ri-close-circle-fill {
        color: #fd4f4d;
      }

    .message-content {
      display: inline-block;
      padding: 4px 18px;
      height: @normalHeight;
      text-align: left;
      line-height: @normalHeight;
      font-size: 14px;
      font-weight: 400;
      border-radius: @radius;
      color: #595959;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
      background: #ffffff;

      .option {
        display: inline-block;
        pointer-events: all;
        margin-left: 18px;

        i {
          font-size: 18px;
          font-weight: 400;
          margin-top: -3px;
          display: inline-block;
          box-sizing: border-box;
          vertical-align: middle;
          cursor: pointer;
          color: #d9d9d9;
          transition: color 0.2s ease;

          &:hover {
            color: #ff7c75;
            transition: color 0.2s ease;
          }
        }
      }
    }
  }

  .slide-fade-enter-active {
    transition: all .2s ease-out;
  }

  .slide-fade-leave-active {
    transition: all .2s ease;
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

구성 요소 스 크 립 트
구성 요소 에서 들 어 오 는 config 설정 과 reove 를 가 져 와 렌 더 링 과 마 운 트 취 소 를 실현 합 니 다.onOpen 과 onClose 방법 으로 메시지 가 열 리 고 수 동 으로 닫 히 는 것 을 제어 합 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

<script>
import { reactive, toRefs } from "vue";
export default {
  props: {
    config: { type: Object, default: () => {} }, //      
    remove: { type: Function, default: () => {} }, //       
  },
  setup(props) {
    const state = reactive({
      visibled: false,
    })

    //     
    const onOpen = (config) => {
      setTimeout(() => {
        state.visibled = true;
      }, 10)

      //          
      if (config.duration !== 0) {
        setTimeout(() => {
          onClose();
        }, config.duration);
      }
    }

    onOpen(props.config)

    //     
    const onClose = () => {
      state.visibled = false;
      setTimeout(() => {
        props.remove()
      }, 200)
    };

    return {
      ...toRefs(state),
      onOpen,
      onClose,
    };
  },
};
</script>

구성 요소 인 스 턴 스 생 성
다음은 Instance.js 에서 구성 요소 호출 을 작성 할 때 구성 요소 등 API 를 만 들 고 마 운 트 하 며 삭제 합 니 다.머리 에 Vue 의 생 성 인 스 턴 스 방법 과 위 에 적 힌 구성 요소 템 플 릿 을 도입 합 니 다.

import { createApp } from 'vue'
import Message from './Message.vue'

인 스 턴 스 작업 방법 을 설명 하고 메시지 설정 매개 변수 cfg 를 받 습 니 다.

/**
 * Message     
 * @param {Object} cfg     
 */
const createInstance = cfg => {
 const config = cfg || {}
 // 1、      ，       Class   、    

 // 2、         body
 
 // 3、        ，          
}
export default createInstance

1.패키지 용 기 를 만 들 고 외부 클래스 속성 을 설정 합 니 다.
외부 용기 패키지 구성 요소 로 DIV 를 만 들 고 대응 하 는 class 속성 을 설정 합 니 다.

let messageNode = document.createElement('div')
let attr = document.createAttribute("class")
attr.value = "message"
messageNode.setAttributeNode(attr)

메시지 개수,메시지 상자 의 높이 를 54 px 로 정의 합 니 다.여러 메시지 가 줄 을 서서 열 릴 때 top 값 을 설정 하여 각 구성 요 소 를 엇 갈 리 게 합 니 다.

const height = 54 //        

const messageList = document.getElementsByClassName('message')
messageNode.style.top = `${messageList.length * height}px`

2.인 스 턴 스 를 만 들 고 body 에 마 운 트 하기

const app = createApp(Message, {
  config,
  remove() {
    handleRemove()//     ，       Dom         
  }
})

//          body   
app.vm = app.mount(messageNode)
document.body.appendChild(messageNode)

app.close = () => {
  handleRemove()
}

return app

3.마 운 트 를 취소 하고 top 값 을 다시 설정 하 는 방법 을 정의 합 니 다.

const handleRemove = ()=>{
  app.unmount(messageNode)
  document.body.removeChild(messageNode)
  resetMsgTop()
 }

const resetMsgTop = () => {
  for (let i = 0; i < messageList.length; i++) {
    messageList[i].style.top = `${i * height}px`
  }
}

렌 더 링 인 스 턴 스 API 구현
Message.js 를 통 해 설정 을 읽 고 렌 더 링 합 니 다.

import createInstance from './Instance.js'

/**
 *         Message
 * @param {Object} typeCfg     
 * @param {Object/String} cfg      
 */
function renderMsg(typeCfg = {}, cfg = '') {
  //           ，         cfg   
  const isContent = typeof cfg === 'string'

  //        
  cfg = isContent ? {
    content: cfg
  } : cfg

  const config = Object.assign({}, typeCfg, cfg) //     

  const {
    type = 'text', //     
    content = '', //     
    duration = 3000, //         
    close = false //         
  } = config

  //     
  return createInstance({
    type,
    content,
    duration,
    close
  })
}

text,success,error 등 API 를 노출 합 니 다.

export default {
  //      
  text(cfg = "") {
    const textCfg = {
      type: "text",
      icon: ''
    }

    return renderMsg(textCfg, cfg);
  },
  //     
  success(cfg = "") {
    const successCfg = {
      type: "success",
      icon: 'ri-checkbox-circle-fill'
    }

    return renderMsg(successCfg, cfg);
  },
  //     
  error(cfg = "") {
    const errorCfg = {
      type: "error",
      icon: 'ri-close-circle-fill'
    }

    return renderMsg(errorCfg, cfg);
  },
}

마지막 으로 호출 할 수 있 도록 가장 바깥쪽 index.js 에서 이 구성 요 소 를 엽 니 다.

import Message from './src/Message.js';

export default Message;

Vue 3 구현 Message 메시지 구성 요소 예제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 3 Message 메시지 구성 요소 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!