whylost迷心-CSDN博客

原创 vue中用指令优雅的实现点击div外部空白处隐藏div

思路1、给document增加一个click事件监听2、当发生click事件的时候判断是否点击的当前对象vue2 指令代码实现<template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div></template>&lt

2021-06-18 10:19:31 459

原创网页变灰处理

html *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%); filter:progid:DXImageTransform.Micro

2021-06-05 17:37:04 325

原创 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

原创 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

原创 vue 当前页跳转项目外链接

openService () { window.location.href = 'https://vant-contrib.gitee.io/vant/#/zh-CN/sticky' }

2021-04-07 15:00:32 397

原创 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

原创 Vue 路由传参

搭配规则path + queryname + params

2020-06-26 23:04:21 111

原创 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 13389

原创使用 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

原创 HTML标签大全

HTML标签：基础标签描述<!DOCTYPE>定义文档类型。< html >定义 HTML 文档。< title >定义文档的标题。< body >定义文档的主体。< h1 > - < h6 >定义 HTML 标题。< p >定义段落。< br >定义简单的折行。< hr >定义水平线。<

2020-05-26 14:57:51 112

原创 CSS 线性渐变（可实现：div对角线或斜线）

学习和了解线性渐变的起因是需要用css实现div对角线或者斜线，具体原型图如下：1. 语法介绍linear-gradient() 函数用于创建一个线性渐变的 “图像”。为了创建一个线性渐变，你需要设置一个终点方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。background: linear-gradient(direction, [length | percentage]co

2020-05-26 13:45:34 7622 1

原创 CSS重置

挖坑

2020-05-26 09:29:54 150

原创 RESTful 统一返回结果类

我们期望能有一个统一的RESTful接口返回形式, 它应该有一个统一的服务器返回状态码,一个统一的服务器端返回消息, 一个统一的返回数据集data统一返回数据应如下示例{"code": 0,"message": 'hello world',"data": []}1. 定义对应变量 /** * 统一服务器返回状态码 (!=http状态码) */ private Integer code; /** * 统一服务器端返回消息 */ private String messa

2020-05-26 09:25:53 1516 4

原创批量创建文件夹并命名

1. 先新建一个excel,并进行如下操作1. 先确定好要进行的命名比如第1章第2章 ···2. 然后在新的一列写上 =”MD “&A1&B1&C1 进行名字拼接3. 当鼠标在单元格右下角变成 + 时，进行下拉4. 将 MD这一列拷贝出来2. 在要创建文件夹的目录下，按Shift+鼠标右键打开PowerShell，将之前拷贝的列粘贴在PowerShell里好了，大功告成。是不是很简单...

2020-05-23 22:55:44 12166 1

原创 vue路由监控，公共头部组件对路由变化进行响应

最近用到一个功能公共头部组件在特定的路由页面隐藏或显示特定元素起初使用的是在特定页面单独引入公共头部进行传参，但这种方式太蠢，无法通用，后期修改复杂，代码量多，重复代码多。反正就是一坨辣鸡。为此调查并使用了路由监听1. 在App.vue引入并添加添加公共头部组件· 组件名不要命名为 header 会与HTML默认标签冲突· 通过:showPlat="showPlat" 向组件传值，控制组件内部特定部分的显示隐藏<template> <div id="app">

2020-05-21 18:13:37 617

原创 vue 规范：CSS 样式

此篇文章会跟随迷心一起成长，随时记录和修改对vue-CSS样式的使用心得和想法在vue中的样式覆盖问题，往往令人头痛。每当在dev环境下调好的页面发布后，总是处想各种奇奇怪怪的问题，每次都会让我薅着不多的头发，去寻找丢失的class 在这种情况下，我发小了几个会导致样式覆盖的小问题，在此记录。1. 导入样式初始化文件初始化CSS不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。最简单的初始化方法就是： * {padding: 0; margin:.

2020-05-19 18:23:32 747

原创为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

原创 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 9308 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 7899 9

原创 Entity←→Map 实体类与Map的互相转换工具类

在service使用MyBatisPlus的QueryWrapper进行数据库查询时,如果查询结果只有一条,而且又想把它变成一个map的时候就需要自定义一个转换工具类了(此处不考虑通过引入依赖解决的办法)MapEntityUtilpackage com.whylost.hrserver.utils;import java.lang.reflect.Field;import java.lang.reflect.Modifier;import java.util.HashMap;import ja

2020-05-12 21:18:24 850

原创 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 4091

原创 Controller 统一格式(增删改查)

Controller 统一格式(增删改查)RestFul Api 不应该带有动词,只写资源名称即可 /** * GET 方法(查) * @return */ @GetMapping("/") public RDataJson GET(){ // 调用 Service 业务逻辑方法 List<T> List = Service.GET(); // 返回统一结果 return RDataJson.SUCCESS().data("List",

2020-05-10 22:45:49 1438

原创 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

whylost