在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之ESC(第二类混淆)
May 06 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
swiper自定义分页器的样式
Sep 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
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
python打开网页和暂停实例
2014/09/30 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
自行车广告词大全
2014/03/21 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
小学教代会开幕词
2016/03/04 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
分享3个非常实用的 Python 模块
2022/03/03 Python
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
JavaScript前端面试组合函数
2022/06/21 Javascript