微信小程序 & uni-app tooltip All In One

<template>
  <view>
    <view id="just-tooltip"
          class="just-tooltip animated flipInBottom"
          :style="{width: 'auto', left: left+'px',top: top+'px',backgroundColor:backgroundColor,color:textColor,fontSize: fontSize}">
      <view class="just-con">
        <text class="item"
              :style="{borderColor:splitColor}"
              v-for="item in btns" @click="btnClick(item)">{{ item }}</text>
      </view>
      <view :class="justClass" :style="justStyleObject"></view>
    </view>

  </view>
</template>

<script>
export default {
  name: 'BianmarenTooltip',
  props: {
    //是否显示
    tooltipShow:{
      type: Boolean,
      default:false
    },
    //颜色
    textColor:{
      type: String,
      default: "#ffffff"
    },
    //字体大小
    fontSize: {
      type: String,
      default: "28rpx"
    },
    //背景颜色
    backgroundColor:{
      type: String,
      default: "#000000"
    },
    //分隔符颜色
    splitColor:{
      type: String,
      default: "#ffffff"
    },
    //按钮组
    btns: {
      type: Array,
      default: ['HelloWorld',"你好啊"]
    },
    //点击元素Id
    eleId: {
      type: String,
      default: ""
    },
    //方向 bottom,top,left,right
    gravity:{
      type:String,
      default:"bottom"
    },
    distance:{
      type:Number,
      default:10
    }
  },
  data() {
    return {
      left:-9999,
      top:0,
      justStyleObject:{}
    };
  },
  watch:{
    eleId(){
      this.setPosition();
    },
    tooltipShow(){
      this.setPosition();
    }
  },
  mounted() {
    this.setPosition();

  },
  computed:{
    justClass(){
      return "just-"+this.gravity;
    }
  },
  methods:{
    setPosition(){

      var _this = this;

      if(!_this.tooltipShow){
        _this.left = -9999;
        return;
      }

      const query = uni.createSelectorQuery();
      query.select('#'+_this.eleId).boundingClientRect(data => {

        console.info(data);
        var pos = { x: data.left, y: data.top };
        var wh = { w: data.width, h: data.height };

        console.info(pos)
        console.info(wh)

        var outerWidth = 0;
        var outerHeight = 0;

        const query2 = uni.createSelectorQuery().in(_this);

        query2.select('#just-tooltip').boundingClientRect(dd => {

          console.log(dd)

          outerWidth = dd.width;
          outerHeight = dd.height;

          const systemInfo = uni.getSystemInfoSync();
          var windowWidth = systemInfo.windowWidth;

          var rightTmp = ( pos.x + wh.w / 2 ) + outerWidth / 2 ;
          var leftTmp = ( pos.x + wh.w / 2 ) - outerWidth / 2 ;

          if("top" === _this.gravity){
            if(rightTmp > windowWidth ){
              _this.left = pos.x + wh.w - outerWidth;
              _this.top =  wh.h + pos.y - outerHeight - _this.distance;
              _this.justStyleObject = {
                'left':(outerWidth - wh.w/2) + "px",
                'borderColor':_this.backgroundColor+" transparent transparent transparent"
              };
            }else if( leftTmp < 0 ){
              _this.left = pos.x;
              _this.top = wh.h + pos.y - outerHeight - _this.distance;
              _this.justStyleObject = {
                'left':wh.w/2 + "px",
                'borderColor':_this.backgroundColor+" transparent transparent transparent"
              };
            }else{
              _this.left = pos.x - (outerWidth - wh.w)/2;
              _this.top = wh.h + pos.y - outerHeight - _this.distance
              _this.justStyleObject = {
                'left':"50%",
                'borderColor':_this.backgroundColor+" transparent transparent transparent"
              };
            }
          }

          if('bottom' === _this.gravity){
            if(rightTmp > windowWidth ){
              _this.left = pos.x + wh.w - outerWidth;
              _this.top =  wh.h + pos.y + wh.h + _this.distance;
              _this.justStyleObject = {
                'left':(outerWidth - wh.w/2)+'px',
                'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
              };
            }else if( leftTmp < 0 ){
              _this.left = pos.x;
              _this.top =  wh.h + pos.y + wh.h + _this.distance;
              _this.justStyleObject = {
                left:wh.w/2 + 'px',
                'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
              }
            }else{
              _this.left = pos.x - (outerWidth - wh.w)/2;
              _this.top =  wh.h + pos.y + wh.h + _this.distance;
              _this.justStyleObject = {
                left:'50%',
                'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
              }

            }
          }

          if('left' === _this.gravity){
            _this.left = pos.x - outerWidth - _this.distance;
            _this.top = wh.h + pos.y - (outerHeight - wh.h)/2;
            console.log("top:"+ _this.top)
            _this.justStyleObject = {
              top:'50%',
              'borderColor':"transparent transparent transparent " +  _this.backgroundColor
            }
          }

          if('right' === _this.gravity){
            _this.left = pos.x + wh.w + _this.distance;
            _this.top = wh.h + pos.y - (outerHeight - wh.h)/2;
            _this.justStyleObject = {
              top:'50%',
              'borderColor':"transparent "+_this.backgroundColor+" transparent  transparent"
            }
          }

        }).exec();

      }).exec();

    },
    //按钮点击
    btnClick(btnName){
      this.$emit('btnClick',btnName)
    }
  }
}
</script>

<style scoped>

.just-tooltip{
  position:fixed;
  left:0;top:0;
  border-radius:5px;
  background:#000;
  z-index:9999;
}
.just-tooltip .just-con{
  padding:8px 10px;
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}

.just-tooltip .just-top,
.just-tooltip .just-bottom,
.just-tooltip .just-left,
.just-tooltip .just-right{content:"";position:absolute;width:0;height:0;overflow:hidden;border-style:solid;}

.just-tooltip .just-top{left:50%;top:100%;border-width: 7px 5px 0 5px;margin-left:-5px;
  border-color: #1B1E24 transparent transparent transparent;
  _border-color: #1B1E24 #000000 #000000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.just-tooltip .just-bottom{ left:50%; top:-7px;border-width: 0 5px 7px 5px;margin-left:-5px;
  border-color: transparent transparent #1B1E24 transparent;
  _border-color:#000000 #000000 #1B1E24 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.just-tooltip .just-left{ right:-7px; top:50%;border-width: 5px 0 5px 7px;margin-top:-5px;;
  border-color: transparent transparent transparent #1B1E24;
  _border-color:#000000 #000000 #000000 #1B1E24;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.just-tooltip .just-right{ left:-7px; top:50%;border-width: 5px 7px 5px 0;margin-top:-5px;
  border-color: transparent #1B1E24 transparent transparent;
  _border-color:#000000 #000000 #000000 #1B1E24;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.just-tooltip .just-confirm{text-align:center;padding:10px 0;margin:0 10px 10px 10px;}
.just-tooltip .just-yes, .just-tooltip .just-no{background:#fff;color:#000;border:0;padding:5px 10px;}
.just-tooltip .just-no{margin-left:10px;}

/* Animations */
.animated{
  -webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;
  -webkit-animation-duration:.5s;-moz-animation-duration:.5s;-ms-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;
}
@-webkit-keyframes flipInUp {
  0% { -webkit-transform: perspective(400px) rotateX(-90deg); opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotateX(5deg);}
  70% { -webkit-transform: perspective(400px) rotateX(-5deg);}
  100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
}
@-moz-keyframes flipInUp {
  0% {-moz-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
  40% {-moz-transform: perspective(400px) rotateX(5deg);}
  70% {-moz-transform: perspective(400px) rotateX(-5deg);}
  100% {-moz-transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@-o-keyframes flipInUp {
  0% {-o-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
  40% {-o-transform: perspective(400px) rotateX(5deg);}
  70% {-o-transform: perspective(400px) rotateX(-5deg);}
  100% {-o-transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@keyframes flipInUp {
  0% {transform: perspective(400px) rotateX(-90deg);opacity: 0;}
  40% {transform: perspective(400px) rotateX(5deg);}
  70% {transform: perspective(400px) rotateX(-5deg);}
  100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@-webkit-keyframes flipInRight {
  0% { -webkit-transform: perspective(400px) rotateY(-90deg); opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotateY(5deg);}
  70% { -webkit-transform: perspective(400px) rotateY(-5deg);}
  100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
}
@-moz-keyframes flipInRight {
  0% {-moz-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
  40% {-moz-transform: perspective(400px) rotateY(5deg);}
  70% {-moz-transform: perspective(400px) rotateY(-5deg);}
  100% {-moz-transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
@-o-keyframes flipInRight {
  0% {-o-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
  40% {-o-transform: perspective(400px) rotateY(5deg);}
  70% {-o-transform: perspective(400px) rotateY(-5deg);}
  100% {-o-transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
@keyframes flipInRight {
  0% {transform: perspective(400px) rotateY(-90deg);opacity: 0;}
  40% {transform: perspective(400px) rotateY(5deg);}
  70% {transform: perspective(400px) rotateY(-5deg);}
  100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
.flipInTop, .flipInBottom .flipInLeft .flipInRight { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important}
.flipInTop, .flipInBottom { -webkit-animation-name: flipInUp; -moz-animation-name: flipInUp; -o-animation-name: flipInUp; animation-name: flipInUp; }
.flipInLeft, .flipInRight { -webkit-animation-name: flipInRight; -moz-animation-name: flipInRight; -o-animation-name: flipInRight; animation-name: flipInRight; }

@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
@-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
@-o-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}

.fadeIn{-webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn;}

.moveTop{
  -webkit-animation: moveTop .6s ease both;
  animation: moveTop .6s ease both;
}
.moveBottom{
  -webkit-animation: moveBottom .6s ease both;
  animation: moveBottom .6s ease both;
}
.moveLeft{
  -webkit-animation: moveLeft .6s ease both;
  animation: moveLeft .6s ease both;
}
.moveRight{
  -webkit-animation: moveRight .6s ease both;
  animation: moveRight .6s ease both;
}
@-webkit-keyframes moveTop {
  from {opacity: 0;-webkit-transform: translateY(-20px);}
  to {opacity: 1;-webkit-transform: translateY(0); }
}
@-webkit-keyframes moveBottom {
  from {opacity: 0;-webkit-transform: translateY(20px);}
  to {opacity: 1;-webkit-transform: translateY(0); }
}
@-webkit-keyframes moveLeft {
  from {opacity: 0;-webkit-transform: translateX(-20px);}
  to {opacity: 1;-webkit-transform: translateX(0); }
}
@-webkit-keyframes moveRight {
  from {opacity: 0;-webkit-transform: translateX(20px);}
  to {opacity: 1;-webkit-transform: translateX(0); }
}

.item{
  border-right: #fff solid 1px;
  padding: 0 20rpx;
}
.item:last-child{
  border: none;
}
</style>

refs

©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载

1
2

推荐阅读

uniapp 安卓app端本地打包错误： Not found -1,6 at view.umd.min.js:1
求二维数组的最大子数组
返回一个首尾相连的整数数组中最大子数组的和
阅读《软件工程—理论方法与实践》第十一章心得体会
写输出30道小学生四则运算程序的解题思路及未在规定时间内完成程序的原因
找水王
对搜狗搜索引擎的评价
《需求分析与系统设计》阅读笔记四
《你的灯亮着吗》阅读笔记3
2015年秋季个人阅读计划

微信小程序 & uni-app tooltip All In One

微信小程序 & uni-app tooltip All In One

微信小程序 tooltip

uni-app tooltip

refs

©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载

推荐阅读

微信小程序 & uni-app tooltip All In One

微信小程序 & uni-app tooltip All In One

微信小程序 tooltip

uni-app tooltip

refs

©xgqfrms 2012-2020 www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！ 原创文章，版权所有©️xgqfrms, 禁止转载

推荐阅读

©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载