在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 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
javascript实现画板功能
Apr 12 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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PDO::errorInfo讲解
2019/01/28 PHP
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
python cs架构实现简单文件传输
2020/03/20 Python
简单了解python的内存管理机制
2019/07/08 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
opencv+python实现均值滤波
2020/02/19 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
C#实现启动一个进程
2016/10/01 面试题
机关搬迁方案
2014/05/18 职场文书
实习证明格式范文
2014/10/14 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书