在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 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js中生成map对象的方法
Jan 09 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
树结构之JavaScript
Jan 24 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
vue使用element-ui按需引入
May 20 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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python函数的万能参数传参详解
2019/07/26 Python
jupyter notebook 重装教程
2020/04/16 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
总经理岗位职责
2013/11/09 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
综治工作心得体会
2014/09/11 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
个人工作保证书
2015/02/28 职场文书
教师节获奖感言
2015/07/31 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
Ajax异步刷新功能及简单案例
2021/11/20 Javascript