1.解决 toast 中传入 html 的问题,通过假的 slot 来实现

// plugins.js
toast.$slots.default = [message]
// toast.vue
<div v-html="$slots.default[0]"></div>
// 使用
created() {
this.$toast('<p>我是<strong>hi</strong></p>',{})
},

2.在 toast 中加 html 是比较危险的一个动作,所以要加一个选项默认不开启。

// toast.vue
<slot v-if="!enableHtml"></slot>
<div v-else v-html="$slots.default[0]"></div>
// plugin.js,进行传递参数的改写
propsData:toastOptions
// 使用
created() {
this.$toast('<p>我是<strong>hi</strong></p><a href="http://qq.com">qq</a>',{
enableHtml: false
})
},

3.flex-shrink的使用,flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。如果数值越大,缩小比例越大。

4.line的高度问题,如果高度写了最小高度,那么子元素的height%就不生效了。用js去操作line的高度。

// toast.vue
<div class="toast" ref="wrapper">
<div class="line" ref="line"></div>
</div> mounted() {
this.$nextTick(()=>{
this.$refs.line.style.height = `${this.$refs.wrapper.getBoundingClientRect().height}px`
})
}, // 这个计较太trick

debugger的技巧,如果眼睛观察到的是0,但是打印出来不是0,可能就是异步的问题。

5.增加toast的位置。

// toast.vue
props: {
position: {
type: String,
default: 'top',
validator(value){
return ['top', 'bottom', 'middle'].indexOf(value) >= 0
}
}
},
computed:{
toastClasses(){
return {
[`position-${this.position}`]:true
}
}
}
// 使用
this.$toast('你的智商需要充值', {
position: 'bottom'
})
// plugin.js
export default {
install(Vue, options){
Vue.prototype.$toast = function (message, toastOptions) {
let Constructor = Vue.extend(Toast)
let toast = new Constructor({
propsData:toastOptions // 在这里将position传进去
})
toast.$slots.default = [message]
toast.$mount()
document.body.appendChild(toast.$el)
}
}
}

6.开始做如果已经有一个toast就把之前那个干掉,再出现。

  1. 先写一个函数
  2. 给函数取一个名字
  3. 把参数提出来
// plugin.js
import Toast from './toast' let currentToast export default {
install(Vue, options){
Vue.prototype.$toast = function (message, toastOptions) {
if(currentToast){
currentToast.close()
}
currentToast = createToast({Vue,message, propsData: toastOptions})
}
}
} /* helpers */
function createToast ({Vue,message,propsData}){
let Constructor = Vue.extend(Toast)
let toast = new Constructor({propsData})
toast.$slots.default = [message]
toast.$mount()
document.body.appendChild(toast.$el)
return toast
}

7.实现动画

  1. 声明一个动画,然后写到类上面
   @keyframes fade {
0% {opacity: 0; transform: translateY(100%);}
100% {opacity: 1;transform: translateY(0);}
}
.toast {
animation: fade 1s;
}
  1. 这里有个bug,我们在实现一次的时候是有问题的,如果toast被关闭了,我们不需要重复关闭,而我们写的是不管你之前的toast有没有关闭,只要有值的我们就关闭,那这样就会出现一个问题,点了关闭currentToast还是一个Toast并没有把它变成null,所以要加上一个回调告诉外面,我被关了不要重复关我,代码会多调一次close。
  // toast.vue
close() {
this.$el.remove()
this.$emit('close')
this.$destroy()
}
// plugin.js
export default {
install(Vue, options){
Vue.prototype.$toast = function (message, toastOptions) {
if(currentToast){
currentToast.close()
}
currentToast = createToast({Vue,message, propsData: toastOptions,onclose: ()=>{
currentToast = null
}
}) // 加了这句话
}
}
} /* helpers */
function createToast ({Vue,message,propsData,onclose}){
let Constructor = Vue.extend(Toast)
let toast = new Constructor({propsData})
toast.$slots.default = [message]
toast.$mount()
toast.$on('close',onclose) // 加了这句话
document.body.appendChild(toast.$el)
return toast
}
  1. git相关的钩上,不想管的不用钩上
  2. 回忆bug是如何产生的,默认样式是:transform:translateX(-50%),进入0%时候transform:translateY(100%),它们两会覆盖。有三个方案,解决。
    • 换一种方式去做居中,但是这种方法是最好的,很难想
    • 不要用css做动画
    • 做两个div外面一个居中,里面一个做动画
  3. 为什么不写两个动画帧来控制居中,如果一段代码要背下来,那么一定是有问题的。
  4. 优化三种动画,上下中是不一样的,通过css进行优化。

造轮子-toast组件的实现(下)的更多相关文章

  1. React造轮子:拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

  2. GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

    1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...

  3. 自己造轮子系列之OOM框架AutoMapper

    [前言] OOM框架想必大家在Web开发中是使用频率非常之高的,如果还不甚了解OOM框架,那么我们对OOM框架稍作讲解. OOM顾名思义,Object-Object-Mapping实体间相互转换.常见 ...

  4. 除非你是BAT,前端开发中最好少造轮子

    站在前人的肩膀上 HTML.CSS.JavaScript是前端的根基,这是无可否认的事实.正如一辆车当然都是由一堆钢板和螺钉组成的,但是现在还有人拎着个锤子敲敲打打的造车吗?李书福说过,“汽车不过是四 ...

  5. 一起学习造轮子(三):从零开始写一个React-Redux

    本文是一起学习造轮子系列的第三篇,本篇我们将从零开始写一个React-Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Re ...

  6. 造轮子和用轮子:快速入门JavaScript模块化

    造轮子和用轮子:快速入门JavaScript模块化 前言 都说“不重复造轮子”,就像iPhone——它除了打电话还可以播放音乐——但是工程师不用从零开始做一个音乐播放功能,也许只要在iPhone的系统 ...

  7. 跟我一起造轮子 手写springmvc

    原创地址:https://www.cnblogs.com/xrog/p/9820168.html 作为java程序员,项目中使用到的主流框架多多少少和spring有关联,在面试的过程难免会问一些spr ...

  8. 避免重复造轮子的UI自动化测试框架开发

    一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发 目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览 ...

  9. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

随机推荐

  1. linux I/O 内存分配和映射

    I/O 内存区必须在使用前分配. 分配内存区的接口是( 在 <linux/ioport.h> 定义): struct resource *request_mem_region(unsign ...

  2. 前端小白-----ES6之字符串模板

    前言:只要坚持就会胜利--Coldfront-小白菜 既是总结也是一种分享 分享内容:ES6 字符串模板 案例1:var Musics=[{music:"六月的雨",singer: ...

  3. es6笔记 day2---数组热闹的循环

    数组: ES5里面新增一些东西 循环 : 1.for for(let i =0;i<arr.length;i++) 2.while arr.forEach() arr.map() arr.fil ...

  4. EF 配置多个数据库

    1.先创建两个DbContext using System; using System.Data.Common; using System.Data.Entity; using System.Data ...

  5. while Ture怎么退出全部

    while True: #这是一个死循环 如果想要quit出去只能一层一层的退出 比如如果在第三层输入quit会回到第二层 那么有什么方法能够在第三层就退出全部? print("level1 ...

  6. rest_framework框架之认证功能的使用和源码实现流程分析

    rest_framework框架之认证的使用和源码实现流程分析 一.认证功能的源码流程 创建视图函数 Note 创建视图函数后,前端发起请求,url分配路由,执行视图类,视图类中执行对应方法必须经过d ...

  7. 通过9个Linux-0.11实验学习操作系统

    简介 2019年秋,我自学了一下哈工大的操作系统课程,感觉其设计的教程和实验作为操作系统入门是个不错的选择(虽然是基于较老的Linux-0.11写的).实验大致覆盖了操作系统中的核心概念,例如启动.中 ...

  8. 为你写诗:3 步搭建 Serverless AI 应用

    作者 | 杜万(倚贤) 阿里巴巴技术专家 本文整理自 1 月 2 日社群分享,每月 2 场高质量分享,点击加入社群. 关注"阿里巴巴云原生"公众号,回复关键词 0102 即可下载本 ...

  9. 基于WPF&Prism&AvalonEdit的XAML轻量编辑器

    1. 写在前面 一直从事WPF的相关开发工作,有时为了尝试或演示某些仅仅基于XAML的效果时,但又不想大动干戈打开VS去创建项目,所以一个轻便简单,集编辑与预览于一身的XAML编辑器就显得格外重要. ...

  10. 基于 Blazui 的 Markdown 编辑器 Blazui.Markdown 尝鲜

    想做一个文档平台用来存放和展示 Blazui 的文档,然后基于 Markdown 写文档,但缺一个好用的 Blazor Markdown 编辑器,所以就顺便写一个了,功能上基本抄的 https://p ...