Vue自行封装常用组件-文本提示
时间:2019-10-24
本文章向大家介绍Vue自行封装常用组件-文本提示,主要包括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>
原文地址:https://www.cnblogs.com/10ve/p/11730836.html
- 查看空间使用情况的脚本(r2笔记第2天)
- 使用dbms_parallel_execute来完成DML的并行(r3笔记第1天)
- 有趣的linux命令总结(78天)
- 生产环境sql语句调优实战第七篇(r2笔记99天)
- 一个普通数据库用户所能查到的"意料之外"的信息(r2笔记98天)
- 查看并行进程的一些简单信息(r3笔记第17天)
- 多行数据的批处理之bulk collect(r3笔记第16天)
- pl/sql中错误的异常处理 (r3笔记第15天)
- 关于session leak的问题分析(r3笔记第13天)
- 执行计划的偏差导致的性能问题(r3笔记第12天)
- 关于评审开发人员的sql语句(r3笔记第11天)
- 性能下降的不定时炸弹_过旧的sql_profile(r3笔记第9天)
- 关于抓取session信息的一个脚本(r3笔记第8天)
- oracle PL/SQL中的重载 (r3笔记27天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python实现图片手绘效果
- Python给头像戴口罩
- Python表白窗口 仿某音设计
- Autonomous_driving_application_Car_detection_v3a
- Python实现图片相似度计算
- Python实现在原始视频上添加动态雪花
- Three.js学习|代码详解 个人见解
- Linux进程详解
- Face_Recognition_v3a
- Building_a_Recurrent_Neural_Network_Step_by_Step_v3b
- gym 搭建 RL 环境
- MNIST练习
- Dinosaurus_Island_Character_level_language_model_final_v3b
- Trigger_word_detection_v1a
- 《深入浅出SQL》问答录(二)