Good点赞
点赞组件通常用在正文末尾,由用户点赞支持该文章;该点赞组件虽然功能唯一,但是之处较为丰富的子元素,除了点赞数字,还支持显示icon、label和tips。
简单使用
点赞常见于文章详细,是目前网络媒体必备的一个小组件。对数字文本用ax-good
标签包裹即可使用本框架的点赞组件。icon
属性可填写点赞图标的样式类。
- 输出
- HTML
-
25 165 -
使用文本
点赞标签有两个文本:label
和tips
。label放在上方,提醒用户点赞;tips放在下方,提示注意事项,比如“已经点赞了”。
- 输出
- HTML
-
25 165 -
完成点赞
追加done
属性表示点赞完成,整个标签状态变灰,但是此时还可以js触发。
- 输出
- HTML
-
165 -
Attributes属性
attributes
属性是标签明面的属性,自定义标签的明面属性就像原生A
标签的href
和target
那样,可直接通过setAttribute
、getAttribute
和removeAttribute
方法进行读写操作。
特别的,对attributes使用setAttribute和removeAttribute操作可能会重组标签的内部HTML结构。
名称 | 可选值 | 默认值 | 说明 |
---|---|---|---|
label | '' | - | 头文本 |
value | '' | - | 点赞值 |
icon | '' | - | 点赞图标 |
tips | '' | - | 尾文本 |
disabled | '' | - | 是否禁用 |
done | '' | - | 是否表示完成 |
Properties属性
properties
属性是标签作为js对象而附着在之上的属性,此时自定义标签可以被理解为像x={a:0,b:()=>{}}
这种普通对象一样,通过x.a
可读取值。
自定义标签的properties的值是因attributes而得来,所以properties应该为只读,不应该企图重置或删除他们。
属性名 | 属性值 | 是否原生 | 说明 |
---|---|---|---|
attributes | 键值对对象 | 是 | 标签的原生属性 |
properties | 普通对象 | 否 | 标签属性数据,包含标签所有可监听的数据,只读 |
propsRaw | 普通对象 | 否 | 标签最初的属性(reset方法的依据) |
propsProxy | 代理对象 | 否 | properties的代理对象 |
observer | Observer实例 | 否 | properties的监听实例,用法可参见ax.Observe |
Methods方法
为了方便对自身处理,自定义标签内置了若干方法:
方法名 | 参数 | 说明 |
---|---|---|
reset | 无 | 根据propsRaw属性重置标签,执行后标签将回归最初状态 |
increase | (step:number,cb:function) | 递增一次点赞。step为点赞一次的步进值,默认为1;cb为回调函数,回调函数支持参数即当前value |