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

实现效果

实现原理：

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

代码实现

  
  
    
      
        
          选中分享
        

        
          全部分享
        

        
          发送到企业微信
        

        
          搜索
        
      
    
  



// 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 
// 遮罩层
.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%);
}

// 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
};

将其挂载到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');

调用弹出分享组件

  



// 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();
  }
};



.meeting-content {
  white-space: pre-wrap;
  line-height: 1.8;
  color: #222222;
  font-size: 14px;

  &::selection {
    background-color: #b0d4fc;
  }
}

参考

• vue 自定义组件插入到body中的实现
• 通过vue.extend实现消息提示弹框
• js获取当前窗口最大z-index