<template>
  <div style="display: inline-block;">
    <van-icon @click.stop="show = true" :name="get_icon" />
    <div v-show="show" class="small_tip_content" :style="'left:' + get_position">
      <slot></slot>
    </div>
    <van-overlay :show="show" @click.stop="show = false" />
  </div>
</template>
<script>
  import Vue from 'vue'
  import { Overlay } from 'vant'
  Vue.use(Overlay)
  export default {
    name: 'smallTip',
    props: {
      icon: {
        type: String,
        default: 'abc'
      },
      position:{
        type: String,
        default: 'abc'
      }
    },
    // 数据
    data(){
      let get_icon = this.icon,get_position = this.position
      return {
        get_icon: get_icon,
        show: false,
        get_position: get_position
      }
    },
    // 方法
    methods:{
    },
    // 生命周期 --- 创建完成
    created() {
    },
  };
</script>
<style scoped>
  .small_tip_big{
  }
  .small_tip_content{
    position: fixed;
    background-color: #fff;
    border-radius: 5px;
    max-width: 70vw;
    z-index: 2;
    padding: 0.1rem;
    border: 1px #f1f1f1 solid;
    box-shadow: 0px 1px 10px #888888
  }
  .small_tip_content::after{
    width: 0;
    height: 0;
    z-index: 1000;
    border-top: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    position: absolute;
    top: -0.24rem;
    right: 14px;
    content: ' ';
  }
  .van-overlay{
    background-color: rgba(0,0,0,.0);
  }
</style>