在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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
原生js 秒表实现代码
Jul 24 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 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中的密码加密的解决方案总结
2016/10/26 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
vue实现放大镜效果
2020/09/17 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python http接口自动化脚本详解
2018/01/02 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python函数中不定长参数的写法
2019/02/13 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
商务日语毕业生自荐信
2013/11/23 职场文书
买房子个人收入证明
2014/01/16 职场文书
推荐信模板
2014/05/09 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
无房证明样本
2015/06/17 职场文书
开学第一天的感想
2015/08/10 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书