mint-UI checkList 样式结合checkBox实现全选反选单选

浏览器自带的checkbox样式在移动端的视觉效果很差,这次我们结合mint-UI的checklist中chebox的样式来实现一个简单的选择项的全选,反选和多选。

先看下html的代码:


html代码实现

参照mint-UI 中checkList的样式,具体的checklist的实例可以查看链接http://elemefe.github.io/mint-ui/#/checklist。上述html代码里lable标签中包括的都是用来实现自定义chebox样式的。实现效果如下图:


chebox样式

话不多说,全选和反选的实现代码如下:


利用watch来监听checked变化

关于watch的用法参照https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8

实现全选的效果如下:


全选效果图

单选和全选按钮之间的变化代码就不贴出来了,读者可以自己来实现练手。欢迎交流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/db7...
    TigerChain阅读 64,852评论 5 81
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,018评论 1 45
  • 读“通往财富自由之路”,只精读到了“抱怨”这个章节就停下来了,发的这些文字都是存货。 在已读过的章节中,“注意力”...
    蔡哥书觞阅读 4,705评论 1 5
  • 1. 他对着爱慕已久的她说和我交往吧。 她笑着说交往可以啊 她的笑容很美丽 他点点头,牵起了她的手,紧紧的握着,仿...
    猪子阅读 1,696评论 1 0
  • 秋山利辉出生于1943年。他在27岁时创办了“秋山木工”,如今秋山木工是日本皇家指定的家具供应商,日本政府和各大美...
    蜗牛蜗居阅读 2,885评论 0 0