fx67ll-vue-ui

practice vue components like elementui & do sth different ez to use

Usage no npm install needed!

<script type="module">
  import fx67llVueUi from 'https://cdn.skypack.dev/fx67ll-vue-ui';
</script>

README

fx67llVueUI

practice vue components like elementui & do sth different ez to use

npm

===========================================================================

注意!!! 0.2.2版本之前不支持一次注册使用多个组件!!!

===========================================================================

使用步骤

  1. npm install fx67ll-vue-ui --save
  2. main.js中注册组件
import fx67llVueUI from 'fx67ll-vue-ui'
Vue.use(fx67llVueUI)
  1. 在vue页面中导入使用

组件简介

  1. 网站页脚组件
属性 fontColor:字体颜色,默认值:#bababa
属性 hoverColor:a标签悬浮颜色,默认值:#42b983
属性 zIndex: z-index,默认值:99999
属性 authorName:网站作者名称,默认值:fx67ll
属性 homePage:网站作者主页,默认值:https://fx67ll.com
属性 startYear:网站开始运营年份,默认值:2018,支持字符串和数字,限制四位年份
属性 ipNumber:网站备案号,默认值:皖ICP备18017174号

<fx67ll-footer fontColor="#bababa" hoverColor="#42b983" zIndex="99999" authorName="fx67ll" homePage="https://fx67ll.com" startYear="2018" icpNumber="皖ICP备18017174号"></fx67ll-footer>
  1. 加载进度条组件
属性 progressNum:当前进度百分比,默认值:0
属性 isFinished:加载是否已完成,默认值:false,可选值:false/true
属性 styleType:进度条样式种类,默认值:striped,可选值:striped/gradient/colorful
属性 zIndex:z-index,默认值:99999
属性 bgColor:背景颜色,默认值:#2c303a
属性 textColor:提示文字颜色,默认值:#bababa
属性 stripedFirstColor:条纹颜色一,默认值:#fcbc51
属性 stripedSecondColor:条纹颜色二,默认值:#fca311
属性 gradientFirstColor:渐变颜色一,默认值:#F9BCCA
属性 gradientSecondColor:渐变颜色二,默认值:#aaffff
属性 animationTime:单次动画时间,默认值:0.6

<loading-progress progressNum="0" :isFinished="false" styleType="striped" zIndex="99999" bgColor="#2c303a" textColor="#bababa" 
stripedFirstColor="#fcbc51" stripedSecondColor="#fca311" gradientFirstColor="#F9BCCA" gradientSecondColor="#aaffff" animationTime="0.6"></loading-progress>
  1. 形状组件合集
// 通用公共属性
属性 shapeColor:符号的颜色,十六进制颜色代码
属性 shapeSize:符号的大小,支持数字,包括小数

// 无限符号
<shape-infinity shapeColor="#000000" :shapeSize="1"></shape-infinity>

// 五角星符号
<shape-starfive shapeColor="#000000" :shapeSize="1"></shape-starfive>

// 三角形符号
// type:三角形指向,默认值:down,可选值:down/up/left/right
<shape-triangle type="up" shapeColor="#000000" :shapeSize="1"></shape-triangle>

// 爱心符号
<shape-heart shapeColor="#000000" :shapeSize="1"></shape-heart>

// 太空入侵者
<shape-space-invader shapeColor="#000000" :shapeSize="1"></shape-space-invader>

// 鸡蛋符号
<shape-egg shapeColor="#000000" :shapeSize="1"></shape-egg>

// 吃豆人
<shape-pac-man shapeColor="#000000" :shapeSize="1"></shape-pac-man>

// 钻石符号
<shape-diamond shapeColor="#000000" :shapeSize="1"></shape-diamond>

// 钻石符号
// shapeColor:由于本符号必须由两个颜色组合,所以该参数废弃
// shapeColorYin:阴阳符号阴的颜色,十六进制颜色代码
// shapeColorYang:阴阳符号阳的颜色,十六进制颜色代码
<shape-yinyang shapeColorYin="#000000" shapeColorYang="#000000" :shapeSize="1"></shape-yinyang>

// 十字架符号
<shape-cross shapeColor="#000000" :shapeSize="1"></shape-cross>

// 月亮符号
<shape-moon shapeColor="#000000" :shapeSize="1"></shape-moon>

// 六角星符号
<shape-star-six shapeColor="#000000" :shapeSize="1"></shape-star-six>

// 聊天框
// talkText:聊天框文字  
// textColor:聊天框文字颜色,默认白色(#ffffff)
<shape-talk-bubble talkText="测试文字" textColor="#ffffff" shapeColor="#000000" :shapeSize="1"></shape-talk-bubble>

0.2.22.20211208

  • 修复21版本包提交失败问题,0.2.21版本为废弃版本
  • 修复加载进度条组件百分百之后隐藏异常的问题
  • 删除不必要中文字体包文件

0.2.20.20211207

  • 修复加载进度条组件当前进度百分比为零会验证参数异常的问题

0.2.19.20211207

  • 修复页脚组件网站作者主页字段验证错误问题
  • 修复加载进度条组件加载完成后不隐藏加载页面的问题

0.2.18.20211207

  • 修复16/17版本包提交失败问题,0.2.160.2.17版本均为废弃版本,请在0.2.18版本中使用上述两个新组件
  • 完成网站页脚组件的封装,可以设置字体颜色、a标签悬浮颜色、z-index、网站作者名称、网站作者主页、网站开始运营年份、网站备案号
  • 完成加载进度条组件的封装,可以设置当前进度百分比、加载是否已完成、进度条样式种类、z-index、背景颜色、提示文字颜色、条纹颜色一、条纹颜色二、渐变颜色一、渐变颜色二、单次动画时间
  • 添加less中动画的封装,现已支持在less中直接使用animation,定义keyframe的方式稍稍有点区别,示例如下:
.keyframes(all, animationName, {
        from {
            width: 0%;
        }

        to {
            width: 100%;
        }
    }
);

0.2.15.20210624

  • 完成纯CSS3绘制的 聊天框 组件组件的封装,可以设置 聊天框 组件的颜色和大小,以及传入聊天框宽度、简易的文字内容和文字颜色
  • 后期考虑 丰富 聊天框 组件的用途,并用考虑如何用正则验证传入的宽度格式
  • 后续版本 一键回顶组件
  • 远期版本 右键菜单组件

0.2.14.20210623

  • 完成纯CSS3绘制的 六角星符号 组件的封装,可以设置 六角星 的颜色和大小

0.2.13.20210622

  • 完成纯CSS3绘制的 月亮符号 组件的封装,可以设置 月亮 的颜色和大小

0.2.12.20210621

  • 完成纯CSS3绘制的 十字架符号 组件的封装,可以设置 十字架 的颜色和大小

0.2.11.20210615

  • 完成纯CSS3绘制的 阴阳 组件的封装,可以设置 阴阳 的颜色和大小

0.2.10.20210611

  • 完成纯CSS3绘制的 钻石符号 组件的封装,可以设置 钻石 的颜色和大小

0.2.9.202106010

  • 完成纯CSS3绘制的 吃豆人 组件的封装,可以设置 吃豆人 的颜色和大小

0.2.8.20210609

  • 完成纯CSS3绘制的 鸡蛋符号 组件的封装,可以设置 鸡蛋符号 的颜色和大小

0.2.7.20210608

  • 完成纯CSS3绘制的 太空入侵者 组件的封装,可以设置 太空入侵者 的颜色和大小

0.2.6.20210607

  • 完成纯CSS3绘制的 爱心符号 组件的封装,可以设置 爱心 的颜色和大小

0.2.5.20210603

  • 后续的话功能过于复杂,且能够独立发挥较大作用的的组件单独提供,简单的或者个人使用的特殊组件继续在本组件库中整合
  • 完成纯CSS3绘制的 三角形符号 组件的封装,可以设置 三角形 的指向,颜色和大小

0.2.4.20210531

  • 综合考虑下,该控件整合自己写过的所有控件,暂不提供按需加载的功能
  • 不过某些比较有意思的控件仍然在npm上提供单独下载

0.2.3.20210514

  • 修复文档错误

0.2.2.20210514

  • 完成一次注册使用多个组件
  • 0.2.2版本之前不支持一次注册使用多个组件

0.2.1.20210513

  • 完成纯CSS3绘制的 五角星符号 组件的封装,可以设置 五角星 的颜色和大小

0.2.0.20210420

  • 去除不必要的依赖,减少安装时间
  • 添加MIT的软件使用许可证

0.1.1.20210420

  • 完成纯CSS3绘制的 无限符号 组件的封装,可以设置 无限 的颜色以及大小
  • 测试单组件发布到npm上的全流程

0.1.0.20210419

  • 模仿elementui的组件库做一个自己的vue组件库
  • 同时用于练习在npm上面发包
  • 锻炼自己制作复杂公共vue组件的能力,为个人项目提供方便
  • 自己写的性能肯定没法和主流的组件库媲美,我对自己的要求是先模仿一些基础的功能,再力求每个组件上能有一些不同的独特的功能点