在vue中封装可复用的组件方法


Posted in Javascript onMarch 01, 2018

本次封装的组件以toast组件为例

以前使用移动端ui插件时,通过一句代码比如 $.toast( ‘ 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失。

现在我们也尝试自己封装toast组件。

准备工作:vue-cli脚手架工程

先看一下涉及到的文件目录截图:

在vue中封装可复用的组件方法

这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下:

① Toast.vue是我们要使用的toast组件;

② toast.js里面用Vue.extend()扩展一个组件构造器,然后通过实例化组件构造器,就可创造出可复用的组件。

最后在toast.js里面导出函数myToast,函数myToast里面的逻辑在代码里面有解释;

③ Hello.vue里调用函数,显示组件。

Toast.vue代码:

<template>
	<div class="toast" v-if="isShow">
		<div class="toast-div">{{ text }}</div>
	</div>
</template>
<script>
export default{
	data(){
		return {
			text:'内容',
			isShow:true,
			duration:1500
		}
	}
}
</script>
<style>
*{
	margin: 0;
	padding: 0;
}
.toast{
 	position: fixed;
 	left: 50%;
 transform: translate(-50%, 0);
 margin-top: 5rem;
 background: #000000;
 line-height: 0.7rem;
	color: #FFFFFF;
	padding: 0 0.2rem;
	border-radius: 0.2rem;
}
</style>

Toast.js代码:

import Vue from 'vue'; 
import Toast from '@/components/Toast'; //引入组件 
let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器” 
 
let myToast = ()=>{ 
 let toastDom = new ToastConstructor({ 
 el:document.createElement('div') //将toast组件挂载到新创建的div上 
 }) 
 document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里 
} 
export default myToast;

Hello.vue代码:

<template>
 <div class="hello">
 <button @click="showToast">按钮</button>
 </div>
</template>
<script>
import Vue from 'vue';
import toast from './js/toast'; //引入toast函数
Vue.prototype.$toast = toast;  //给Vue对象添加$toast方法
export default {
 name: 'hello',
 data () {
 return {
 
 }
 },
 methods:{
 	showToast(){
 		this.$toast();  //现在就可以调用了
 	}
 }
}
</script>

通过以上步骤,离真正的toast效果还是有区别的,我们要达到的效果是让显示的内容在一段时间后消失,那么,得从toast.js里面修改,得重新写myToast函数,给他设置两个传入参数,一个是显示的内容,一个是显示的时间。

toast.js修改后的代码如下:

import Vue from 'vue'; 
import Toast from '@/components/Toast'; //引入组件 
let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器” 
 
let myToast = (text,duration)=>{ 
 let toastDom = new ToastConstructor({ 
 el:document.createElement('div') //将toast组件挂载到新创建的div上 
 }) 
 document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里 
 
 toastDom.text = text; 
 toastDom.duration = duration; 
 
 // 在指定 duration 之后让 toast消失 
 setTimeout(()=>{ 
 toastDom.isShow = false; 
 }, toastDom.duration); 
} 
export default myToast;

那么,现在我们在Hello.vue中调用的时候就应该是这样了:this.$toast('新内容',2000);我们的组toast组件可以正常使用了!

以上这篇在vue中封装可复用的组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
node thread.sleep实现示例
Jun 20 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
对vuex中getters计算过滤操作详解
Nov 06 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 #Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 #Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 #Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 #Javascript
vue 虚拟dom的patch源码分析
Mar 01 #Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 #Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 #Javascript
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
微信小程序使用npm支持踩坑
2018/11/07 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
网上签名寄语活动留言
2014/01/18 职场文书
警校毕业生自我评价
2014/04/06 职场文书
《锄禾》教学反思
2014/04/08 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
初中政治教学反思
2016/02/23 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android