vue 구성 요소 의 Alert 구현 코드

2224 단어 vueAlert
머리말
본 고 는 주로 Alert 구성 요소 의 대략적인 프레임 워 크 로 소량의 설정 가능 한 옵션 을 제공 합 니 다.대체로 사고방식 을 제공 하 는 데 목적 을 두다
Alert

페이지 에 중요 한 알림 정 보 를 보 여 줍 니 다.
templat 템 플 릿 구조

<template>
 <div v-show="visible" class="Alert">
  <i v-show="closable" class="iconhandle close" @click="close">&#xe609;</i>
  <slot></slot>
 </div>
</template>
대체 구조 alert 상자,icon 아이콘,slot 플러그 인(다른 스타일 색상 옵션...)
애니메이션 이 필요 하 다 면 외부 패키지 에 Vue 에 구성 요소 transition 을 내장 할 수 있 습 니 다.

<transition name="alert-fade">
</transition>
script

export default {
 name: 'Alert',

 props: {
  closable: {
   type: Boolean,
   default: true
  },
  show: {
   type: Boolean,
   default: true,
   twoWay: true
  },
  type: {
   type: String,
   default: 'info'
  }
 },
 data() {
  return {
   visible: this.show
  };
 },
 methods: {
  close() {
   this.visible = false;
   this.$emit('update:show', false);
   this.$emit('close');
  }
 }
};
name:구성 요소 의 이름props:속성방법:방법클릭 하여 닫 기 2 개 이벤트 외부 노출
쓰다

import Alert from './Alert.vue'

Alert.install = function(Vue){
  Vue.component('Alert', Alert);
}
export default Alert


<Alert :closable="false">
          alert
</Alert>
<Alert>
          alert
</Alert>
Attribute
매개 변수
설명 하 다.
유형
선택 값
기본 값
closable
닫 을 수 있 는 지 여부
boolean
―
true
show
표시 할 지 여부
boolean
―
true
Event
이벤트 이름
설명 하 다.
리 턴 매개 변수
update:show
닫 을 때 터치,false 표시 여부
false
close
닫 을 때 터치
―
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Node 자동화 배치 방법
Bootstrap 그림 윤 방 효과 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage