anchor-img 标签图片

解释：标签图片组件，控制展开显示标签以及点击标签获取当前标签信息。可支持 aspectFit 和 widthFix 两种图片模式，支持自动计算标签方向，支持更改标签颜色和风格。

成都创新互联10多年成都企业网站建设服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,成都企业网站建设及推广,对成都混凝土泵车等多个方面拥有丰富的网站制作经验的网站建设公司。

属性说明

属性名	类型	必填	默认值	说明
url	String	是		标签图片地址
originWidth	Number	是		图片原始宽度
originHeight	Number	是		图片原始高度
list	Array	是		标签数组。例：`[{type: ‘default’,ordinate: 100,abscissa: 200, position: ‘left’,text: ‘测试’}]`
mode	String	否	widthFix	标签图片模式。目前只支持 widthFix 和 aspectFit
showAnchor	Boolean	否	true	是否默认展开标签
maxFontCount	Number	否	6	允许显示的标签最大字数，多余省略。position 为空时用于计算左右方向
textColor	Color	否	#fff	标签文本颜色
tagColor	Color	否	rgba(0，0，0，0.6)	标签背景色
fontSize	Number	否	12	标签字号大小
roundSize	Number	否	10	圆点直径，与标签连线长度一致
needHandler	Boolean	否	true	是否需要控制器
handlerSize	Number	否	15	控制器图标宽 / 高
active	EventHandle	否		点击某个标签触发

list 标签数组有效值

属性名	类型	必填	默认值	说明
type	String	否	default	标签的风格类型，默认为不带商品图标，值为 primary 时带商品图标
abscissa	Number	是	0	标签相对于原图的位置横坐标
ordinate	Number	是	0	标签相对于原图的位置纵坐标
position	String	否		标签相对于圆点的方向。left：朝左；right：朝右。不传会根据 maxFontSize 及 fontSize 计算
text	String	是		标签文本

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
JSON

 
 
 
  
  
    
  
   
  
  
   mode="widthFix"  
  
   url="{{img}}"  
  
   origin-width="{{originWidth}}"  
  
   origin-height="{{originHeight}}"  
  
   max-font-count="6"  
  
   list="{{list}}"  
  
   bind:active="activeAnchorImg"  
  
   >

                                                

                                                标题名称：创新互联百度小程序教程：anchor-img标签图片                                                

                                                链接URL：http://www.jxjierui.cn/article/cdepisc.html


                                            
                                                
                                                    其他资讯
                                                
                                                
                                                    
                                                        
                                                                信息化管理的安全稳定需要数据加密支持
                                                            

                                                                广电网络如何访问路由器设置密码
                                                            

                                                                域名买了，怎么买空间，空间指得什么？（vps如何放置网站）
                                                            

                                                                cloudways购买(vivo账号激活需要多久？)
                                                            

                                                                HTML5基础之初试锋芒