Vue2全局与局部组件封装

目录

一、PC兼容移动【全】

二、自定义鼠标右键【局】

一、PC兼容移动【全】

<template v-if="!$isMobile">
  <!-- PC端原本展示内容 -->
</template>

  <!-- 用$isMobile部署移动端展示部分,一般是三角形按钮滑过显示全部【以查询条件为例】 -->
<el-popover placement="bottom" title="" width="270" trigger="click">
  <template v-if="$isMobile">
  <!-- H5端展示内容 -->
  </template>
  <el-button slot="reference" size="small" :icon="'el-icon-caret-bottom'" type="primary"> 
  </el-button>
</el-popover>

在main.js里写入：

const initVue = () => {
  // 这个函数返回一个布尔值：表示当前窗口的宽度是否小于或等于1100像素
  const isMobile = () => window.innerWidth <= 1100

  // Vue.util.defineReactive：将一个对象的属性变为响应式的，当属性的值发生变化时，视图会自动更新
  // 在Vue的原型上定义了一个响应式属性$isMobile
  Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())

  // 将$isMobile属性的值更新为isMobile()函数的最新返回值
  window.addEventListener('resize', () => {
    Vue.prototype.$isMobile = isMobile()
  })
  new Vue({
    store,
    router,
    render: (h) => h(App)
  }).$mount('#app')
}

initVue()

二、自定义鼠标右键【局】

首先要去掉鼠标原有的右键功能，再将自定义的页面赋给右击事件

<template>
          <div @contextmenu.prevent="rightClick">右键</div>
          <right-menu ref="rightMenu" @change="rightChange" />
</template>
<script>
import RightMenu from './rightMenu.vue'
export default {
  components: { RightMenu },
  methods: {
    rightClick(e) {
      this.$refs.rightMenu.setPosition({
        x: e.clientX,
        y: e.clientY,
        el: e
      })
    },
    rightChange(code) {
      //根据自己业务需求调整
      if (code === 'check_all') {
        this.selection = this.tableData.map((item) => item)
      } else if (code === 'copy_id') {
        this.copyId(this.selection)
      } else {
        this.selection = []
      }
    },
  }
}
</script>

自定义rightMenu.vue组件：

<template>
  <div v-if="show" ref="right_menu" class="right_menu">
    <button @click="$emit('change', 'check_all')" :disabled="isSelectAll">
      全部选择
    </button>
    <button @click="$emit('change', 'clear_check')">取消选择</button>
    <button @click="$emit('change', 'copy_id')" v-if="isShowId">
      复制选中ID
    </button>
    <button v-show="isImg" @click="copyImage">复制图片</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      text: '',
      row: null,
      el: null,
      isImg: false
    }
  },
  props: {
    isSelectAll: {
      type: Boolean
    },
    isShowId: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    close() {
      this.show = false
      document.body.onclick = null
    },
    async copyImage() {
      if (this.el.target.nodeName === 'IMG') {
        const testImg = this.el.target
        const newImg = document.createElement('img')
        newImg.src = testImg.src.replace(/-\d+\.(png|jpg|jpeg)$/i, '.$1')
        document.body.appendChild(newImg)
        const selection = window.getSelection()
        //清除选中
        if (selection.rangeCount > 0) selection.removeAllRanges()
        // https://developer.mozilla.org/zh-CN/docs/Web/API/Document/queryCommandSupported
        if (!document.queryCommandSupported('copy'))
          return alert('浏览器暂不支持复制命令')
        //创建range区域
        const range = document.createRange()
        range.selectNode(newImg)
        selection.addRange(range)
        document.execCommand('copy')
        selection.removeAllRanges()
        this.$message.success('复制成功')
      } else {
        this.$message.success('复制失败')
      }
    },
    setPosition(o) {
      console.log(o)
      this.show = true
      let clientX = o.x
      this.text = o.t
      this.row = o.row
      this.el = o.el
      let x = document.body.clientWidth - clientX
      let _this = this
      if (this.el.target.nodeName === 'IMG') {
        this.isImg = true
      } else {
        this.isImg = false
      }
      document.body.onclick = function () {
        _this.close()
      }
      setTimeout(() => {
        if (x < 150) {
          this.$refs.right_menu.style.cssText = `top:${o.y}px;right:${x}px`
        } else {
          this.$refs.right_menu.style.cssText = `top:${o.y}px;left:${o.x}px`
        }
      }, 1)
    }
  }
}
</script>
<style scoped>
.right_menu {
  position: fixed;
  max-width: 200px;
  min-height: 50px;
  background: #fff;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
  top: -500px;
}
.right_menu button {
  display: block;
  line-height: 30px;
  font-size: 14px;
  padding: 0 15px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.right_menu button:hover {
  background: rgb(65, 192, 251);
  color: white;
}
</style>

【待更新......】