regular-hotzone/src/components/zone/view.html

Hot Zone of Regular Components

{#if setting}
{#if isEdit}
<li
    r-dragItem
    class={class}
    r-style={{top: zoneTop, left: zoneLeft, width: zoneWidth, height: zoneHeight}}
>
    {#if setting.link}
    <ul class="hz-m-bridge">
        <li class="hz-u-bridge-tl" r-hide={this.notRange(infoBottom, infoRight)}></li>
        <li class="hz-u-bridge-tr" r-hide={this.notRange(infoBottom, infoLeft)}></li>
        <li class="hz-u-bridge-bl" r-hide={this.notRange(infoTop, infoRight)}></li>
        <li class="hz-u-bridge-br" r-hide={this.notRange(infoTop, infoLeft)}></li>
    </ul>
    <ul
        class="hz-m-info"
        r-hide={hideZone}
        on-mousedown={this.stopPropagation($event)}
        r-style={{top: infoTop, bottom: infoBottom, left: infoLeft, right: infoRight, transform: infoTransform}}
    >
        <li>跳转链接：<a href={setting.link} target={setting.target | getTarget} title={setting.link}>{setting.link}</a></li>
        <li>打开方式：{setting.target | jumpWay}</li>
    </ul>
    {/if}
    <ul
        r-changeSize
        class="hz-m-box"
        title="双击设置信息"
        on-dblclick={this.setInfo($event)}
        r-class={{'hz-z-hidden': tooSmall}}
        r-class={{'hz-m-hoverbox': !hideZone}}
        r-class={{'hz-m-settedbox': !!setting.link || !!setting.hasSet}}
    >
        <li class="hz-u-index" title="热区{index + 1}">{index + 1}</li>
        <li class="hz-u-tip" r-hide={hideZone || removeSpacing}>
            {#if setting.link || setting.hasSet}已{#else}双击{/if}设置信息
        </li>
        <li
            title="删除该热区"
            r-hide={hideZone}
            class="hz-u-close hz-icon hz-icon-trash"
            on-click={this.delItem($event, index)}
            on-mousedown={this.stopPropagation($event)}
        ></li>
        <li class="hz-m-btns" r-hide={hideZone} r-style={{'min-width': btnsMinWidth}}>
            <span
                title="单击设置信息"
                class="hz-u-edit hz-icon hz-icon-edit"
                r-style={{'margin': editBtnMargin}}
                r-class={{'hz-small-icon': removeSpacing}}
                on-click={this.setInfo($event)}
                on-mousedown={this.stopPropagation($event)}
            ></span>{#if setting.link && config.showCopy}<span
                class="hz-m-copy"
                r-style={{'margin': copyBtnMargin}}
                on-dblclick={this.stopPropagation($event)}
                on-mousedown={this.stopPropagation($event)}
            >
                <Replicator
                    copyText={setting.link}
                    on-success={this.copySuccess($event)}
                    on-error={this.copyError($event)}
                >
                    <i
                        title="复制链接"
                        class="hz-icon hz-icon-copy"
                        r-class={{'hz-small-icon': removeSpacing}}
                    ></i>
                </Replicator>
            </span>
            {/if}
        </li>
        <li class="hz-u-square hz-u-square-tl" data-pointer="dealTL"></li>
        <li class="hz-u-square hz-u-square-tc" data-pointer="dealTC"></li>
        <li class="hz-u-square hz-u-square-tr" data-pointer="dealTR"></li>
        <li class="hz-u-square hz-u-square-cl" data-pointer="dealCL"></li>
        <li class="hz-u-square hz-u-square-cr" data-pointer="dealCR"></li>
        <li class="hz-u-square hz-u-square-bl" data-pointer="dealBL"></li>
        <li class="hz-u-square hz-u-square-bc" data-pointer="dealBC"></li>
        <li class="hz-u-square hz-u-square-br" data-pointer="dealBR"></li>
    </ul>
</li>
{#else}
<li
    class={class}
    r-style={{top: zoneTop, left: zoneLeft, width: zoneWidth, height: zoneHeight}}
>
    {#if setting.link}
    <ul class="hz-m-bridge">
        <li class="hz-u-bridge-tl" r-hide={this.notRange(infoBottom, infoRight)}></li>
        <li class="hz-u-bridge-tr" r-hide={this.notRange(infoBottom, infoLeft)}></li>
        <li class="hz-u-bridge-bl" r-hide={this.notRange(infoTop, infoRight)}></li>
        <li class="hz-u-bridge-br" r-hide={this.notRange(infoTop, infoLeft)}></li>
    </ul>
    <ul
        class="hz-m-info"
        r-style={{top: infoTop, bottom: infoBottom, left: infoLeft, right: infoRight, transform: infoTransform}}
    >
        <li>跳转链接：<a href={setting.link} target={setting.target | getTarget} title={setting.link}>{setting.link}</a></li>
        <li>打开方式：{setting.target | jumpWay}</li>
    </ul>
    <a class="hz-m-link" href={setting.link} target={setting.target | getTarget}>
        <ul class="hz-m-box hz-m-settedbox" title={setting.link}>
            <li class="hz-u-index" title="热区{index + 1}">{index + 1}</li>
            <li class="hz-u-tip">点击热区跳转</li>
        </ul>
    </a>
    {#else}
    <ul class="hz-m-box">
        <li class="hz-u-index" title="热区{index + 1}">{index + 1}</li>
        <li class="hz-u-tip">未设置链接</li>
    </ul>
    {/if}
</li>
{/if}
{/if}