JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q64420F
  • License MIT

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

Package Exports

  • fx67ll-vue-ui
  • fx67ll-vue-ui/lib/fx67ll-vue-ui.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fx67ll-vue-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.20.20211207

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

0.2.19.20211207

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

0.2.18.20211207

  • 紧急修复发布中忘了打包的问题，0.2.16和0.2.17版本均为废弃版本，请在0.2.18版本中使用上述两个新组件

0.2.17.20211207

  • 完成加载进度条组件的封装，可以设置当前进度百分比、加载是否已完成、进度条样式种类、z-index、背景颜色、提示文字颜色、条纹颜色一、条纹颜色二、渐变颜色一、渐变颜色二、单次动画时间
  • 添加less中动画的封装，现已支持在less中直接使用animation，定义keyframe的方式稍稍有点区别，示例如下：
.keyframes(all, animationName, {
        from {
            width: 0%;
        }

        to {
            width: 100%;
        }
    }
);

0.2.16.20211206

  • 可以设置字体颜色、a标签悬浮颜色、z-index、网站作者名称、网站作者主页、网站开始运营年份、网站备案号

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.1.20210513

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

0.2.0.20210420

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

0.1.1.20210420

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

0.1.0.20210419

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