点标签 dot-tag

引用组件，请参考说明文档，下面的引入只是作为演示，实际引入路径，请根据您的项目架构更改。

"usingComponents": {
    "dot-tag" : "/packageB/components/dot-tag/dot-tag"
}

基础使用

<view class="m-2 img-dot-tag">
    <ui-img ui="radius border" src="{{imgA}}"/>
    
    <dot-tag name="ColorUI" ui="dot-tag-right" animation right bind:tagTap="tapDotTag"/>
    
    <dot-tag ui="dot-tag-bottom" animation bottom bind:tagTap="tapDotTag">
        <text class="cicon-creative"/>
        <text class="ml-2">加点图标</text>
    </dot-tag>
    
    <dot-tag name="组件库" ui="dot-tag-top" animation top bind:tagTap="tapDotTag"/>
    
    <dot-tag name="MP-CU" ui="dot-tag-left" animation left bind:tagTap="tapDotTag"/>
</view>

尺寸

给 ui 参数，添加 sm lg xxl ，控制尺寸。

<view class="m-2 img-dot-tag">
    <ui-img ui="radius border" src="{{imgB}}"/>

    <dot-tag name="组件库" ui="dot-tag-right lg" animation right/>

    <dot-tag name="点标签点标签" ui="dot-tag-bottom xxl" animation bottom/>

    <dot-tag name="MP-CU" ui="dot-tag-top" animation top/>

    <dot-tag name="ColorUI" ui="dot-tag-left sm" animation left/>
</view>

拖动

<view class="m-2 img-dot-tag">
    <!-- movable-area参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html -->
    <movable-area style="width: 100%; height: 154px;">
        <ui-img ui="radius border" src="{{imgC}}"/>
        <movable-view x="{{x}}" y="{{y}}" direction="all" style="height: auto;width: auto;" bindchange="movableChange">
            <dot-tag name="拖动" animation right/>
        </movable-view>
    </movable-area>
</view>

TIP

采用了微信官方的 movable-area 、movable-view 容器搭配实现的拖动效果。

坐标

有 x，y 坐标参数，可以根据拖动的参数，设置标签所在的位置，如果发现点，有偏移，可使用 dot="0" 设置偏移量

<view class="m-2 img-dot-tag">
    <ui-img ui="radius border" src="{{imgD}}"/>
    <dot-tag name="坐标" x="{{x}}" y="{{y}}" dot="1" animation right/>
</view>

数据格式

Page({
    data: {
        imgA: '', imgB: '', imgC: '', imgD: '', x: 60, y: 40,
    },
    onLoad() {
        let list = [];
        for(let i = 1; i< 15; i++) {
            let url = i  < 10 ? '0' + (i) : i;
            list.push('https://cos.color-ui.com/wallpaper/10' + url + '.jpg');
        }
        let imgA = this.getImage(list);
        let imgB = this.getImage(list);
        let imgC = this.getImage(list);
        let imgD = this.getImage(list);
        this.setData({
            imgA: imgA,
            imgB: imgB,
            imgC: imgC,
            imgD: imgD
        })
    },
    getImage(list) {
        return list[Math.floor(Math.random() * list.length)];
    },
    tapDotTag(e) {
        console.log('点击了：' + e.detail)
    },
    movableChange(e) {
        this.setData({
            x: e.detail.x,
            y: e.detail.y
        })
    },
})

参数

name 参数不设置时，开启默认插槽。

参数	类型	可选值	默认值	说明
ui	String	-	-	其它class样式
bg	String	-	-	背景class
tagUi	String	-	-	标签样式
name	String	-	-	名称
top	Boolean	-	false	点在上面
left	Boolean	-	false	点在左边
right	Boolean	-	false	点在右边
bottom	Boolean	-	false	点在下面
animation	Boolean	-	false	点动画效果
x	Number/String	-	-	x轴坐标
y	Number/String	-	-	y轴坐标
dot	Number/String	-	-	点偏移
bind:tagTap	Event	-	event.detail = name	标签被点击