首先上效果图

表单外部类似卡片的圆角矩形即本卡片型盒子组件

在所有vue页面中可直接使用,无需再单独进行引入

组件编写

<template><div class="basic-box"><el-card><slot></slot></el-card></div>
</template><script>
export default {name: "basicBox"
};
</script><style lang="scss" scoped>
.basic-box {border-radius: 10px;padding: 6px 8px 2px 8px;box-sizing: border-box;.el-card {width: 100%;}
}
</style>

直接套用elment-ui的卡片组件,然后在卡片中间自定义一个插槽,这样子在组件内放任何东西都会套在slot内.

import BasicBoxComponent from "./basicBox";const BasicBox = {install: function(Vue) {Vue.component("BasicBox", BasicBoxComponent);}
};export default BasicBox;

在组件文件夹下创建index.js, 将组件安装

import BasicBox from "./components/basicBox/index";Vue.use(BasicBox);

再到main.js文件内引入导入的组件

完成后即可在vue所有页面内使用, 不过这种方式只是基础款....其他方式可能更佳

目录结构如下:

Vue 全局组件-卡片型盒子组件相关推荐

Vue详细介绍及使用（组件）
Vue详细介绍及使用一.Vue组件概念 1.基本的概念为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
vue 全局/局部组件
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
vue全局更新以及孙组件调用祖组件（利用provide和inject）
一.前言 1.简介:provide与inject是Vue组件开发当中较为实用的功能. 2.用途:主要用于vue高阶组件的开发,本文将介绍一些provide与inject的一些实用技巧. 3.原理: p ...
vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...
vue组件通信---全局事件总线（任意组件间通信）
描述: 全局事件总线是组件间通信的一种方式,适用于任意组件间通信 1.安装全局事件总线: 在main.js入口文件中完成全局事件总线的安装配置 new Vue({el:'#app',render: h ...
vue --- 全局注册子组件,并导入全局的子组件
假设: 需要一个评论的模块comment 由于comment在多个页面中可能会复用. 于是创建一个comment.vue 步骤: 创建comment.vue 在需要引用的位置使import comme ...
vue防抖注册全局_vue防抖节流函数---组件封装,防止按钮多次点击
/** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} isDebounce [1,3]为 ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...

Vue 全局组件-卡片型盒子组件

首先上效果图

组件编写

Vue 全局组件-卡片型盒子组件相关推荐

最新文章

热门文章