DataV在vue cli上的安装和自定义修改样式

最新推荐文章于 2024-03-27 15:54:30 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2024-03-27 15:54:30 发布

阅读量6.2k

点赞数 6

分类专栏： CSS DataV vue lic 文章标签： css

本文链接：https://blog.csdn.net/Yueqin0512/article/details/118302968

版权

5 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

npm install @jiaminghi/data-view

import dataV from ‘@jiaminghi/data-view’
Vue.use(dataV)

<dv-border-box-10>dv-border-box-10</dv-border-box-10>

这边把背景设置成深色比较好看，如果里面要放element ui中的表格什么的建议把el-table背景设置成透明
在这里插入图片描述
当然，默认样式满足不了开发的需求，于是！

<dv-border-box-10 :color="['#5378a2', '#FFF']">
</dv-border-box-10>

在这里插入图片描述

默认：

<dv-border-box-11 title="dv-border-box-11">dv-border-box-11</dv-border-box-11>

在这里插入图片描述

修改后（边框颜色，title字体颜色和大小）：

 <dv-border-box-11 title="待入库清单" class="border11" :color="['#BFD3FF']" style="height: 98%; width: 100%;">
 </dv-border-box-11>

// title字体颜色和大小修改
.border11 text.dv-border-box-11-title[fill] {
    fill: red;
    font-size: 25px;
}

在这里插入图片描述

修改后：

<dv-decoration-8 :reverse="true" style="width: 300px; height: 70px;" :color="['#C4D6FF','#C4D6FF']" />

在这里插入图片描述

关注

专栏目录