每日技术总结:Toast组件,eslint,white-space,animate,$emit
1.一个优雅的提示是网站必不可少的。
2.ESLint使用总结
(1)在.eslintrc.js里关闭某条规则, '规则名': 'off'或0
举例:
rules: {
'generator-star-spacing': 'off','no-restricted-syntax': 'off',
'indent': 0,
'new-cap': 0
}
(2)// eslint-disable-next-line 对下一行禁用,举例代码:
// eslint-disable-next-line
var curType = type ? type : opt.defaultType
(3)// eslint-disable-line 对这一行禁用,举例代码:
toastVM = new toastTpl() // eslint-disable-line
(4)eslint常见规则,请参考: ESLint常见命令(规则表)
3.white-space,word-spacing,letter-spacing,word-break这些都是什么鬼?
参见博客:word-spacing、word-break、letter-spacing和white-space
4.CSS动画库,Animate.css
官方地址:https://daneden.github.io/animate.css/
(1)安装: npm install animate.css --save 或 yarn add animate.css
(2)引入: vue项目,src/main.js 代码如下:
import animate from 'animate.css'
(3)使用:在需要动画的vue文件,比如detail.vue
示例代码:
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" :duration="200">
<div class="mask" v-show="cartModalShow"></div>
</transition>
注意:
- animated类名必须加
- 第二个类名参考官方文档里面的动画名,如bounceIn,fadeOut,slideOutUp……
- <transition>里面的元素必须是单独的,没有兄弟元素的。并且是有v-show,v-if,等显示和隐藏相关的指令的。。
5.$emit()
需求情景描述:我在详情页(父组件)点‘加入购物车’按钮,显示购物车信息模态框(子组件),在模态框里点‘继续购物’关闭该模态框,模态框的显示和隐藏是父组件的一个参数cartModalShow控制的。
也就是说,点击事件发生在子组件,需要控制父组件里的某个参数。怎么办吧?
代码示例:
这是子组件:
<template>
<div class="cart-modal">
<div class="msg">加入购物车成功!</div>
<div class="btns">
<a href="javascript:;" class="b-r" @click="toCart">进入购物车</a>
<a href="javascript:;" @click="closeModal">继续购物</a>
</div>
</div>
</template>
子组件js部分:
methods: {
toCart () {
this.$router.push({
path: 'cart'
})
},
closeModal () {
this.$emit('close')
}
}
this.$emit('close') 该方法向父组件传递了'close'事件
点‘继续购物’这个按钮时,需要关闭模态框。但是控制模态框显示的属性在父组件里。
父组件代码如下:
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" :duration="200">
<cart-modal v-show="cartModalShow" @close="closeCartModal"></cart-modal>
</transition>
v-show="cartModalShow" 控制着该模态框的显示和隐藏
@close="closeCartModal" 父组件使用close事件来触发closeCartModal方法关闭模态框
js代码:
methods: {
closeModal () {
this.cartModalShow = false
}
}
这么写出来就发现其实用法也挺简单的,之前没有总结和整理,以为很难。
6.cubic-bezier是什么鬼?
参考文章:实用的 CSS — 贝塞尔曲线(cubic-bezier)
(1)animation-timing-function, transition-timing-function
(2)cubic-bezier 三次贝塞尔,为animation生成速度曲线的函数,cubic-bezier(<x1>, <y2>, <x2>, <y2>)
今日总结:
2019年开始,每个工作日都会写一篇博客记录用到的或学到的技术,并没有那么难,写博客的目的纯粹是为自己做个记录,同时也是整理,当你需要把一件事情写出来时,你不得不十分清楚。以前也接触过不少的技术知识,基本上用过就丢一边了,下次再遇到时,又要重新找制作方法。
希望这是一个好的开始,坚持下去。我可能和某些人比差很远,但是每天都比自己更进步。
每日技术总结:Toast组件,eslint,white-space,animate,$emit的更多相关文章
- 使用Angular CDK实现一个Service弹出Toast组件
在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能 ...
- 提示框的优化之自定义Toast组件之(二)Toast组件的业务逻辑实现
在java下org.socrates.mydiary.activity下LoginActivity下自定义一个方法showCustomerToast() public class LoginAct ...
- dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.
采用dom4j方式解析string类型的xml xml: String string="<?xmlversion=\"1.0\" encoding=\ ...
- 微信小程序把玩(二十四)toast组件
原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其 ...
- 百度小程序自定义通用toast组件
百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...
- toast组件小结
简介:toast是"吐司"的意思,它属于android杂项组件,是一个简单的消息提示框,类似于javascript中的alert. 作用 显示文本 显示图片 显示图文 3.常用方法 ...
- 提示框的优化之自定义Toast组件之(三)Toast组件优化
开发步骤: 在toast_customer.xml文件中添加一个图片组件对象显示提示图片 <?xml version="1.0" encoding="utf-8&q ...
- 提示框的优化之自定义Toast组件之(一)Toast组件的布局实现
开发步骤: 在res下layout下创建一个Toast的布局资源文件toast_customer.xml 在最外层布局组件中为该布局添加android:id属性 //toast_custo ...
- 【Web技术】314- 前端组件设计原则
点击上方"前端自习课"关注,学习起来~ 译者:@没有好名字了译文:https://github.com/lightningminers/article/issues/36,http ...
随机推荐
- CF 246 div2 D Prefixes and Suffixes (全部前缀的出现次数)
题目链接:http://codeforces.com/contest/432/problem/D 题意:对一个长度不超过10^5的字符串.按长度输出和后缀全然匹配的的前缀的长度,及该前缀在整个串中出现 ...
- jquery中最常用的API有哪些
jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
- 阿里云Redis使用规范
一.键值设计 1.key名设计 (1)[建议]: 可读性和可管理性 以业务名(或数据库名)为前缀(防止key冲突),用冒号分隔,比如业务名:表名:id ugc:video:1 (2)[建议]: 简洁性 ...
- CSS的导入方式:link与import方式的区别
在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...
- 使用Ant 和 Maven打包发布命令行程序(转载)
From:https://www.linux178.com/Java/maven-release.html 用Java写了一个命令行的小程序,使用的Intellij IDE是IDEA13原来一直使用A ...
- Oracle11gR2 Windows 7 64bit and PL/SQL Developer排错
1.Environment variable: "PATH" - This test checks whether the length of the environment va ...
- C# 中 int、Convert.ToInt32()、int.Parse()的区别
int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; Conver ...
- 关于使用toFixed()函数时报错"toFixed() is not a function"的问题
toFixed()函数只有数字类型的参数才可使用,字符串类型的参数需用parseFloat或者parseInt转换后再使用
- 自定义Base 64加密
一.前言 最近做软件需要一个功能,就是对文件进行加密.本来嘛,加密算法一堆一堆的,但是试了几个成熟的加密算法后发现对文件进行加密需要的时间很长,特别是上G的文件,这样客户是接受不了的.最后没办法了,好 ...
- 【Codeforces Round #428 (Div. 2) C】Journey
[Link]:http://codeforces.com/contest/839/problem/C [Description] 给一棵树,每当你到一个点x的时候,你进入x的另外一每一个出度的概率都是 ...