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里写入：

javascript">const initVue = () => {// 这个函数返回一个布尔值：表示当前窗口的宽度是否小于或等于1100像素const isMobile = () => window.innerWidth <= 1100// Vue.util.defineReactive：将一个对象的属性变为响应式的，当属性的值发生变化时，视图会自动更新// 在Vue的原型上定义了一个响应式属性$isMobileVue.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 = falsedocument.body.onclick = null},async copyImage() {if (this.el.target.nodeName === 'IMG') {const testImg = this.el.targetconst 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/queryCommandSupportedif (!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 = truelet clientX = o.xthis.text = o.tthis.row = o.rowthis.el = o.ellet x = document.body.clientWidth - clientXlet _this = thisif (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>

【待更新......】