Vue自行封装常用组件-文本提示
使用方法:
1.在父组件中引入"toast.vue"
//import toast from "./toast";
2.在父组件中注册 toast
//components:{toast},
3.放在父组件中使用
//<toast ref="toast"></toast>
4.调用toast组件
//this.$refs.toast.showToast('text')
注:index.vue为父组件,后者为子组件,效果图先上,可以先看是否是自己想要的组件,再选择使用
index.vue
<template>
<div>
<toast ref="toast"></toast>
</div>
</template> <script>
import toast from './toast.vue' export default {
components:{
toast
},
methods:{ },
created(){
this.$refs.toast.showToast('弹出文本TEXT')
}
}
</script> <style lang="less" scoped> </style>
toast.vue
<template>
<div class="toast" v-show="toastShow">
{{toastText}}
</div>
</template> <script>
export default {
data() {
return {
toastShow: false,
toastText: ''
}
},
methods: {
showToast (str) {
let v = this
v.toastText = str
v.toastShow = true
setTimeout(function(){
v.toastShow = false
}, 1500)
}
}
}
</script> <style lang="less" scoped>
.toast {
position: fixed;
z-index: 2000;
left: 50%;
top:45%;
transition:all .5s;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
border-radius: .1rem;
color:#FFF;
background: rgba(17, 17, 17, 0.7);
padding: .4rem .4rem;
max-width: 14rem;
font-size: .55rem
}
</style>
Vue自行封装常用组件-文本提示的更多相关文章
- Vue自行封装常用组件-弹出框
使用方法: 1.在父组件中引入"box.vue" //import popUpBox from "./box.vue"; 2.在父组件中注册 popUpBo ...
- Vue自行封装常用组件-倒计时
倒计时组件,比较复杂一点,大神勿调侃,精确到毫秒,因为项目中多次出现倒计时,所以拿出来分享下 使用方法:1.在父组件中引入"uni-countdown" //import uniC ...
- vue移动端常用组件
3d picker组件 参考链接:https://segmentfault.com/a/1190000007253581?utm_source=tag-newest安装:npm install vue ...
- Vue 数组封装和组件data定义为函数一些猜测
数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...
- Vue文件封装日历组件
封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...
- Vue中封装axios组件实例
首先要创建一个网络模块network文件夹 里面要写封装好的几个组件 在config.js里面这样写 在index.js要这样写 core.js文件里面内容如下 然后要在main.js文件里面要设置 ...
- [ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭
场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...
- vue中封装swipe组件
<template> <!-- TODO swipe --> <div id="hy-swiper"> <div class=" ...
- VUE 2.0 引入高德地图,自行封装组件
1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...
随机推荐
- Jmeter如何使用数据库返回值实践
Jmeter如何使用数据库返回值实践 最近使用Jmeter针对产品做性能测试,测试内容是要模拟300并发用户审批休假申请时的性能.由于每个申请人的主管不同,且会根据不同的休假类型,会有一级审批或者二级 ...
- 如何在终端使用后台运行模式启动一个Linux应用程序
这是一个篇幅不长但是十分有用的教程,可以帮助你在终端启动一个Linux应用程序,并且使终端窗口不会丢失焦点. 我们有很多可以在Linux系统中打开一个终端窗口的方法,这取决于你的选择以及你的桌面环境. ...
- (“(null)” is of a model that is not supported by this version of Xcode. Please...)
真机测试遇到以下问题: (还以为手机不支持Xcode的版本呢) 解决方法: 发现只要将XCode重启后就可以真机运行了,碰见这个问题的朋友可以试下,我反正是被坑了半小时...
- java中instanceof的基本使用
java中的instanceof运算符是用于判断对象是否是指定类或这个指定类的子类的一个实例,返回值是布尔类型. 语法: boolean result = object instanceof clas ...
- Unity中的动画系统和Timeline(1) 普通动画创建
学习使用版本:Unity2017.1.1 目标:给一个Cube创建动画 一:第一种创建方法 1 Windows —— Animation,打开Aniamtion动画界面,此时显示 因为此时没有任何动画 ...
- cisco 访问控制列表
LAB-A:Lab-A(config)#host Lab-A Lab-A(config)#interface Ethernet0/0 LAB-A(config-if)#ip address 172. ...
- 非常好的一个JS代码(RelativePosition.js)
var RelativePosition = function(){ function getLeft( align, rect, rel ){ var iLeft = 0; switch (alig ...
- python学习笔记四 (运算符重载和命名空间、类)
从以上代码中应该了解到: obj.attribute 查找的顺序: 从对象,类组成的树中,从下到上,从左到右到查找最近到attribute属性值,因为rec中存在name的属性,所以x.name可以 ...
- 使用Python基于HyperLPR/Mask-RCNN的中文车牌识别
基于HyperLPR的中文车牌识别 Bolg:https://blog.csdn.net/lsy17096535/article/details/78648170 https://www.jiansh ...
- luogu P3320 [SDOI2015]寻宝游戏
大意:给定树, 要求维护一个集合, 支持增删点, 询问从集合中任取一点作为起点, 遍历完其他点后原路返回的最短长度. 集合中的点按$dfs$序排列后, 最短距离就为$dis(s_1,s_2)+...+ ...