【自己写的npm_vue_UI插件】

折桂怀橘

已于 2023-03-10 09:42:41 修改

阅读量101

点赞数

分类专栏：前端相关知识文章标签： npm ui javascript

于 2023-03-01 15:36:32 首次发布

本文链接：https://blog.csdn.net/weixin_42910765/article/details/129282121

版权

前端相关知识专栏收录该内容

81 篇文章 8 订阅

订阅专栏

目的：做项目的时候，特别是大数据这种界面需要好看的框框去美化，如果没有UI美工的帮助，前端自己是很不容易, 又因为如果直接以图片的方式引用svg 不能改变内层svg的属性 ,但是以下引用方式都不能满足我的需求（svg的大小，内部背景颜色或者线条的颜色根据外部传入的值更改），最后我写了一个npm插件 ✌

自己研发的UI美化插件目前还在继续做 ✌

使用方式

npm install wxb_ui

在这里插入图片描述

可传入变量

高度：height （必须）
宽度：width （不设置的话默认是100%）
颜色 :color=“[‘#00c0ff’, ‘#00fff0’]” 分为主色和配色数组中一个是主色第二个是配色
背景色：backgroundColor （部分有背景色）
有插槽（重点提醒）

<div id="app">
        <Xbline11 style="height:80px;">line11</Xbline11>
     
        <Xbline10 style="height:80px;">line10</Xbline10>
     
        <Xbline9 style="height:80px;">line9</Xbline9>
       
        <Xbline8 style="height: 80px;">line8</Xbline8>
      
        <Xbline7 style="height: 60px;">line7</Xbline7>
      
        <Xbline6 style="height: 560px;">line6</Xbline6>
      
        <Xbline5 style="height: 60px;">line5</Xbline5>
      
        <Xbline4 style="height: 30px;">line4</Xbline4>
       
        <Xbline3 style="height: 50px;">line3</Xbline3>
      
        <Xbline2 style="height: 20px;">line2</Xbline2>
        
        <Xbline1 style="height: 20px;">line1</Xbline1>
      
        <Box14 style="height: 120px;">box14</Box14>
       
        <Box13 style="height: 120px;">box13</Box13>
       
        <Box11 style="height: 120px;">box11</Box11>
      
        <Box12 style="height: 100px;">box12</Box12>
      
        <Box10 style="height: 100px;">box10</Box10>
       
        <Box9 style="height: 100px;">box9</Box9>
       
        <Box8 style="height: 100px;">box8</Box8>
       
        <Box7 style="height: 100px;">box7</Box7>
        
        <Box6 style="height: 100px;">box6</Box6>
       
        <Box5 style="height: 180px;">box5</Box5>
      
        <Box1 style="height: 150px;width: 480px;" :color="['#00c0ff', '#00fff0']">1</Box1>
       
        <Box2 style="height: 150px;width: 480px;" :backgroundColor="`#99dfdf`">2</Box2>
       
        <Box3 style="height: 150px;width: 480px;">box3</Box3>
        
        <Box4 style="height: 150px;width: 480px;">box4</Box4>

    </div>

在这里插入图片描述

    <threeLine style="height:380px"></threeLine>
props: {
        color: {
            type: Array,
            default: () => { [] },

        },
        backgroundColor: {
            type: String,
            default: '#dddddd'
        },
        fontSize: {
            type: String,
            default: '16px'
        },
        textName: {
            type: Array,
            default: function () {
                return ['name1', 'name2']
            }
        },
        control3d: {
            type: Boolean,
            default: true

        }

    },

在这里插入图片描述


     <TextStroke3d style="height:580px"></TextStroke3d>
 props: {
        color: {
            default: 0x00ffc0, //字体颜色
        },
        backgroundColor: {
            default: 0xF0f0f0  // 背景颜色
        },
        txt: {
            type: String,  // 显示内容
            default: '#wxb\n hello'
        },
        control3d: {
            type: Boolean,
            default: true  // 是否有鼠标控制3d旋转

        }

    },

在这里插入图片描述

     <GeometryText style="height:300px"></GeometryText>
     参数
      color: {
            default: 0x00ffc0, //字体颜色
        },
        backgroundColor: {
            default: 0xF0f0f0 // 背景颜色
        },
        txt: {
            type: String,
            default: '#wxbhello'  //显示的字体
        },
        fontSize: {
            type: String,
            default: '120'  //字体大小 0最小
        },
        control3d: {
            type: Boolean,
            default: false  // 是否有鼠标控制3d旋转

        }