seo网站推广全程实例,南宁百度seo排名价格,雷电模拟器手机版下载官方网站,网站建设与管理课后总结文章目录 1、mounted 和 beforeDestroy1.1、mounted1.2、beforeDestroy 2、父组件向子组件传递参数 props2.1、子组件定义2.2、父组件调用子组件并传参 3、完整例子3.1、父组件 Tags.vue3.2、子组件 TagsMenu.vue3.3、效果图 1、mounted 和 beforeDestroy
1.1、mounted
mount… 文章目录 1、mounted 和 beforeDestroy1.1、mounted1.2、beforeDestroy 2、父组件向子组件传递参数 props2.1、子组件定义2.2、父组件调用子组件并传参 3、完整例子3.1、父组件 Tags.vue3.2、子组件 TagsMenu.vue3.3、效果图 1、mounted 和 beforeDestroy
1.1、mounted
mounted() 钩子函数在组件被挂载到 DOM 后调用。代码 document.addEventListener(“click”, this.closeMenu) 在组件挂载后为整个文档添加了一个点击事件监听器当用户在文档任何地方点击时都会触发 this.closeMenu 方法。
scriptexport default {mounted() {//动作},1.2、beforeDestroy
beforeDestroy() 钩子函数在组件被销毁之前调用。代码 document.removeEventListener(“click”, this.closeMenu) 在组件销毁之前移除之前添加的点击事件监听器避免组件销毁后仍然存在监听器导致潜在的错误或内存泄漏。 scriptexport default {beforeDestroy() {//动作},2、父组件向子组件传递参数 props
2.1、子组件定义
scriptexport default {props: [clientX, clientY, clickIndex,tagsLength],//其余内容略}2.2、父组件调用子组件并传参
template
//其余略
TagsMenu v-showisShowTagsMenu :clientXclientX :clientYclientY :clickIndexclickIndex:tagsLengthtags.length ///其余略
/template
scriptimport TagsMenu from ./TagsMenu.vue;//其余略3、完整例子
3.1、父组件 Tags.vue
templatediv classtags!-- .native 用法在 Vue.js 中.native 修饰符用于监听原生 DOM 事件而不是 Vue 组件的自定义事件。例如contextmenu.nativerightClick($event).prevent 阻止浏览器默认行为表示你希望监听原生的 contextmenu 事件通常是右键点击而不是 Vue 组件中可能定义的 contextmenu 事件。这在你想要直接处理 DOM 事件时非常有用尤其是当组件内部没有提供相应的事件时。 --el-tag sizemedium :closableindex0 v-foritem,index in tags :keyitem.path:effectitem.title$route.name?dark:plain clickgoTo(item.path) closeclose(index):disable-transitionstrue contextmenu.native.preventrightClick($event,index)i classcir v-showitem.title$route.name/i{{item.title}}/el-tagTagsMenu v-showisShowTagsMenu :clientXclientX :clientYclientY :clickIndexclickIndex:tagsLengthtags.length //div
/templatescriptimport TagsMenu from ./TagsMenu.vue;export default {components: {TagsMenu},data() {return {tags: [{title: layout,path: /layout,isActive: true,}],isShowTagsMenu: false,clientX: 0,clientY: 0,clickIndex: 0,}},mounted() {document.addEventListener(click, this.closeMenu)},beforeDestroy() {document.removeEventListener(click, this.closeMenu)},methods: {closeMenu() {this.isShowTagsMenu false},rightClick(e, i) {console.log(右键点击了, e.clientX, e.clientY, i);this.clientX e.clientX;this.clientY e.clientY;this.isShowTagsMenu true;this.clickIndex i;//关闭浏览器的默认行为window.event.returnValue false;return false;},goTo(path) {this.$router.replace({path: (path / || path undefined ? /Index : path)});},close(index) {const name this.tags[index].title;this.tags.splice(index, 1);if (this.tags.length 0) return;//如果关闭当前页则激活最后一个标签页const path this.tags[this.tags.length - 1].path;if (name this.$route.name this.tags.length ! 0) {this.$router.replace({path: (path / || path undefined ? /Index : path)});}}},watch: {$route: {immediate: true,handler(val, oldVal) {console.log(val);const bool this.tags.find(item {return item.path val.path;});if (!bool) {this.tags.push({title: val.name,path: val.path});}}}}}
/scriptstyle scoped.tags {margin-top: 3px;/* 添加距离上边缘的距离 */}.tags .el-tag {padding-left: 10px;padding-top: 0px;margin-right: 5px;.cir {width: 8px;height: 8px;margin-right: 4px;background-color: #fff;border-radius: 50%;display: inline-block;}}
/style
3.2、子组件 TagsMenu.vue
templatediv classtags-menu :style{left:clientXpx,top:clientYpx}ulli v-foritem,index in tmenu :keyindex v-showisShowLi(index)i :classitem.icon/i{{item.text}}/lili{{clientX,clickIndex}}/li/ul/div
/templatescriptexport default {props: [clientX, clientY, clickIndex,tagsLength],methods: {isShowLi(i) {if(this.tagsLength1){//只有首页return i0;}if (this.clickIndex 0) {return ![1, 3].includes(i)}if(this.clickIndex 1 this.clickIndexthis.tagsLength-1){return ![3,4].includes(i)}else if(this.clickIndex 1 this.clickIndex!this.tagsLength-1){return ![3].includes(i)}else if(this.clickIndexthis.tagsLength-1){return ![4].includes(i)}return true;}},data() {return {tmenu: [{icon: el-icon-refresh-right,text: 刷新页面},{icon: el-icon-close,text: 关闭当前},{icon: el-icon-circle-close,text: 关闭其他},{icon: el-icon-back,text: 关闭左侧},{icon: el-icon-right,text: 关闭右侧},{icon: el-icon-circle-close,text: 关闭全部}]}}}
/scriptstyle.tags-menu {position: absolute;z-index: 1000;/* 确保菜单在最上层 */background-color: white;/* 设置背景颜色为白色 */border: 1px solid #ddd;/* 添加边框 */border-radius: 4px;/* 圆角效果 */box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);/* 添加阴影 */padding: 10px;/* 内边距 */min-width: 120px;/* 最小宽度 *//* 可选添加过渡效果 */transition: opacity 0.2s ease;}.tags-menu ul {list-style: none;/* 去掉列表样式 */margin: 0;/* 去掉外边距 */padding: 0;/* 去掉内边距 */}.tags-menu li {padding: 8px 12px;/* 单个菜单项的内边距 */cursor: pointer;/* 鼠标悬停变成手指 */transition: background-color 0.2s;/* 添加过渡效果 */}.tags-menu li:hover {background-color: #f5f5f5;/* 悬停时的背景颜色 */}
/style
3.3、效果图
