El-radio
源码部分
这几句都是用来为不方便的人士提供的功能,比如屏幕阅读器,role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button。 aria的意思是Accessible Rich Internet Application,aria-*的作用就是描述这个tag在可视化的情境中的具体信息
props部分
逻辑部分
注意到这里有个this.dispatch api
这个是借助了发布订阅模式来父子组件函数调用 这个方法写在了mixins里
需要注意的是这里需要使用apply来让函数的this指向指定的组件实例
从templete 我们好像没有看到有@input方法 也没有@click点击事件,为啥就能触发父组件的@input方法呢?
答案就在 v-model
当我们点击该input时 会触发该input的@input 从而调用了model的set方法
这里显示的重写set方法是为了书写更多的业务逻辑!
而input在这里是绝对定位、不可见的
这里需要注意的是:只有opacity才能保留事件
同时
样式部分:
主要看选中状态的变化
小圆球效果 利用了伪元素的缩放初始时为0
选中后,大圈改变背景颜色,伪元素缩大原来大小 从而实现提示效果
EL-Radio-group
源码结构****
可见group结构还是很简单的
逻辑部分
radio组件
Value的传递方向:radio借助dispatch获取到指定的父组件实例 然后调用父组件this.$on监听的handleChange事件 然后在grounp组件中对value进行监听 并再次借助dispatch传给form的item组件
注意:在涉及到父子组件插槽时父组件实例获取有两种方式
1. 通过provide/inject
2. 通过this.$parent.componentName+while