资讯专栏INFORMATION COLUMN

Vue自定义单选按钮和复选框组件

oysun / 1392人阅读

摘要:做好自己就好了呀问题前段时间接到一个任务,需要做一个自定义的单选和多选按钮,但是之前都是用现成的框架,都不用自己写样式,直接一套就是干但是进公司后,发现部门不适用外部框架,好吧,那我就自己写呗构思我想到的办法是运用原生的和,再通过样式覆盖的

“ 做好自己就好了呀 ”
问题

前段时间接到一个任务,需要做一个自定义的单选和多选按钮,但是之前都是用现成的UI框架,都不用自己写样式,直接一套就是干!但是进公司后,发现部门不适用外部UI框架,好吧,那我就自己写呗!

构思

我想到的办法是运用原生的radio和CheckBox,再通过样式覆盖的方式。

兼容性

由于在写组件时使用了flex布局,so 低版本浏览器不支持的哈,具体有关flex的知识可以学习一下阮大佬的博客:Flex 布局教程:语法篇

废话不多说上代码









以上两个均以组件形式调用哈,只要在父组件中传入相应数据就可以看到效果哦

代码若有瑕疵,请指出,轻喷。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103567.html

相关文章

  • vue2.0学习笔记(表单输入绑定)

    摘要:复选框当选中时当没有选中时这里的和特性并不会影响输入控件的特性,因为浏览器在提交表单时并不会包含未被选中的复选框。 1、基础用法 v-model指令可以实现表单元素和Model中数据的双向数据绑定。只能运用在表单元素中(input、radio、text、address、email、select、checkbox、textarea) 可以用 v-model 指令在表单 、 及 元素上...

    Seay 评论0 收藏0
  • 一套基于vue2.0高质量的UI框架,前期开发中

    摘要:使用属性时选中的值为的值默认值属性类型说明组合中的所有全部禁用默认值属性类型说明组合中所有的尺寸默认值属性类型说明类似这样的数组,其中指定当前项是否选中,为当前项的文字描述默认值组件组件组件组件组件组件组件组件 写在前边 自己在业余时间开发的一套基于vue的UI框架,初衷是在平时的开发过程中,发现有很多业务利用现有的UI框架实现起来比较麻烦,另外自己也希望可以写一套可以尽量多的满足业务...

    explorer_ddf 评论0 收藏0
  • 如何设计高扩展的在线网页制作平台

    摘要:如何设计高扩展的在线网页制作平台本文主要介绍如何设计一个高扩展的在线网页制作平台,会交代一些背景和最终的效果以及核心设计方案。市面上可使用的一些在线制作推广平台制作的页面又不能很好地结合到自己的业务流程里面。 如何设计高扩展的在线网页制作平台 本文主要介绍如何设计一个高扩展的在线网页制作平台,会交代一些背景和最终的效果以及核心设计方案。体验地址: https://godspen.ym...

    dreamans 评论0 收藏0
  • Vue的表单输入绑定

    摘要:表单输入绑定上一篇的事件处理方法下一篇的组件基础用法文本多行文本复选框单个复选框多个复选框,添加到数组里今天明天昨天单选按钮选择列表单选列表请选择如果表达初始的值不匹配任何的选项,元素就会以未选中的状态渲染。 表单输入绑定 上一篇:Vue的事件处理方法:https://segmentfault.com/a/11...下一篇:Vue的组件:https://segmentfault.com...

    Snailclimb 评论0 收藏0

发表评论

0条评论

oysun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<