在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源码浅析 String部分(二)
Jan 16 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
理解javascript回调函数
Dec 28 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
详解Python3 pickle模块用法
2019/09/16 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
上班迟到检讨书
2014/01/10 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
通报表扬范文
2015/01/17 职场文书
放牛班的春天观后感
2015/06/01 职场文书
爱的教育读书笔记
2015/06/26 职场文书
公司规章制度范本
2015/08/03 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL