Good点赞

点赞组件通常用在正文末尾,由用户点赞支持该文章;该点赞组件虽然功能唯一,但是之处较为丰富的子元素,除了点赞数字,还支持显示icon、label和tips。

简单使用

点赞常见于文章详细,是目前网络媒体必备的一个小组件。对数字文本用ax-good标签包裹即可使用本框架的点赞组件。icon属性可填写点赞图标的样式类。

  • 输出
  • HTML
  • 25 165
  •                 
                    
                

使用文本

点赞标签有两个文本:labeltips。label放在上方,提醒用户点赞;tips放在下方,提示注意事项,比如“已经点赞了”。

  • 输出
  • HTML
  • 25 165
  •                 
                    
                

完成点赞

追加done属性表示点赞完成,整个标签状态变灰,但是此时还可以js触发。

  • 输出
  • HTML
  • 165
  •                 
                    
                

Attributes属性

attributes属性是标签明面的属性,自定义标签的明面属性就像原生A标签的hreftarget那样,可直接通过setAttributegetAttributeremoveAttribute方法进行读写操作。

特别的,对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