按钮

基于MpIcon实现，提供 click 事件和文本 tip 功能。

代码演示

<template>
  <div>
    <mp-button :icon="iconSvg" label="查询" />
    <mp-icon :icon="iconImg" label="编辑" :zIndex="5000" />
  </div>
</template>

<script>
export default {
  data() {
    return {
     iconSvg: "<svg class=\"icon\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"200\"><defs><style/></defs><path d=\"M89.6 554.667H0c21.333 247.466 217.6 448 469.333 465.066V934.4C268.8 917.333 106.667 755.2 89.6 554.667zm0-85.334C106.667 268.8 268.8 106.667 469.333 89.6V4.267C221.867 21.333 21.333 221.867 0 469.333h89.6zm844.8 0h85.333c-17.066-247.466-217.6-448-465.066-465.066V89.6C755.2 106.667 917.333 268.8 934.4 469.333zm0 85.334C913.067 755.2 755.2 917.333 554.667 934.4v85.333c247.466-21.333 448-217.6 469.333-465.066h-89.6z\"/><path d=\"M213.333 384l128-42.667L435.2 435.2 597.333 256l213.334 106.667v298.666l-170.667-64-170.667 128-128-85.333-128 85.333z\"/></svg>",
     iconImg: 'http://www.mapgis.com/wcs/Tpl/home/default/images/logo.jpg'
    }
  }
}
</script>

API

MpButton

属性

参数	说明	类型	默认值
icon	图标内联 svg 或外部图片地址	String	-
label	tip 文本	String	-
zIndex	tip 的 z-index	Number	2000

事件

事件名称	说明	回调参数
click	点击后触发	() => {}