Vue 패키지 전역 toast 구성 요소 의 전체 인 스 턴 스

6155 단어 vue포장 하 다toast 구성 요소
머리말
최근 에 Vue 를 체험 해 보 았 습 니 다.Toast 는 모두 전단 에서 자주 사용 하 는 구성 요소 입 니 다.본 고 는 Vue 가 전체 toast 구성 요 소 를 밀봉 하 는 과정 을 상세 하 게 소개 하 였 습 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 해 보 겠 습 니 다.
vue-cli 의 도움 을 빌리다
1.Toast 구성 요소 정의

// components/Toast

<template>
  <transition name="fade">
    <div v-show="visible">{{message}}</div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      message: ''
    }
  }
}
</script>

<style scoped>
div {
  position: fixed;
  top: 30%;
  left: 50%;
  padding: 5px 20px;
  color: #fff;
  background-color: #424242;
  border-radius: 5px;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* vue         */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
2.main.js 에 설정

import Vue from 'vue'
import App from './App.vue'
import Toast from './components/Toast'

//       
const ToastObj = {
  install: function (Vue) {
    //     Vue “  ”  
    const ToastConstructor = Vue.extend(Toast)
    //           ,         
    const instance = new ToastConstructor()
    console.log(instance)
    //                 ,            
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    //  Vue         ，    
    Vue.prototype.$toast = (msg, duration = 1500) => {
      instance.message = msg
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
      }, duration)
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
3.다른 구성 요소 에서 사용

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      msg: 'HelloWord'
    }
  },
  mounted () {
  	//    toast   
    this.$toast('      ')
  }
}
</script>
2.vue-cli 의 도움 을 받 지 않 습 니 다.
 vue-cli 를 통 해 구성 요소 의 가 져 오기 내 보 내기 가 편리 하지만 구축 도 구 를 이용 하지 않 은 상태 에서 다른 방법 을 사용 해 야 합 니 다.
1.toast 구성 요소 등록

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/vue/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <my-button></my-button>
  </div>
  <div id="toast"></div>
  <script>
    //    toast     
    const Toast = Vue.component('toast', {
      data() {
        return {
          isShow: false,
          message: '    ',
          wrapperStyle: {
            position: 'fixed',
            top: '20%',
            left: '50%',
            zIndex: 10000,
            padding: '6px 12px',
            backgroundColor: '#424242',
            borderRadius: '5px',
            transform: 'translate(-50%, -50%)'
          },
          textStyle: {
            color: '#fff',
            fontSize: '14px'
          }
        }
      },
      template: `<div v-show="isShow" :style="wrapperStyle">
                  <span :style="textStyle">{{ message }}</span>
                </div>`
    })
2.toast 플러그 인 등록

//       
const ToastObj = {
  install: function (Vue) {
    //      toast     ,         
    const instance = new Toast()
    //         DOM 
    instance.$mount('#toast')

    //  Vue         ，    
    Vue.prototype.$toast = ({message, duration = 2000} = {}) => {
      instance.message = message
      instance.isShow = true

      setTimeout(() => {
        instance.isShow = false
      }, duration)
    }
  }
}
//    toast   
Vue.use(ToastObj)
3.다른 구성 요소 에서 사용

    Vue.component('my-button', {
      data() {
        return {
          wrapperStyle: {
            width: '70px',
            padding: '20px',
            backgroundColor: 'green'
          },
          textStyle: {
            color: '#fff',
            fontSize: '16px'
          }
        }
      },
      methods: {
        handleClick() {
          this.$toast({
            message: '    '
          })
        }
      },
      template: `<div :style="wrapperStyle" @click="handleClick">
                  <span :style="textStyle">    </span>
                </div>`
    })

    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>
총결산
Vue 패 키 징 전역 toast 구성 요소 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 패 키 징 전역 toast 구성 요소 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!
JavaScript 의 AOP 프로 그래 밍 기본 구현
웹 팩-dev-server 로 컬 서버 구축 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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