vue 0 에서 메시지 알림 구성 요 소 를 실현 하 는 방법 에 대한 상세 한 설명
6453 단어 vue메시지 알림 구성 요소
vue 를 이용 하여 0 에서 메시지 알림 구성 요 소 를 실현 합 니 다.
평소에 우 리 는 element-ui,antd 등 UI 프레임 워 크 를 사용 하여 우리 에 게 편리 함 을 느 낀 적 이 있 을 것 이다.그러나 우리 의 수요 나 디자인 이 이런 프레임 에 내 장 된 차이 가 너무 커서 사용 하기 가 매우 어색 하 다 고 느 낄 때 스스로 바퀴 를 다시 만 들 필요 가 있다.
바퀴 를 다시 만 드 는 데 몇 가지 좋 은 점 이 있 습 니 다.1.모든 코드 는 당신 의 업무 에 서 비 스 를 제공 하 는 것 이 고 사용 할 수 없 는 것 이 많 지 않 습 니 다.2.코드 는 제3자 가 아니 라 스스로 유지 하고 유지 하기 편리 합 니 다.3.자신의 시 야 를 향상 시 키 고 더 높 은 각도 에서 문 제 를 볼 수 있 도록 한다.
자,그 건 더 이상 말 하지 말고 우리 의 구성 요소 개발 을 시작 합 시다!
파일 디 렉 터 리 구성 요소
일 을 잘 하려 면 먼저 그 기 구 를 이 롭 게 해 야 한다.하나의 구성 요소,좋 은 디 렉 터 리 구 조 를 실현 하려 면 직책 을 나 눌 수 있 고 서로 다른 모듈 이 서로 다른 논 리 를 처리 할 수 있다!
내 디 렉 터 리 결 과 는 다음 과 같다.
다음은 notification.vue,notify.js,index.js 세 파일 을 차례대로 소개 합 니 다.
notification.vue
notification.vue 는 메시지 알림 구성 요소 의 시각 적 표현 을 담당 하 며 논리 가 간단 합 니 다.
<template>
<transition name="fade" @after-enter="handleAfterEnter">
<div class="notification" :style="style" v-show="visible">
<span class="notification__content">
{{content}}
</span>
<span class="notification__btn" @click="handleClose">{{btn}}</span>
</div>
</transition>
</template>
<script>
export default {
name: 'Notification',
props: {
content: {
type: String,
required: true
},
btn: {
type: String,
default: ' '
}
}
}
</script>
<style lang="less" scoped>
.fade-enter-active, .fade-leave-active{
transition: opacity 1s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
.notification{
display: flex;
background-color: #303030;
color: rgba(255, 255, 255, 1);
align-items: center;
padding: 20px;
position: fixed;
min-width: 280px;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.3);
flex-wrap: wrap;
transition: all 0.3s;
&__content{
padding: 0;
}
&__btn{
color: #ff4081;
padding-left: 24px;
margin-left: auto;
cursor: pointer;
}
}
</style>
notify.jsnotify.js 는 메시지 알림 구성 요 소 를 처리 하 는 논리 적 인 부분 으로 그 주요 역할 은 notify 를 노출 하 는 방법 입 니 다.코드 는 다음 과 같 습 니 다:
import Vue from 'vue'
import Notification from './notification'
const NotificationConstructor = Vue.extend(Notification)
const instances = []
let seed = 1
const removeInstance = (instance) => {
if (!instance) return
const len = instances.length
const index = instances.findIndex(ins => instance.id === ins.id)
instances.splice(index, 1)
if (len <= 1) return
const removeHeight = instance.height
for (let i = index; i < len - 1; i++) {
instances[i].verticalOffset = parseInt(instances[i].verticalOffset) - removeHeight - 16
}
}
const notify = (options = {}) => {
if (Vue.prototype.$isServer) return
// vue
let instance = new NotificationConstructor({
propsData: options,
data() {
return {
verticalOffset: 0,
timer: null,
visible: false,
height: 0
}
},
computed: {
style() {
return {
position: 'fixed',
right: '20px',
bottom: `${this.verticalOffset}px`
}
}
},
mounted() {
this.createTimer()
this.$el.addEventListener('mouseenter', () => {
if (this.timer) {
this.clearTimer(this.timer)
}
})
this.$el.addEventListener('mouseleave', () => {
if (this.timer) {
this.clearTimer(this.timer)
}
this.createTimer()
})
},
updated() {
this.height = this.$el.offsetHeight
},
beforeDestroy() {
this.clearTimer()
},
methods: {
createTimer() {
this.timer = setTimeout(() => {
this.visible = false
document.body.removeChild(this.$el)
removeInstance(this)
this.$destroy()
}, options.timeout || 3000)
},
clearTimer() {
if (this.timer) {
clearTimeout(this.timer)
}
},
handleClose() {
this.visible = false
document.body.removeChild(this.$el)
removeInstance(this)
this.$destroy(true)
},
handleAfterEnter() {
// eslint-disable-next-line no-debugger
this.height = this.$el.offsetHeight
}
}
})
const id = `notification_${seed++}`
instance.id = id
// vue $el
instance = instance.$mount()
// $el dom
document.body.appendChild(instance.$el)
instance.visible = true
// eslint-disable-next-line no-unused-vars
let verticalOffset = 0
instances.forEach(item => {
verticalOffset += item.$el.offsetHeight + 16
})
verticalOffset += 16
instance.verticalOffset = verticalOffset
instances.push(instance)
return instance
}
export default notify
index.jsindex.js 는 주로 notification.vue 구성 요 소 를 등록 하고 notify 방법 으로 마 운 트 합 니 다.코드 는 다음 과 같 습 니 다:
import Notification from './notification'
import notify from './notify'
export default (Vue) => {
Vue.component(Notification.name, Notification)
Vue.prototype.$notify = notify
}
main.js 에 도입
import Notification from './components/notification'
Vue.use(Notification)
쓰다
this.$notify({
content: 'Hello'
})
효과.본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.