![](https://img-blog.csdnimg.cn/20200519131344791.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
写一些vue相关的知识
whylost迷心
浪荡游子身无悔,回眸一笑百媚生。
展开
-
vue中用指令优雅的实现 点击div外部空白处隐藏div
思路1、给document增加一个click事件监听2、当发生click事件的时候判断是否点击的当前对象vue2 指令代码实现<template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div></template><原创 2021-06-18 10:19:31 · 459 阅读 · 0 评论 -
vue实现动态改变地址栏的参数值
vue实现动态改变地址栏的参数值点击切换Tab,通过watch监听,在地址栏修改对应得active参数,这样刷新后还能保持最后浏览的tabwatch: { active (newValue) { let query = this.$router.history.current.query; let path = this.$router.history.current.path; //对象的拷贝 let newQuery = JSON.pars原创 2021-05-13 16:25:08 · 2615 阅读 · 0 评论 -
vue 实现复制文字或data中的动态变量 到剪切板
copyText (copyValue) { let copyInput = document.createElement('INPUT') copyInput.type = 'text' copyInput.style.width = '1px' copyInput.style.height = '1px' copyInput.style.border = 0 copyInput.style.outline = 0 document.body.appendChi.原创 2021-04-08 14:44:53 · 255 阅读 · 0 评论 -
vue 当前页跳转项目外链接
openService () { window.location.href = 'https://vant-contrib.gitee.io/vant/#/zh-CN/sticky' }原创 2021-04-07 15:00:32 · 396 阅读 · 0 评论 -
vue 组件 props 默认值参考
props: { demoString: { type: String, default: '' }, demoNumber: { type: Number, default: 0 }, demoBoolean: { type: Boolean, default: true }, demoArray: { type: Array, default: () =原创 2021-01-07 20:41:23 · 457 阅读 · 0 评论 -
Vue 路由传参
搭配规则path + queryname + params原创 2020-06-26 23:04:21 · 111 阅读 · 0 评论 -
vue-cli设置publicPath几种方式对比
publicPath打包设置1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/'// vue.config.jsmodule.exports = { publicPath: '/',}html中被打包的css和js路径如下<!DOCTYPE html><html lang=en><head> <meta charset=utf-8> <meta http-equiv=X-U原创 2020-06-11 09:40:29 · 13383 阅读 · 0 评论 -
使用 vue-cl4 的GUI 创建vue项目并引入elementUI
1.打开 cmd 并运行vue ui会自动打开vue-cli的UI界面2.创建项目创建完成后自动调转UI界面项目目录3. 引入elementUI点击 [插件] → [添加插件] → 搜索elementUI → 选择 vue-cli-plugin-element4. 启动项目如果项目首页出现了elementUI的 el-button 证明引入elementUI成功...原创 2020-06-08 04:50:55 · 590 阅读 · 0 评论 -
vue路由监控,公共头部组件对路由变化进行响应
最近用到一个功能公共头部组件在特定的路由页面隐藏或显示特定元素起初使用的是在特定页面单独引入公共头部进行传参,但这种方式太蠢,无法通用,后期修改复杂,代码量多,重复代码多。反正就是一坨辣鸡。为此调查并使用了路由监听1. 在App.vue引入并添加添加公共头部组件· 组件名不要命名为 header 会与HTML默认标签冲突· 通过:showPlat="showPlat" 向组件传值,控制组件内部特定部分的显示隐藏<template> <div id="app">原创 2020-05-21 18:13:37 · 614 阅读 · 0 评论 -
为VUE-CLi2项目自定义title标签页小图标
初始图标如图1. 在项目根目录(index.html同级目录)下添加favicon.ico文件2. 在项目index.html中引入图标<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />3. 配置webpack配置文件(build文件夹下面)在 webpack.dev.conf.js 和 webpack.prod.config.js 中添加如下代码favicon: path.resolve(原创 2020-05-19 11:34:19 · 1468 阅读 · 0 评论 -
element-UI el-table树形数据 修改小三角图标
el-table树形数据 默认样式有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。更改成自定义样式因为是vue的 <style scoped>内写CSS 样式,所以需要添加 /deep/ 进行穿透.el-tree /deep/ .el-tree-node__expand-icon.expanded{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}//有子节点 且未展开.原创 2020-05-14 13:26:44 · 9297 阅读 · 7 评论 -
element-UI tree树形控件 修改小三角图标
el-tree 默认样式可以看到有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。更改成自定义样式因为是vue的 <style scoped>内写CSS 样式,所以需要添加 /deep/ 进行穿透.el-tree /deep/ .el-tree-node__expand-icon.expanded{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}//有子节点 且未展开.e原创 2020-05-13 17:54:19 · 7893 阅读 · 9 评论 -
VUE中element-UI 样式修改(vue的scoped影响样式修改)
在vue中引入第三方组件库的时候,vue组件中样式的scoped就会阻碍我们修改第三方组件库的样式在所有需要重新定义样式的element组件上添加自定义class(防止自定义样式影响全局)1. 在样式外新增一个样式不添加 scoped 的<style>标签<style> /* 这个样式起效果 */ .myClass .el-input__inner{ border-radius: 10px; }</style><style scoped>原创 2020-05-12 00:56:58 · 4076 阅读 · 0 评论 -
Vue实现获取当前时间、日期并实时刷新
Vue实现获取当前时间、日期并实时刷新1. 获取当前时间的方法getTime(){ var _this = this; let yy = new Date().getFullYear(); let mm = new Date().getMonth()+1; let dd = new Date().getDate(); let hh = new Date().getHours(); let mf = new D原创 2020-05-09 16:28:57 · 4132 阅读 · 4 评论