vue封装组件的正确方式-封装类似elementui的组件
最近读了下element的源码,仿照他封装了两种不同的组件。
第一种:通过组件来调用显示的
<template>
<div class = "contine">
<p class = "title">
{{title}}
</p>
<slot class = "contine" name = "contine"> </slot>
</div>
</template> <script>
export default {
name:"test-component",
props:{
title:{
type : String,
default:"组件标题"
}
}
}
</script> <style lang="scss" scoped>
$black : #333;
$mainSize : 16px;
$mainLineHeight:30px;
$lineCenter:center;
.extendStyle {
border-radius:$mainSize;
box-shadow: 3px 3px 3px 3px #333;
}
.contine{
width:50%;
height:130px;
color:$black;
font-size:$mainSize;
@extend .extendStyle;
.title,.contine{
color:$black;
font-size:$mainSize;
text-align:$lineCenter;
line-height:$mainLineHeight; }
}
</style>
组件说明:只是一个简单的组件 显示一个标题和一段自定义slot内容(仅用作展示);我想通过以下方式引入
import TestModel from "./testComponent/index";
Vue.use(TestModel);
并且调用方法为:
<test-conponent title = "123">
<div slot = "contine">
2222
</div>
</test-conponent>
这么做,像不像element?是有点这个意思对吧,但是怎么实现呢,在这先说明下use的作用,其实就是相当于执行他的install方法,明白这个 之后 开始动工,思路:执行他的install方法,声明一个vue组件,组件内容就是上面写的,从而达到全局组件的目的,来看看我的js怎么写的:
import main from "./main";
main.install = (Vue) => {
Vue.component("test-conponent",main);
}
export default main;
没错就是这么一句,第一种的简单组件就写完了,一次引入 全局通用。
第二种、通过指令调用,比如element的loading组件等
<template>
<div class = "loading-container" v-show = "show">
<div class = "loading-mask"></div>
<div class="loading-content">
<div class="loading-animate"></div>
<div class="loading-text">
{{text}}
</div>
</div>
</div>
</template> <script>
export default {
props:{
show:{
type:Boolean,
},
text:{
type:String,
default:"加载中...",
}
}
}
</script> <style>
.loading-container {
position: relative;
text-align: center;
}
.loading-mask {
position:fixed;
top:0;
bottom:0;
left: 0;
right: 0;
background-color: rgba(0,0,0,.7);
}
.loading-content{
position:fixed;
left:50%;
top:45%;
z-index:999;
transform: translate(-50%,-45%);
text-align:center;
color:#fff; }
.loading-content .loading-animate{
display:inline-block;
width:40px;
height:40px;
vertical-align: baseline;
margin:25px 0 10px;
vertical-align: middle;
animation:cricleLoading 1s steps(12,end) infinite;
background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=") no-repeat;
background-size: 100%; }
.loading-content .loading-text{
font-size: 16px;
}
@-webkit-keyframes cricleLoading{
0%{
transform: rotate3d(0,0,1,0deg);
}
100%{
transform: rotate3d(0,0,1,360deg);
}
}
@keyframes cricleLoading{
0%{
transform: rotate3d(0,0,1,0deg);
}
100%{
transform: rotate3d(0,0,1,360deg);
}
}
</style>
以上是loading组件的内容,要通过这种方式引入:
import loading from "./toolTip";
Vue.use(loading);
并且通过指令方式调用
this.$loading.show({
text:"拼命加载中"
});
有的朋友可能会说了,这怎么可能啊,没有节点怎么放进去?对 没错 确实,没有节点是没办法进去的,但是没有节点就声明节点 对么?
import LoadingComponent from "./loading";
import Vue from "vue";
let instance;
const loadingConstructor = Vue.extend(LoadingComponent);
instance = new loadingConstructor({
el:document.createElement("div")
});
instance.show = false;
const loading = {
show(options = {}){
instance.show = true;
document.body.appendChild(instance.$el);
instance.text = options.text;
setTimeout(()=>{
loading.hide();
},5000)
},
hide() {
instance.show = false;
}
}
export default {
install(){
if(!Vue.loading){
Vue.$loading = loading;
}
Vue.mixin({
created(){
this.$loading = Vue.$loading;
}
})
}
}
实际上就是变相的利用install方法 吧loading指令挂到页面中,这样不管在哪里都可以直接用this.$loading调用。
以上就是本文所有分享
vue封装组件的正确方式-封装类似elementui的组件的更多相关文章
- Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
- vue添加swiper的正确方式亲测---切图网
在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...
- 如何快速为团队打造自己的组件库(下)—— 基于 element-ui 为团队打造自己的组件库
文章已收录到 github,欢迎 Watch 和 Star. 简介 在了解 Element 源码架构 的基础上,接下来我们基于 element-ui 为团队打造自己的组件库. 主题配置 基础组件库在 ...
- vue封装一个简单的div框选时间的组件
记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...
- VUE+ELEMENT-UI的后台项目封装组件--查询form的封装
最近项目打算重构,项目的模块几乎都是以后台查询展示的传统的增删改差模式,所以卑微的我想要自己封装一下查询form,先上效果图 子组件页面: <template> <div class ...
- JS组件系列——自己动手封装bootstrap-treegrid组件
前言:最近产品需要设计一套相对完整的组织架构的解决方案,由于组织架构涉及到层级关系,在表格里面展示层级关系,自然就要用到所谓的treegrid.可惜的是,一些轻量级的表格组件本身并没有自带树形表格的功 ...
- uni-app,vue,react,Trao之缓存类封装
uni-app,vue,react,Trao之缓存类封装 一,介绍与需求 1.1,介绍 缓存主要分为如下几个 1.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏 ...
- vue之better-scroll详解及封装
在我们的h5或移动端网页开发中,常常会需要实现滚动加载数据,等需求,而在开发中原生开发往往会带来意想不到的问题,因此我们引入better-scroll来帮我们实现流畅的滚动效果. 什么是better- ...
- 【分享】WeX5的正确打开方式(6)——数据组件初探
本文是[WeX5的正确打开方式]系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式. 数据组件的由来 上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON ...
随机推荐
- python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码
python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...
- php mysqli query 查询数据库后读取内容的方法
php mysqli query 查询数据库后读取内容的方法 <?php$mysqli = new mysqli("localhost", "my_user&quo ...
- centos 网卡名称修改
在centos6.4之前,如果6.2,6.3安装后网卡名称都是em开始,如果想用eth0这种名称,或者是自定义名称,可以参照以下来实施. 第一步:修改/boot/grub/grub.conf增加一个 ...
- 什么是公网IP、内网IP和NAT转换?
搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么? 1.引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地 ...
- C++设计模式(第一周)
part 1 设计模式简介 课程目标 1.理解松耦合设计思想 2.掌握面向对象设计原则 3.掌握重构技法改善设计 4.掌握GOF 核心设计模式 什么是设计模式? “每一个模式描述了一个在我们周围不断重 ...
- Python3基础 函数 局部与全局变量同名,各管各的
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Python 逗号的几种作用
转自http://blog.csdn.net/liuzx32/article/details/7831247 最近研究Python 遇到个逗号的问题 一直没弄明白 今天总算搞清楚了 1.逗号在参数传 ...
- java自学入门心得体会 0.1
之前记录了java的简介和基本语法 这里记载下对象和类 不太懂的我理解java对象和类的概念很模糊,因为有了 Abstract修饰符 让对象与类更加的扑朔迷离 - - 所以,就像很开放的语言,创建对象 ...
- Unity3D学习笔记(二十五):文件操作
文件是什么? 存储在硬盘上的最后的节点. 文件夹是什么? 文件的上级单位称为文件夹. 文件夹的基本结构? 文件夹是层级化结构的,对于同级的文件夹不可以重名,父文件夹和子文件夹可以同名> IO:I ...
- Unity3D学习笔记(二):个体层次、绝对和局部坐标、V3平移旋转
Directional Light:平行光源/方向性光源,用来模拟太阳光(角度只与旋转角度有关,与位置无关) Point Light:点光源,用来模拟灯泡,向四周发散光源 Spotlight:锥光源/ ...