Vue.js+Nuxt 기반 사용자 정의 팝 업 구성 요소 개발

14668 단어 Vue Nuxt 탄창 팝 업 층

오늘 VPopup 이 Vue.js 를 기반 으로 구 축 된 경량급 모 바 일 팝 업 상자 구성 요 소 를 공유 합 니 다.자세 한 내용 은 다음 과 같 습 니 다.
Vant,NutUI 등 인기 Vue 구성 요소 라 이브 러 리 에 있 는 Popup 탄 층,Dialog 대화 상자,Toast 알림 상자,ActionSheet 동작 패 널 상자,Notify 알림 상자 등의 기능 을 융합 했다.

빠 른 사용
main.js 에 구성 요소 도입


//     Popup
import Popup from './components/popup'
Vue.use(Popup)

다음 두 가지 구성 요소 식 및 함수 식 호출 플러그 인 을 지원 합 니 다.
모듈 식


<template>
 <view id="root">
 ...
 
 <!--      -->
 <v-popup 
  v-model="showDialog" 
  anim="scaleIn" 
  title="  "
  content="         ！" 
  shadeClose="false" 
  xclose
  :btns="[
  {...},
  {...},
  ]"
 />
 </view>
</template>

함수 식


<script>
 export default {
 ...
 methods: {
  handleShowDialog() {
  let $el = this.$vpopup({
   title: '  ',
   content: '         ！',
   anim: 'scaleIn',
   shadeClose: false,
   xclose: true,
   onClose: () => {
   console.log('vpopup is closed！')
   },
   btns: [
   {text: '  '},
   {
    text: '  ',
    style: 'color:#00e0a1',
    click: () => {
    $el.close()
    }
   }
   ]
  });
  }
 }
 }
</script>

실제 프로젝트 개발 에서 여러분 은 수요 에 따라 스스로 선택 하여 호출 할 수 있 습 니 다.

msg 정보 알림


<script>
 export default {
 ...
 methods: {
  handleShowDialog() {
  let $el = this.$vpopup({
   title: '  ',
   content: '         ！',
   anim: 'scaleIn',
   shadeClose: false,
   xclose: true,
   onClose: () => {
   console.log('vpopup is closed！')
   },
   btns: [
   {text: '  '},
   {
    text: '  ',
    style: 'color:#00e0a1',
    click: () => {
    $el.close()
    }
   }
   ]
  });
  }
 }
 }
</script>

ActionSheet 동작 패 널 상자


<!-- ActionSheet        -->
<v-popup v-model="showActionSheet" anim="footer" type="actionsheet" :z-index="1011"
 content="    ，      、       ，            "
 :btns="[
 {text: '  ', style: 'color:#09f;', disabled: true, click: handleInfo},
 {text: '       ', style: 'color:#00e0a1;', click: handleInfo},
 {text: '    ', style: 'color:#e63d23;', click: () => null},
 {text: '  ', click: () => showActionSheet=false},
 ]"
/>

IOS 스타일 창


<!-- Ios     -->
<v-popup v-model="showIos1" type="ios" shadeClose="false" title="    " z-index="1990"
	content="    ，      、       ，            "
	:btns="[
		{text: '   ', click: () => showIos1=false},
		{text: '  ', style: 'color:#00e0a1;', click: handleInfo},
	]"
>
</v-popup>

알림 상자


<!-- Toast   -->
<v-popup v-model="showToast" type="toast" icon="loading" time="5" content="   ..." />
<v-popup v-model="showToast" type="toast" icon="success" shade="false" time="3" content="    " />
<v-popup v-model="showToast" type="toast" icon="fail" shade="false" time="3" content="    " />

emmm~~위 와 같은 효 과 를 보 니 괜 찮 은 것 같 지 않 아 요?그러면 계속해서 실현 과정 을 내 려 다 보도 록 하 겠 습 니 다.😀
창 파라미터 설정
팝 업 창 은 다음 과 같은 매개 변수 설정 을 지원 합 니 다.필요 에 따라 조합 하여 사용 하 십시오.


@@Props
------------------------------------------
v-model         
title   
content   （         ）
type     （toast | footer | actionsheet | actionsheetPicker | android/ios）
popupStyle        
icon toast  （loading | success | fail）
shade        
shadeClose            
opacity       
round       
xclose         
xposition       （left | right | top | bottom）
xcolor       
anim     （scaleIn | fadeIn | footer | fadeInUp | fadeInDown）
position     （top | right | bottom | left）
follow   /    （   ）
time         （1、2、3）
zIndex     （  8080）
btns     （  ：text|style|disabled|click）
 
@@$emit
------------------------------------------
open         （@open="xxx"）
close         （@close="xxx"）
 
@@Event
------------------------------------------
onOpen       
onClose

윈도우 템 플 릿


<template>
 <div v-show="opened" class="nuxt__popup" :class="{'nuxt__popup-closed': closeCls}" :id="id">
 <div v-if="JSON.parse(shade)" class="nuxt__overlay" @click="shadeClicked" :style="{opacity}"></div>
 <div class="nuxt__wrap">
 <div class="nuxt__wrap-section">
 <div class="nuxt__wrap-child" :class="['anim-'+anim, type&&'popui__'+type, round&&'round', position]" :style="popupStyle">
  <div v-if="title" class="nuxt__wrap-tit" v-html="title"></div>
  <div v-if="type=='toast'&&icon" class="nuxt__toast-icon" :class="['nuxt__toast-'+icon]" v-html="toastIcon[icon]"></div>
  <template v-if="$slots.content"><div class="nuxt__wrap-cnt"><slot name="content" /></div></template>
  <template v-else><div v-if="content" class="nuxt__wrap-cnt" v-html="content"></div></template>
  <slot />
  <div v-if="btns" class="nuxt__wrap-btns">
  <span v-for="(btn,index) in btns" :key="index" class="btn" :style="btn.style" v-html="btn.text"></span>
  </div>
  <span v-if="xclose" class="nuxt__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"></span>
 </div>
 </div>
 </div>
 </div>
</template>


/**
 * @Desc VueJs       VPopup
 * @Time andy by 2020-10-06
 * @About Q：282310962 wx：xy190310
 */
<script>
 let $index = 0, $lockCount = 0, $timer = {};
 export default {
 props: {
 ...
 },
 data() {
 return {
 opened: false,
 closeCls: '',
 toastIcon: {
  ...
 }
 }
 },
 watch: {
 value(val) {
 const type = val ? 'open' : 'close';
 this[type]();
 },
 },
 methods: {
 //     
 open() {
 if(this.opened) return;
 this.opened = true;
 this.$emit('open');
 typeof this.onOpen === 'function' && this.onOpen();
 
 if(JSON.parse(this.shade)) {
  if(!$lockCount) {
  document.body.classList.add('nt-overflow-hidden');
  }
  $lockCount++;
 }
 
 //      
 if(this.time) {
  $index++;
  if($timer[$index] !== null) clearTimeout($timer[$index])
  $timer[$index] = setTimeout(() => {
  this.close();
  }, parseInt(this.time) * 1000);
 }
 
 if(this.follow) {
  this.$nextTick(() => {
  let obj = this.$el.querySelector('.nuxt__wrap-child');
  let oW, oH, winW, winH, pos;
 
  oW = obj.clientWidth;
  oH = obj.clientHeight;
  winW = window.innerWidth;
  winH = window.innerHeight;
  pos = this.getPos(this.follow[0], this.follow[1], oW, oH, winW, winH);
 
  obj.style.left = pos[0] + 'px';
  obj.style.top = pos[1] + 'px';
  });
 }
 },
 //     
 close() {
 if(!this.opened) return;
 
 this.closeCls = true;
 setTimeout(() => {
  this.opened = false;
  this.closeCls = false;
  if(JSON.parse(this.shade)) {
  $lockCount--;
  if(!$lockCount) {
  document.body.classList.remove('nt-overflow-hidden');
  }
  }
  if(this.time) {
  $index--;
  }
  this.$emit('input', false);
  this.$emit('close');
  typeof this.onClose === 'function' && this.onClose();
 }, 200);
 },
 shadeClicked() {
 if(JSON.parse(this.shadeClose)) {
  this.close();
 }
 },
 btnClicked(e, index) {
 let btn = this.btns[index];
 if(!btn.disabled) {
  typeof btn.click === 'function' && btn.click(e)
 }
 },
 getZIndex() {
 for(var $idx = parseInt(this.zIndex), $el = document.getElementsByTagName('*'), i = 0, len = $el.length; i < len; i++)
  $idx = Math.max($idx, $el[i].style.zIndex)
 return $idx;
 },
 //        
 getPos(x, y, ow, oh, winW, winH) {
 let l = (x + ow) > winW ? x - ow : x;
 let t = (y + oh) > winH ? y - oh : y;
 return [l, t];
 }
 },
 }
</script>

감청 구성 요 소 를 통 해 전 달 된 v-model 값 은 open 과 close 방법 을 호출 합 니 다.


watch: {
	value(val) {
		const type = val ? 'open' : 'close';
		this[type]();
	},
},

또한 오른쪽 단 추 를 누 르 고 창 을 길 게 누 르 고 슬롯 내용 을 사용자 정의 하 는 것 도 지원 합 니 다.


<!--      -->
<v-popup v-model="showComponent" xclose xposition="bottom" :shadeClose="false" content="       "
 :btns="[
 {text: '  ', style: 'color:#f60;', click: () => showComponent=false},
 ]"
 @open="handleOpen" @close="handleClose"
>
 <template #content><b style="color:#00e0a1;">  content               ，       ！！！</b></template>
 <!-- <div slot="content">         ！</div> -->
 <div style="padding:30px 15px;">
 <img src="https://img.yzcdn.cn/vant/apple-3.jpg" style="width:100%;" @click="handleContextPopup" />
 </div>
</v-popup>

함수 식 으로 구성 요 소 를 호출 하려 면 Vue.extend 확장 구조 기 를 사용 해 야 합 니 다.


import Vue from 'vue';
import VuePopup from './popup.vue';
 
let PopupConstructor = Vue.extend(VuePopup);
 
let $instance;
 
let VPopup = function(options = {}) {
 //       ，id   Popup DOM      
 options.id = options.id || 'nuxt-popup-id';
 $instance = new PopupConstructor({
 propsData: options
 });
 $instance.vm = $instance.$mount();
 
 let popupDom = document.querySelector('#' + options.id);
 if(options.id && popupDom) {
 popupDom.parentNode.replaceChild($instance.$el, popupDom);
 } else {
 document.body.appendChild($instance.$el);
 }
 
 Vue.nextTick(() => {
 $instance.value = true;
 })
 
 return $instance;
}
 
VPopup.install = () => {
 Vue.prototype['$vpopup'] = VPopup;
 Vue.component('v-popup', VuePopup);
}
 
export default VPopup;

이 를 통 해 Vue 프로 토 타 입 에$vpopup 방법 을 마 운 트 하고 v-popup 구성 요 소 를 등록 할 수 있 습 니 다.
원 각 및 닫 기 단추 설정
round,xclose 를 설정 하면 됩 니 다.또한 xposition 을 설정 하여 닫 기 단추 의 위 치 를 설정 할 수 있 습 니 다.

설정 단추 사용 안 함 상태
disabled:true 를 설정 하면 단추 이 벤트 를 비활성화 할 수 있 습 니 다.

Okay,Vue.js+Nuxt 를 기반 으로 사용자 정의 팝 업 구성 요 소 를 개발 하면 여기까지 소개 합 니 다.현재 VPopup 은 Nuxt 새 프로젝트 에서 사용 되 고 있 으 며 그때 도 공유 된다.
마지막 으로 최근 두 개의 인 스 턴 스 항목 을 동봉 합 니 다.
vue+uniapp 생방송 프로젝트 를 바탕 으로 uni-app 모방 틱 톡/낯 선 생방송 실 기능 실현
react native 위 챗 채 팅 방 인 스 턴 스 코드 모방
Vue.js+Nuxt 를 기반 으로 사용자 정의 팝 업 구성 요 소 를 개발 하 는 글 을 소개 합 니 다.더 많은 Vue+Nuxt 사용자 정의 팝 업 창 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Vue Render 함수로 DOM 노드 코드 인스턴스 만들기

render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Delphi TPageControl 탭 숨 기기 인 스 턴 스 소개

delphi xe 사용 가능 한 MD5 알고리즘

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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