Skip to content

Latest commit

 

History

History
197 lines (163 loc) · 7.7 KB

README_ZH.md

File metadata and controls

197 lines (163 loc) · 7.7 KB
Raw

hotspot-vue3 · npm yarn github

VUE3 + TS 项目的热区生成工具 english docs

image

演示示例请点击 !

插件安装

yarn add hotspot-vue3

# or

npm install hotspot-vue3 --save

插件使用

  • 在业务组件文件中引入
import Hotspot from "hotspot-vue3";
  • 在你的业务代码中，按正常组件使用即可
<template>
  <div class="hotapp">
    <hotspot
      :image="image"
      :zonesInit="zones"
      :types="types"
      :minSize="52"
      :switchOptions="{
        isShowSign: true,
        isShowDelete: true,
        isOverlap: false,
        isShowActive: true
      }"
      :styleOptions="{}"
      @add="handleAdd"
    >
      <!-- <template #sign="{ zone, index }">
        {{ zone }}
        {{ index }}
      </template>
      <template #delete="{ index }">
        {{ index }}
      </template> -->
    </hotspot>
    <div class="hotapp__display">
      <button type="primary" @click="handleAdd">添加热区</button>
      <input
        type="text"
        v-for="(zone, index) in zones"
        :key="index"
        v-model="zone.url"
        :placeholder="`Area ${index + 1} url`"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Hotspot from "hotspot-vue3";

type MoreUrl = {
  [key in string | number]: string;
};
interface ZoneType {
  topPer: number;
  leftPer: number;
  widthPer: number;
  heightPer: number;
  url?: string | MoreUrl;
  active?: boolean;
  key?: string;
}

@Options({
  components: {
    Hotspot
  }
})
export default class App extends Vue {
  // image url
  image =
    "https://github.com/shadow-Fiend/readme_image/blob/master/big_fish.jpeg";
  zones = [] as ZoneType[];
  types = "move";

  handleAdd(zon: ZoneType) {
    let zone: ZoneType;
    if (zon.topPer) {
      // 存在此参数,则通过拖动创建热区
      zone = zon;
      zone.url = "https://github.com/shadow-Fiend";
      this.types = "move"; // 存在max热区时，验证通过拖动或点击达到max
    } else {
      //通过按钮创建热区
      zone = {
        heightPer: 0.2027, //20.27%
        leftPer: 0.2027,
        topPer: 0.2027,
        widthPer: 0.1027,
        url: "https://github.com/shadow-Fiend",
        key: String(Math.random())
      } as ZoneType;
      this.types = "btn"; // 存在max热区时，验证通过拖动或点击达到max
    }
    this.zones.push(zone); // 热区数据
  }
}
</script>

<style lang="scss" scoped>
.hotapp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 555px;
  min-width: 1000px;

  &__display {
    margin-top: 24px;

    > input {
      margin-left: 10px;
    }
  }
}
</style>

参数说明

如示例代码所示，直接引入该组件，其他的功能全部通过属性来进行控制即可。

接下来就跟大家讲下每个属性的意义：

Hotspot Attributes

属性 描述 类型 可接受的参数 默认值
image 热区底图 url 地址 String
zonesInit 热区内容, 为数组形式 Array topPer、leftPer、widthPer、heightPer、url、active、key
max 即当前热区最大显示数量，不设置则可以无限新增 Number
types 新增热区的方式 String move: 通过鼠标拖动生成, btn: 通过自定义按钮点击生成
switchOptions 热区开关属性 Object isShowSign、isShowDelete、isOverlap、isShowActive
styleOptions 热区展示的一些色值属性 Object zoneBorderColor、zoneBgColor、zoneActiveBgColor

ZonesInit Atributes

属性 描述 类型 可接受的参数 默认值
topPer 距离顶部占整体区域百分比 Number
leftPer 距离左侧占整体区域百分比 Number
widthPer 热区宽度占整体区域百分比 Number
heightPer 热区高度占整体区域百分比 Number
url 热区链接地址, 可以自己定义对象保存更多的参数 String / any
active 热区激活状态 Boolean / undefined false / undefined
key 热区 key, 用来做唯一标识 String Math.random()

SwitchOptions Atributes

属性 描述 类型 可接受的参数 默认值
isShowSign 是否展示热区标识 Boolean true
isShowDelete 是否展示热区删除标识 Boolean true
isOverlap 热区之间是否允许覆盖 Boolean false
isShowActive 点击热区是否展示激活状态 Boolean true

StyleOptions Atributes

属性 描述 类型 可接受的参数 默认值
zoneBorderColor 热区边框颜色 String #507bfb
zoneBgColor 热区背景颜色 String rgba(80, 123, 251, 0.1)
zoneActiveBgColor 激活状态下热区背景颜色, 只有 isShowActive 属性为 true 时生效 String rgba(80, 123, 251, 0.4)

写在最后

至此，插件的所有使用方法就介绍完了。

该插件仅支持 Vue3.x 的项目。。。

想进一步了解插件源码的请移步插件的 GitHub 仓库：hotspot-vue3