vue 튜 토리 얼 의 toast 탄 상자 전역 호출 예제 상세 설명
1.toast.vue 템 플 릿 파일 새로 만 들 기:
<template>
<transition :name="fadeIn">
<div class="alertBox" v-show="show">
<div class="alert-mask" v-show="isShowMask"></div>
<transition :name="translate">
<div class="box" :class="position" v-show="show">
{{text}}
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
}
},
props: {
show: { // toast
default: false
},
text: { //
default: 'loading'
},
position: { //
default: 'center'
},
isShowMask: { //
default: false
},
time: { //
default: 1500
},
transition: { //
default: true
}
},
mounted() { //
setTimeout(() => {
this.show = false
}, this.time)
},
computed: {
translate() { // props,
if (!this.transition) {
return ''
} else {
if (this.position === 'top') {
return 'translate-top'
} else if (this.position === 'middle') {
return 'translate-middle'
} else if (this.position === 'bottom') {
return 'translate-bottom'
}
}
},
fadeIn() { //
if (!this.transition) {
return ''
} else {
return 'fadeIn'
}
}
}
}
</script>
<style>
.box{
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background: rgba(0,0,0,.5);
text-align: center;
line-height: 100px;
color: #fff;
font-size: 16px;
z-index: 5000;
color: #fff;
}
.box.top{
top: 50px;
margin-top: 0;
}
.box.center{
top: 50%;
margin-top: -100px;
}
.box.bottom{
top: auto;
bottom: 50px;
margin-top: 0;
}
.alert-mask{
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.5);
z-index: 4999;
}
.fadeIn-enter-active, .fadeIn-leave-active{
transition: opacity .3s;
}
.fadeIn-enter, .fadeIn-leave-active{
opacity: 0;
}
.translate-top-enter-active, .translate-top-leave-active{
transition: all 0.3s cubic-bezier(.36,.66,.04,1);
}
.translate-top-enter, .translate-top-leave-active{
transform: translateY(-50%);
opacity: 0;
}
.translate-middle-enter-active, .translate-middle-leave-active{
transition: all 0.3s cubic-bezier(.36,.66,.04,1);
}
.translate-middle-enter, .translate-middle-leave-active{
transform: translateY(80%);
opacity: 0;
}
.translate-bottom-enter-active, .translate-bottom-leave-active{
transition: all 0.3s cubic-bezier(.36,.66,.04,1);
}
.translate-bottom-enter, .translate-bottom-leave-active{
transform: translateY(100%);
opacity: 0;
}
</style>
2.주 논 리 는 toast.js 에서 완성:
var Alert = require('./index.vue') // vue
var Toast = {} //
Toast.install = function (Vue, options) { // vue install , vue
// toast ,
if(document.getElementsByClassName('alertBox').length){
return
}
let toastTpl = Vue.extend(Alert) // vue
// el: DOM Vue 。 css , HTMLElement 。
// , $vm.$el 。
// , 。 , vm.$mount() ( )
// 。 vue dom 。 (html, body)
// let $vm = new toastTpl({
// el: document.createElement('div')
// })
let $vm = new toastTpl() // vue
// $mount 。 $el , body
let tpl = $vm.$mount().$el
document.body.appendChild(tpl)
Vue.prototype.$toast = { // Vue ,
show(options) { // toast
if (typeof options === 'string') { //
$vm.text = options // props
}
else if (typeof options === 'object') {
Object.assign($vm, options) //
}
$vm.show = true // toast
},
hide() { // toast
$vm.show = false
}
}
}
export default Toast; // Toast( : module exports , , require , module exports , )
사용:vue 프로젝트 의 주 파일 에 플러그 인 을 도입 하고 설치 합 니 다.
이렇게 하면 프로젝트 의 모든 구성 요소 에서 이 toast 의 팝 업 창 플러그 인 을 사용 할 수 있 습 니 다.
더 높 은 플러그 인 학습 소스 코드 를 원 하 시 면 이동 하 십시오vux 원본 학습
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.