vue.js自定义弹出组件插入到body中的实现划词分享功能

举报
彭世瑜 发表于 2022/06/21 23:54:19 2022/06/21
【摘要】 实现效果 实现原理: 方式一:通过 vue.extend 实现方式二:通过 new Vue() 实现,本例采用该方法实现,比较简单,即新实例化一个vue对象,单独操作它。其实就是动态创建一个Vue实...

实现效果
在这里插入图片描述

实现原理:

  • 方式一:通过 vue.extend 实现
  • 方式二:通过 new Vue() 实现,本例采用该方法实现,比较简单,即新实例化一个vue对象,单独操作它。其实就是动态创建一个Vue实例对象。

代码实现

<!-- components/pop-share/pop-share.vue -->
<template>
  <!-- 最外层需要一个透明遮罩,监听点击事件 -->
  <div class="mo-mask" :style="{ 'z-index': zIndex }" @click="handleClose">
    <transition name="el-fade-in-linear">
      <div class="pop-share" :style="style" @click.stop="handleClick">
        <div data-value="select" class="pop-share__item">
          <i class="el-icon-share"></i>选中分享
        </div>

        <div data-value="all" class="pop-share__item">
          <i class="el-icon-share"></i>全部分享
        </div>

        <div data-value="work-weixin" class="pop-share__item">
          <i class="el-icon-position"></i>发送到企业微信
        </div>

        <div data-value="search" class="pop-share__item">
          <i class="el-icon-search"></i>搜索
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// created at 2022-06-21
export default {
  name: 'pop-share',
	
  // 接收参数中可以定义需要接收的参数
  props: {
    top: {
      type: Number | String,
      default: 0
    },
    left: {
      type: Number | String,
      default: 0
    },
	
	// 点击事件回调
    onItemClick: {
      type: Function,
      default: null
    }
  },

  components: {},

  data() {
    return {
      zIndex: 0
    };
  },

  computed: {
    style() {
      return {
        top: this.top + 'px',
        left: this.left + 'px'
      };
    }
  },

  methods: {
    async getData() {},

    handleClick(e) {
      if (e.target.dataset.value) {
        if (this.onItemClick) {
          this.onItemClick({ value: e.target.dataset.value });
        }

        this.handleClose();
      }
    },

    handleClose(e) {
      this.$parent.handleClose();
    },

    // js获取当前窗口最大z-index
    getMaxZIndex() {
      var elements = document.querySelectorAll('*');
      let maxZindex = 0;
      for (var i = 0; i < elements.length; i++) {
        maxZindex = Math.max(maxZindex, elements[i].style.zIndex || 0);
      }
      return maxZindex;
    }
  },

  mounted() {
    // console.log(this.getMaxZIndex() + 1);
    this.zIndex = this.getMaxZIndex() + 1;
  },

  created() {
    this.getData();
  }
};
</script>

<style lang="less">
// 遮罩层
.mo-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}

.pop-share {
  position: fixed;
  background-color: #373737;
  color: #fff;
  display: flex;
  align-items: center;
  line-height: 1.5;
  border-radius: 6px;
  transform: translate(-50%, -50px);
}

.pop-share::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #373737;
}

.pop-share__item {
  font-size: 12px;
  line-height: 32px;
  height: 32px;
  padding: 0 12px;
  box-sizing: border-box;
  color: #dfdfdf;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.pop-share__item:not(:last-child)::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 14px;
  line-height: 14px;
  padding: 0;
  box-sizing: border-box;
  background-color: #666;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
</style>

<style lang="less" scoped></style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
// components/pop-share/index.js
import Vue from 'vue';
import PopShare from './pop-share.vue';

// 所有实例列表
let instances = [];

// 显示
function show(props) {
  console.log('show');

  // let PopShareVue = Vue.extend(PopShare);
  // 此处需要使用 propsData传递参数
  // let instance = new PopShareVue({
  //   propsData: props
  // });

  let instance = new Vue({
    render(h) {
      return h(PopShare, { props });
    },

    methods: {
      handleClose() {
        close(instance);
      }
    }
  });

  instance.$mount();

  document.body.appendChild(instance.$el);

  instances.push(instance);
}

// 关闭
function close(instance) {
  console.log('close');

  if (instance) {
    document.body.removeChild(instance.$el);
  }

  let index = instances.findIndex(item => item === instance);

  if (index > -1) {
    instances.splice(index, 1);
  }
}

function closeAll() {
  for (let instance of instances) {
    close(instance);
  }
}

export default {
  show,
  close,
  closeAll
};


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

将其挂载到Vue实例

// main.js
import Vue from 'vue';
import App from './App.vue';

import PopShare from './components/pop-share/index.js';

Vue.prototype.$popShare = PopShare;

const app = new Vue({
  render: h => h(App)
}).$mount('#app');


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

调用弹出分享组件

<!-- App.vue -->
<template>
  <div @mouseup="handleMouseUp" class="meeting-content" v-html="content"></div>
</template>

<script>
// created at 2022-06-21

export default {
  name: '',
  
  data(){
	return {
		content: ""
	}
  }, 	
  
  methods: {
    handleMouseUp(e) {
      // 将当前鼠标的坐标传入	
      this.$popShare.show({
        top: e.clientY,
        left: e.clientX,
        // 点击回调
        onItemClick: e => {
          console.log(e);
        }
      });
    
    }
  },

  created() {
    // this.getData();
  }
};
</script>

<style lang="less">
.meeting-content {
  white-space: pre-wrap;
  line-height: 1.8;
  color: #222222;
  font-size: 14px;

  &::selection {
    background-color: #b0d4fc;
  }
}
</style>

<style lang="less" scoped></style>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

参考

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/125396008

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。