在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 相关文章推荐
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Vue.js实现数据响应的方法
2018/08/13 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
浅谈Python 参数与变量
2020/06/20 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
在C#中如何实现多态
2014/07/02 面试题
财政局长自荐信范文
2013/12/22 职场文书
公司中秋节活动方案
2014/02/12 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
相亲大会策划方案
2014/06/05 职场文书
新闻人物通讯稿
2014/10/09 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
python实现简单的聊天小程序
2021/07/07 Python