写了两三日,终于把toast组件写出来了。不敢说是最棒的规划,希望有更加好思路的心上人能够在商酌区给本身意见!_(:з」∠)_

深信不疑一般的vue组件我们都会写, 定义 -> 引进 -> 注册 -> 使用
,行云流水,一气浑成,然则假如我们明日是要自定义3个弹窗组件呢?

率先步:写toast.vue,将样式等等的先定下来

率先,我们来解析一下弹窗组件的性状(要求):

<template>
 <div v-show="showToast" class="toast" :class="position">
 <div class="toast_container" v-if="type=='success'">
  <div><i class="iconfont icon-check icon"></i></div>
  <div class="msg_container">{{message}}</div>
 </div>
 <div class="toast_container" v-else-if="type=='wrong'">
  <div><i class="iconfont icon-warning-circle icon"></i></div>
  <div class="msg_container">{{message}}</div>
 </div>
 <div class="toast_container" v-else-if="type=='loading'">
  <div><loading10></loading10></div>
  <div class="msg_container">{{message}}</div>
 </div>
</div>
</template>
<script>
import loading10 from '../loading/spiner'
export default{
 props:{
  message:String,
  type:{
   validator: function (value) {
   // 值必须是这些字符串中的一个
   return ['success', 'wrong', 'loading'].indexOf(value) !== -1
  },
   default:'success'
  },
  duration:{
   type:Number,
   default:3000
  },
   position:{
   type:String,
   default:'middle'
  }
 },
 components:{
  loading10
 },
 data(){
  return{
   showToast:false
  }
 }
}
</script>
<style scoped>
.toast{
 width:100%;
}
.toast_container{
 background: rgba(0, 0, 0, 0.7);
 border-radius: 8px;
 color:#fff;
 margin-left:88px;
 margin-right:88px;
 text-align:center;
 padding-top:15px;
 padding-bottom: 15px; 
}
.top{
 position:absolute;
 top:10%;
}
.middle{
 position:absolute;
 top:40%;
}
.bottom{
 position:absolute;
 top:70%;
}
.msg_container{
 margin-top:8px;
 margin-left:15px;
 margin-right:15px;
 line-height: 22px;
 font-size: 16px;
 word-wrap: break-word;
}
.icon{
 font-size:30px;
}
</style>
  1. 轻量 –2个零部件小于 一Kib (实际打包完不到0.八k)

永利开户送38元体验金 1永利开户送38元体验金 2永利开户送38元体验金 3

壹.相似都以多处采纳 –供给缓和每种页面重新引用+注册

总结二种体裁,成功(success),战败(wrong),加载中(loading);

永利开户送38元体验金,1.相似都是跟js交互的 –无需 在 <template>
里面写<toast :show="true" text="弹窗消息"></toast>

计算三种职位,上(top),中(middle),下(bottom);

前几日,大家就抱着地点三个须要点,来兑现三个依据vue的toast弹窗组件,下图是最终成就的成效图.

具备关乎的摄影出自Ali的iconfont 手提式有线话机天猫Logo库。

永利开户送38元体验金 4 

加载中卡通是投机写的蹩脚的加载组件(emmm,就不放出来污染大家眼睛了,需求的能够讨论区知会一声_(:з」∠)_)

1. 先写2个日常的vue组件

第二步:写index.js ,落成toast组件的实例化

文本地方 /src/toast/toast.vue

import Vue from 'vue'
import Toast from './toast'
let singleToast=true;
let queue=[];
function createInstance(){
 // 返回一个扩展实例构造器
 if(!queue.length||!singleToast){
 const ToastConstructor = Vue.extend(Toast);
 // 构造一个实例
 const toastDom = new ToastConstructor({
 el: document.createElement('div'),
 });
 // 把实例化的 toast.vue 添加到 body 里
 document.body.appendChild(toastDom.$el);
 queue.push(toastDom);
 singleToast=true;
 return toastDom;
 }
};
// 注册为全局组件的函数
function toast(options= {}) {
 const toastDom = createInstance();
 toastDom.message =typeof options === 'string' ? options : options.message;
 toastDom.type = options.type || 'success';
 toastDom.duration = options.duration || 3000;
 toastDom.position = options.position || 'middle';
 if(!toastDom.message){
 toastDom.showToast =singleToast= false;
 }else{
 toastDom.showToast=true;
 setTimeout(() => {toastDom.showToast =singleToast= false} ,toastDom.duration);
 }
}
// 将组件注册到 vue 的 原型链里去,
// 这样就可以在所有 vue 的实例里面使用 this.$toast()
// Vue.prototype.$toast = showToast
Vue.prototype.$toast = toast;
export default toast
<template>
 <div class="wrap">我是弹窗</div>
</template>
<style scoped>
 .wrap{
 position: fixed;
 left: 50%;
 top:50%;
 background: rgba(0,0,0,.35);
 padding: 10px;
 border-radius: 5px;
 transform: translate(-50%,-50%);
 color:#fff;
 }
</style>

设置singleToast和queue的意在:确认保障同等时代分界面上唯有一个toast,无法同一时候出现多少个toast。

2.
在大家必要利用的页面引进组件,方便看作用和谬误

由于toast会开头化,因此为了防止在其余操作从前分界面上就出现三个toast,用if语句推断:

<template>
 <div id="app">
 <toast></toast>
 </div>
</template>
<script>
 import toast from './toast/toast'
 export default {
 components: {toast},
 }
</script>

要是未有传来的message,则不展现toast(那样可以使得初步化的toast不显得)

永利开户送38元体验金 5 

不然呈现,并且太早晚时间消失,唯有singleToast为false,表达此时分界面上未有toast,技术再新建一个toast实例(因为此时if判定内queue.length
不为0【初阶化的toast组件本人占了1个岗位】,而singleToast为false,由此得以创设)

三. 达成动态加载组件

第三步:使用

能够见见,已经显得出3个静态的弹出层了,接下去我们就来探视怎么着兑现动态弹出.

在main.js 增添如下代码:

大家先在 /src/toast/ 目录上面,新建1个 index.js ,
然后在index.js里面,敲入以下代码(由于该代码耦合比较严重,所以就不拆开壹行壹行疏解了,改成行内注释)

import toast from './components/toast/index'
Vue.use(toast)

文本位置 /src/toast/index.js

创设需求调用的Vue文件:

import vue from 'vue'
// 这里就是我们刚刚创建的那个静态组件
import toastComponent from './toast.vue'
// 返回一个 扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast(text, duration = 2000) {
 // 实例化一个 toast.vue
 const toastDom = new ToastConstructor({
 el: document.createElement('div'),
 data() {
 return {
 text:text,
 show:true
 }
 }
 })
 // 把 实例化的 toast.vue 添加到 body 里
 document.body.appendChild(toastDom.$el)
 // 过了 duration 时间后隐藏
 setTimeout(() => {toastDom.show = false} ,duration)
}
// 注册为全局组件的函数
function registryToast() {
 // 将组件注册到 vue 的 原型链里去,
 // 这样就可以在所有 vue 的实例里面使用 this.$toast()
 vue.prototype.$toast = showToast
}
<template>
 <div>
  <input type="button" value="显示弹窗" @click="showToast">
 </div>
</template>
 <script>
 export default {
  methods: {
   showToast () {
    this.$toast({message:'加载中',type:'loading',position:'bottom',
     duration:'2000'});
    // this.$toast('成功提示');
   }
  }
 }
 </script>

export default registryToast

永利开户送38元体验金 6

附二个传送门vue.extend
官方文档

能够见见1共三种办法,能够以指标方式传入参数,也得以只传入字符串,其余应用暗许设置。

四. 试用

总结

到此地,大家早已初步达成了1个方可全局注册和动态加载的toast组件,接下去大家来试用一向下探底视

上述所述是笔者给大家介绍的SVue自定义toast组件的实例代码,希望对我们有所援救,如若大家有任何疑问请给作者留言,小编会及时苏醒大家的。在此也特别谢谢我们对剧本之家网址的支撑!

在vue的进口文件(脚手架生成的话是 ./src/main.js ) 注册一下零部件
文本地点 /src/main.js

您恐怕感兴趣的小说:

  • 详解基于Vue2.0落到实处的活动端弹窗(Alert, Confirm,
    Toast)组件
  • vue的toast弹窗组件实例详解
  • 依据 flexible 的 Vue 组件:Toast —
    展现框效果
import toastRegistry from './toast/index'

// 这里也可以直接执行 toastRegistry()
Vue.use(toastRegistry)
我们稍微修改一下使用方式,把 第二步 的引用静态组件的代码,改成如下
<template>
 <div id="app">
 <input type="button" value="显示弹窗" @click="showToast">
 </div>
</template>

<script>
 export default {
 methods: {
 showToast () {
 this.$toast('我是弹出消息')
 }
 }
 }
</script>

永利开户送38元体验金 7 

可以看看,我们已经 没有须求 在页面里面 引进 跟 注册 组件,就足以一直运用
this.$toast() 了.

五. 优化

现行反革命大家曾经起来完结了1个弹窗.可是离成功还差一小点,缺乏多个动画片,现在的弹出和潜伏都很生硬.

小编们再对 toast/index.js 里的 showToast
函数稍微做一下改变(有注释的地点是有变动的)

文本地方 /src/toast/index.js

function showToast(text, duration = 2000) {
 const toastDom = new ToastConstructor({
 el: document.createElement('div'),
 data() {
 return {
 text:text,
 showWrap:true, // 是否显示组件
 showContent:true // 作用:在隐藏组件之前,显示隐藏动画
 }
 }
 })
 document.body.appendChild(toastDom.$el)

 // 提前 250ms 执行淡出动画(因为我们再css里面设置的隐藏动画持续是250ms)
 setTimeout(() => {toastDom.showContent = false} ,duration - 1250)
 // 过了 duration 时间后隐藏整个组件
 setTimeout(() => {toastDom.showWrap = false} ,duration)
}

然后,再修改一下toast.vue的体裁

文本地方 /src/toast/toast.vue

<template>
 <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div>
</template>

<style scoped>
 .wrap{
 position: fixed;
 left: 50%;
 top:50%;
 background: rgba(0,0,0,.35);
 padding: 10px;
 border-radius: 5px;
 transform: translate(-50%,-50%);
 color:#fff;
 }
 .fadein {
 animation: animate_in 0.25s;
 }
 .fadeout {
 animation: animate_out 0.25s;
 opacity: 0;
 }
 @keyframes animate_in {
 0% {
 opacity: 0;
 }
 100%{
 opacity: 1;
 }
 }
 @keyframes animate_out {
 0% {
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
 }
</style>

劳苦功高告成,3个toast组件开首成功

永利开户送38元体验金 8 

总结

  1. vue.extend 函数能够生成2个 组件构造器 能够用这么些函数构造出3个vue组件实例
  2. 能够用 document.body.appendChild() 动态的把组件加到 body里面去
  3. vue.prototype.$toast = showToast 能够在大局注册组件
  4. 呈现动画相比较轻松,隐藏动画必供给在隐蔽此前预留丰富的卡通实践时间
  5. 正文源码地址
    在这里
  6. 以上都不主要,主要的是 给本文来个
    star

如上所述是小编给大家介绍的vue的toast弹窗组件实例详解,希望对大家持有帮忙,假诺大家有别的疑问请给笔者留言,小编会及时还原大家的。在此也特别谢谢大家对剧本之家网址的扶助!

您大概感兴趣的小说:

  • 详解基于Vue2.0完成的活动端弹窗(Alert, Confirm,
    Toast)组件
  • 基于 flexible 的 Vue 组件:Toast —
    呈现框效果
  • Vue自定义toast组件的实例代码

相关文章