Vue组件，带标题的边框

出于业务需求要做一个这个东西，这叫啥页不知道。。但是做法就是边框上添加字段，elementUI没找到合适的组件，所以用定位写了一个，留下来当轮子用，做成了组件。

目前测试下来适用性还行，底色按需修改即可

组件：

<template><div class="borderTitle"><span>{{title}}</span><slot></slot></div>
</template>
<script>
export default {props:{title:{type:String,default:()=>{return ''}}}
}
</script>
<style lang="less" scoped>
.borderTitle {position: relative;border: 1px solid #dcdfe6;border-radius: 4px;padding: 20px;margin: 10px;> span {position: absolute;left: 20px;top: -11px;width: 80px;text-align: center;font-size: 16px;color: #606266;font-weight: 900;background: #fff;}
}
</style>

使用：

<div><border-titleVue :title="title">任何内容</border-titleVue>
</div>
<script>
import borderTitleVue from './borderTitle.vue'
export default {components: {borderTitleVue,},data(){return{title:'标题',}}
}
</script>

Vue组件，带标题的边框相关推荐

vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒默认的日期选择是没有节日信息的可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
Android自定义带标题边框的Layout
今天工作中又碰到个小问题,项目需要用到像Java Swing的JPanel一样带标题边框的布局,Android里没有类似控件,想到这个也不难,自己画了一个,是继承LinearLayout的一个自定义布 ...
标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
html input dropdown,Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...
vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...
Vue生成带图片logo以及文字的二维码组件，可下载二维码为图片，附组件调用代码--核心qrcode
目录 1.初始化qrcode 2.二维码生成以及下载组件代码可以自己控制是否生成logo以及文字说明 3.父页面调用组件代码 1.初始化qrcode cnpm install --save qrco ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
灵活的Vue组件——原来这么简单
本篇学习目标能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例 1. vue组件 1.0_为什么用组件以前做过一个折叠面板需求: 现在想要多个收起展开 ...
【Vue知识点- No4.】vue组件、组件通信、Todo案例
知识点自测 this指向 let obj = {fn: function(){// this指向此函数的调用者},fn () {// this指向当前函数的调用者 (如果都是在vue里, this指向 ...

Vue组件，带标题的边框

Vue组件，带标题的边框相关推荐

最新文章

热门文章