vue + element 新手指引

el/2024/2/25 23:59:00

直接上代码

template-(Guide.vue)

<template><div><!-- 新手指引 --><div id="mask"></div><div id="searchTip"><div class="stepA"><el-button type="primary" size="small" class="close" @click="close">我知道了</el-button></div></div></div>
</template><script>export default {name: 'RpGuide',methods: {close() {this.$cookie.set('guide', 1 ,{domain:'hanmaker.com'})this.$destroy(true);this.$el.parentNode.removeChild(this.$el);},},}
</script><style scoped>
/* 新手指引 */
#mask{ height:100%; width:100%; background:#000; -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);opacity:.5; filter:alpha(opacity=50);position:absolute; left:0; top:0; display:block;z-index: 99999;
}
#searchTip{ width:100%; height:100%; position: absolute; left:50%; top: 0;margin-left: -50%; display:block;z-index: 99999;
}
#searchTip div{ position:absolute; display:block; 
}
#searchTip div button{ position:absolute;overflow:hidden;
}
.stepA{ background-image:url(//pic2.hanmaker.com/common/images/guide.png);background-repeat: no-repeat;height:625px; width:946px; top:0px; left:32px; display:block;
}
.stepA button{top: 580px;left: 850px;
}
</style>

命令行输入:npm install vue-cookie
man.js

import VueCookie from 'vue-cookie';
Vue.use(VueCookie);

根目录文件,我这里是app.vue(home.vue)

import Vue from 'vue';
import Guide from '@/components/Guide/Guide'mounted(){let guide = this.$cookie.get('guide');if(guide != 1){let MessageConstructor = Vue.extend(Guide);let instance = new MessageConstructor();instance.$mount();document.body.appendChild(instance.$el);}
},

http://www.ngui.cc/el/4893944.html

相关文章

vue+element 表头说明文字

vueelement 表头说明文字 第一种直接hover 表头出现说明文字 html&#xff1a; <el-table-column prop"last_result" label"上次评估结果" width"120" :render-header"renderHeader"></el-table-column>js: methods: …

jquery封装选人插件(结合layer)

html <button class="layui-btn" id="transfer">添加</button><!-- 选人弹窗主体框架 satrt--> <div class="layer-transfer" id="layer-transfer" style="display:none"><div class="lay…

element表格点击一行给行添加border

由于element ui有一套自己的样式&#xff0c;在实际工作中&#xff0c;我们可能不会照搬&#xff0c;一般会根据需求和设计对element ui进行调整&#xff0c;但是有时候自己写的样式会被element ui影响&#xff0c;不能成功应用。 这次我的工作就是给element表格点击一行给行添…

layui 布局 高度不一致时导致的错乱问题解决

这个问题找了很久&#xff0c;因为需求是要类似于瀑布流那样的布局&#xff0c;但是因为用的是layui所以又不想弃用&#xff0c;单独写&#xff0c;所以有了以下解决方案&#xff1a; html&#xff1a; <div class"layui-row list-body"><div class"…

超简单的jquery 点击文本复制文本

有点仿蓝湖的点击代码就复制的功能&#xff0c;直接点击你想复制的文本&#xff0c;就可以复制成功了 html: <ul class"info-list"><li><div class"info"><em>1</em><span class"link-addr"title"12333…

vue 不在同一处(不是同一个页面)的数据使用(数据传输)

vue 不在同一处&#xff08;不是同一个页面&#xff09;的数据使用&#xff08;数据传输&#xff09; 整理下最近在做vue项目时遇到的几个关于数据传输的问题&#xff1a; 有的时候我们在同一个页面想要调用不同的组件&#xff0c;不同的组件可能只是结构不太一样&#xff0c;…

vue + element(前后端) 学习总结(一)

准备工作 工具安装和环境搭建 ## node.js## npm## mongodb数据库 主要记录一下mongodb的安装和配置(mac版) ## 首先去mongodb的官网下载&#xff1a;[https://www.mongodb.com/download-center] ## 下载解压后重命名为mongodb,接着打开mongodb&#xff0c;在mongodb下新建一个…

vue + element(前后端) 学习总结 (二)

初始化项目 admin&#xff08;管理端&#xff09; server &#xff08;服务端&#xff09; web &#xff08;移动端&#xff09; 在项目文件下&#xff08;demo_project&#xff09;新建各端项目文件 在demo_project文件路径下&#xff0c;输入命令&#xff1a;mkdir serv…

vue + element(前后端) 学习总结 (三)

后台管理界面的搭建 cd admin 进入后台管理项目路径下 npm run serve 启动项目 vue add element 安装element-ui vue add router 安装路由 去element 官网 找到后台管理界面 复制代码 在admin > src > views > 新建Main.vue文件 粘贴element代码 在router.js 里…

Vue 知识点:Object.defineProperty

Vue 知识点&#xff1a;Object.defineProperty 数据描述符 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性&#xff0c;或者修改一个已经存在的属性 存取描述符 --是由一对 getter、setter 函数功能来描述的属性 get&#xff1a;一个给属性提供getter的方法…