在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 日期处理之时区问题
Oct 08 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
canvas的神奇用法
Feb 03 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
JS监听Esc 键触发事键
Apr 14 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
ThinkPHP数据操作方法总结
2015/09/28 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python基础教程之自定义函数介绍
2014/08/29 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
python购物车程序简单代码
2018/04/18 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
pytorch之添加BN的实现
2020/01/06 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
村级环境卫生整治方案
2014/05/04 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
教师求职信怎么写
2015/03/20 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书