点标签 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-areaopen in new windowmovable-viewopen in new window 容器搭配实现的拖动效果。

坐标

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 参数不设置时,开启默认插槽。

参数类型可选值默认值说明
uiString--其它class样式
bgString--背景class
tagUiString--标签样式
nameString--名称
topBoolean-false点在上面
leftBoolean-false点在左边
rightBoolean-false点在右边
bottomBoolean-false点在下面
animationBoolean-false点动画效果
xNumber/String--x轴坐标
yNumber/String--y轴坐标
dotNumber/String--点偏移
bind:tagTapEvent-event.detail = name标签被点击

mp-cu

上次更新: