uni-app中兴趣标签选择

布满荆棘的人生 2021-11-09 05:38 407阅读 0赞

因项目需求，研发了基于uni-app微信小程序的标签选择，支持多选，最多选8个。 使用步骤： 一. 在项目根目录新建components,将drag-ball组件放入该目录 二. 在需要用到的页面引入该组件即可。

ps: 该组件还可以优化，请看到的大佬有兴趣帮忙优化， 方便更多的开发者。谢谢大家了！ 有兴趣加个好友，交流web前端技术，加群：648802995 !我本人联系方式 19807198428, 微信同号！

组件引用

import dragBall from’…/…/componets/drag-ball/drag-ball.vue’;

export default\{

components:\{dragBall\},

data() \{

return\{onInit:\[\{“x”:79.45049232358554,“y”:123.96125634387865,“radius”:30,“color”:\["\#787878","’\#25AEBF’"\],“colse”:false,“size”:“10”,“floating”:\[0,false\],“name”:“高富帅”\},\{“x”:198.76606872737423,“y”:79.28588367513791,“radius”:30,“color”:\["\#787878","\#25AEBF"\],“colse”:false,“size”:“10”,“floating”:\[0,false\],“name”:“琼瑶”\},\{“x”:290.5796037054993,“y”:108.66399668264214,“radius”:40,“color”:\["\#787878","\#25AEBF"\],“colse”:false,“size”:“15”,“floating”:\[0,false\],“name”:“选择困难症”\},\{“x”:152.08387466634375,“y”:132.84566053159986,“radius”:40,“color”:\["\#787878","\#25AEBF"\],“colse”:false,“size”:“15”,“floating”:\[0,false\],“name”:“背包客”\},\{“x”:222.67202922307413,“y”:134.93094592803268,“radius”:30,“color”:\["\#787878","\#25AEBF"\],“colse”:false,“size”:“10”,“floating”:\[0,false\],“name”:“非洲酋长”\},\{“x”:287.6493903164786,“y”:188.97865661799298,“radius”:40,“color”:\["\#787878","\#25AEBF"\],“colse”:false,“size”:“15”,“floating”:\[0,false\],“name”:“轻音乐”\},\{“x”:107.73067038886846,“y”:187.2797271941687,“radius”:30,“color”:\["\#787878","\#25AEBF"\],“colse”:false,“size”:“10”,“floating”:\[0,false\],“name”:“烘焙”\}\],colse:false,x:320 \}\},

onLoad() \{ \},

methods:\{

click()\{

this.colse=true

this.x=0;

\},

click\_(index)\{ \}

组件参数

属性名类型说明

xNumber球初始X轴

yNumber球初始Y轴

radiusNumber球的半径

colorArray\[初始颜色，变化颜色\]

colseBoolean球颜色初始设定

sizeString文字大小(最好为球的radius一半)

floatingArray\[0,false\]

nameString球里的字.

项目效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMzgwNTg_size_16_color_FFFFFF_t_70]

项目github直通车：[https://github.com/zengpanzp/uni-app][https_github.com_zengpanzp_uni-app]

uni-app的Dcloud插件市场地址：[http://ext.dcloud.net.cn/plugin?id=557][http_ext.dcloud.net.cn_plugin_id_557]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMzgwNTg_size_16_color_FFFFFF_t_70]: /images/20211109/03918de454684796a9b905e5e302987a.png
[https_github.com_zengpanzp_uni-app]: https://github.com/zengpanzp/uni-app
[http_ext.dcloud.net.cn_plugin_id_557]: http://ext.dcloud.net.cn/plugin?id=557