UI组件开发
文章平均质量分 71
明月别枝
分享经验,一起学习,一起进步
展开
-
艺术二维码生成插件,内附小程序版
给大家分享一个可以生成艺术二维码的插件,内附小程序版。预览地址: http://yating.online/art-qrcode/艺术二维码生成原理https://blog.csdn.net/lemisi/article/details/88831289艺术二维码插件:普通版git地址:https://github.com/Chenyating/wx-art-qrcode下载方式npm i art-qrcode使用方法import "artQRCode.js";var qrBox =原创 2021-06-17 09:06:18 · 753 阅读 · 2 评论 -
清新UI组件库——select组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uiselect组件遇到的问题思路:单选跟多选,就是radio跟checkbox的结合体;条件判断,是否可以多选。z-index失效的原因:父级元素position可能是relative,或者是没有position;元素存在float属性解决办法:position设置部位relative去掉float,清除浮动,浮动元素设原创 2020-07-01 11:09:03 · 424 阅读 · 0 评论 -
清新UI组件库——radio组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uiradio组件遇到的问题互斥问题相同radio的name一致的时候可以实现互斥问题。name取名字:const now = Date.now();let num = 0;const radomName = () => { return `ifRadio_${now}_${num++}`}radio-grou原创 2020-07-01 11:07:24 · 345 阅读 · 0 评论 -
清新UI组件库——page组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uipage组件遇到的问题返回的页面数问题当页面过于长的时候,可以这样显示。页面数小于等于6,就默认遍历1-6页面数大于6时,如果当前页小于2或者大于总页数-2:返回数组为[1,2,3,……,page-1,page]页面数大于6时,如果当前页为中间值:返回数组为[……,current-1,current,current+1,……]原创 2020-07-01 11:05:43 · 390 阅读 · 0 评论 -
清新UI组件库——checkboxt组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uicheckbox组件遇到的问题跟radio性质差不多。当为checkbox组的时候,值的类型为array;判断当单个值的时候。先判断value是否存在,再判断是否为boolean,选中取反。值为label;修改样式checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式.当点击的原创 2020-07-01 11:03:27 · 266 阅读 · 0 评论 -
清新UI组件库——开发组件库准备
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-ui开发组件库准备准备vscode语言框架:vue,vuepress,vue-cli3,less参考框架: iview-ui,element-ui开发定位风格:小清醒,简洁颜色:主打绿,底白色字体:oppo字体免费商用新建项目全局安装npm install -g @vue/cli 或 yarn global ad原创 2020-07-01 11:00:17 · 406 阅读 · 0 评论 -
清新UI组件库——input组件开发思路
清新组件库:http://ifresh-ui.yating.online/源码地址:https://github.com/Chenyating/iFresh-uiinput组件遇到的问题v-model问题外部value变化,input的值没有变化?[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mV2HarjW-1593572054748)(/img/bVbIVRS)]先理解v-model的性质<input v-model="searchText">原创 2020-07-01 10:57:02 · 464 阅读 · 0 评论