ElementUI组件系列解读之<Radio/Group>

286 阅读1分钟

El-radio

源码部分   图片25.png

图片26.png

这几句都是用来为不方便的人士提供的功能,比如屏幕阅读器,role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button。 aria的意思是Accessible Rich Internet Application,aria-*的作用就是描述这个tag在可视化的情境中的具体信息

props部分

图片27.png

  逻辑部分

图片28.png

注意到这里有个this.dispatch api

这个是借助了发布订阅模式来父子组件函数调用  这个方法写在了mixins里

图片29.png

需要注意的是这里需要使用apply来让函数的this指向指定的组件实例

 

从templete 我们好像没有看到有@input方法 也没有@click点击事件,为啥就能触发父组件的@input方法呢?

答案就在 v-model

图片30.png

当我们点击该input时 会触发该input的@input 从而调用了model的set方法

  图片31.png

这里显示的重写set方法是为了书写更多的业务逻辑

 

而input在这里是绝对定位、不可见的

图片32.png

 

这里需要注意的是:只有opacity才能保留事件  

同时

图片33.png

样式部分

主要看选中状态的变化

图片34.png

小圆球效果 利用了伪元素的缩放初始时为0

图片35.png

选中后,大圈改变背景颜色,伪元素缩大原来大小 从而实现提示效果

 

EL-Radio-group

源码结构****

  图片36.png

可见group结构还是很简单的

逻辑部分

图片37.png

图片38.png

radio组件

图片39.png

Value的传递方向:radio借助dispatch获取到指定的父组件实例 然后调用父组件this.$on监听的handleChange事件  然后在grounp组件中对value进行监听 并再次借助dispatch传给form的item组件

注意:在涉及到父子组件插槽时父组件实例获取有两种方式

1. 通过provide/inject

2. 通过this.$parent.componentName+while