ドラッグ アンド ドロップ選択の制御、選択したテキストのコピー、マウスの右クリック メニューのカスタマイズのプロセスを記録します。
参考記事 vueで選択テキストのドラッグ禁止、コピー禁止、右クリックメニュー禁止
- selectstart で選択したテキストのドラッグを無効または許可する
選択したテキストのドラッグを無効にする
<div class="select-content" onselectstart="return false">
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
</div>選択したテキストのドラッグを許可する
<div class="select-content" onselectstart="return true">
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
</div>- oncopy でテキストのコピーを禁止または許可する
選択したテキストのコピーは禁止されています。選択したテキストを右クリックしてコピーした後、貼り付け時に表示される内容は空、または最後にコピーした内容です。
<div class="select-content">
<p oncopy="return false">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
</div>選択したテキストのコピーを許可する
<div class="select-content">
<p oncopy="return true">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
</div>- マウスの右クリック メニューのコンテキスト メニューをカスタマイズする
カスタムの右クリック メニューを実装するには、ブラウザのデフォルトの動作を無効にしてから、カスタム イベントを追加する必要があります。
<div class="rightKey-classify" v-if="checkIndex == 3">
<div class="common-menu chart-menu" @contextmenu.prevent="rightClick($event,1)">
Echarts 可视化图表
<RightClickMenu
:left="clientX"
:top="clientY"
@ok="operatingRightAction"
:data="menu" />
</div>
<div class="common-menu table-menu" @contextmenu.prevent="rightClick($event,2)">
Tables 多样化表格
<RightClickMenu
:left="clientX"
:top="clientY"
@ok="operatingRightAction"
:data="menu" />
</div>
<div class="common-menu components-menu" @contextmenu.prevent="rightClick($event,3)">
components 常用功能组件
<RightClickMenu
:left="clientX"
:top="clientY"
@ok="operatingRightAction"
:data="menu" />
</div>
</div>
<script>
import RightClickMenu from '@/components/RightClickMenu/index.vue'
export default {
name: 'index',
components:{
RightClickMenu,
},
data(){
return{
clientX: 0,
clientY: 0,
rightMenu: {
echartsMenu: [
{ label: '迁徙图', value: 1, path:'/echarts/migration'},
{ label: '柱状图', value: 2, path:'/echarts/bar'},
{ label: '关系图', value: 3, path:'/echarts/graph'},
{ label: '饼图', value: 4, path:'/echarts/pie'},
{ label: '简单图表', value: 5, path:'/echarts/simple'},
],
tablesMenu: [
{ label: '综合表格', value: 1, path:'/table/comprehensive'},
{ label: '行内编辑表格', value: 2, path:'/table/inline-table'},
{ label: '可编辑表格', value: 3, path:'/table/editableProTable'},
],
componentsMenu: [
{ label: 'markdown编辑器', value: 1, path:'/other/mark-down'},
{ label: '头像裁剪', value: 2, path:'/other/cropper'},
{ label: '卡片拖拽', value: 3, path:'/other/card-drag'},
{ label: '生成二维码', value: 4, path:'/other/qrcode'},
{ label: '阿里图标库', value: 5, path:'/other/iconfont'},
],
},
menu: [],
}
},
methods:{
rightClick(event,type){
this.clientX = event.clientX
this.clientY = event.clientY
switch (type){
case 1:
this.menu = this.rightMenu.echartsMenu
break
case 2:
this.menu = this.rightMenu.tablesMenu
break
case 3:
this.menu = this.rightMenu.componentsMenu
break
}
},
operatingRightAction(event,val){
this.$router.push({
path: val.path,
})
},
}
}
</script>RightClickMenu.vue コンポーネント、右クリック メニュー スタイルをカスタマイズする
<template>
<div class="yoyo-right-click-menu" :style="style" v-if="isShow" ref="rightMenu">
<div
v-for="(item, index) in data"
:key="index"
class="operating"
@click.stop="operatingRightAction($event, item)"
>{
{ item.label }}</div
>
</div>
</template>
<script>
export default {
name: "index",
props: {
data: {
type: Array,
default: () => [],
},
left: {
type: Number,
default: 0,
},
type: {
type: Number,
default: 1,
},
dataInfo: {
type: Object,
default: () => {},
},
top: {
type: Number,
default: 0,
},
isViewInfo: {
type: Boolean,
default: true,
},
},
watch: {
left: {
handler(newName, oldName) {
if (newName) {
this.isShow = true
}
},
},
},
computed: {
style() {
let clientHeight = document.body.clientHeight
let y = this.top
if (clientHeight - y < 100) {
return `left:${this.left}px;bottom:${clientHeight - y + 10}px`
} else {
return `left:${this.left}px;top:${this.top + 10}px`
}
},
},
data() {
return {
isShow: false,
}
},
methods: {
tingRightAction($event, val) {
this.$emit('ok', $event, val)
this.isShow = false
},
},
mounted() {
let _self = this
window.addEventListener('click', function () {
_self.isShow = false
})
window.addEventListener('mousedown', function (e) {
if (e.which === 3) {
_self.isShow = false
}
})
},
}
</script>
<style lang="scss" scoped>
.yoyo-right-click-menu {
left: 0;
background: white;
width: 148px;
height: auto;
position: fixed;
z-index: 9;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
text-align: left;
.operating {
font-size: 12px;
padding-left: 23px;
cursor: pointer;
line-height: 27px;
}
.operating:hover {
background: #ecf7ff;
}
.last-delete {
border-top: 1px solid #ededed;
}
}
</style>