2020年07月_卿卿qing

原创涨芝士：关于git分支命名规范

git 分支分为集成分支，功能分支，修复分支，分别命名为 develop，feature，hotfix，均为单数，不可使用 features，hotfixs 等错误名称master：主分支，永远是可用的稳定版本，不能直接在该分支上开发develop：开发分支，所有新功能以这个分支来创建自己的开发分支，该分支只做合并操作，不能直接开发feature-xxx：功能开发分支，在develop上创建分支，以自己开发功能模块命名，功能测试正常后合并到develop分支feature-xxx-fix：功能.

2020-07-30 11:59:48 230

原创 ElementUI：关于 el-form 必填项的校验规则

<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"> <el-form-item label="联系方式" prop="mobilePhone" /> <el-form-item label="电子邮箱" prop="email"

2020-07-29 17:24:38 1399

原创初识tag标签

记录版本迭代，标记发布节点详解

2020-07-28 14:52:40 159

原创 code：俩个不同的数组条件筛选

list: [ { id: "1", name: "暗夜行者-完整版", tags: ["3","5","6"] }, { id: "2", name: "蹦蹦小开心-高潮版", tags: ["2","4"] }, { id: "3", name: "蹦蹦小开心", tags: ["1","2","4"] }]type: [ { id: "1" name: "美食" }, { id: "2" name: "逛街" }, {

2020-07-28 11:36:39 153

原创 element-ui 循环遍历 el-select 时，如何正确绑定 v-model

通过 ind 唯一性，来判断是哪个select<div v-for="(el,ind) in uploadMusiceInfo.tag" :key="ind" style="display: inline-block"> <el-select v-model="uploadMusiceInfo.innerTagVal[ind]" :value="el.id" multiple clearable :placeholder="e.

2020-07-27 19:25:28 6264 2

原创涨芝士：使用nginx命令发布项目

scp -r down.html root@106.15.195.37:/webAdmin/dist // 把down.html发布在dist文件下scp -r dist root@106.15.195.37:/webAdmin // 把dist文件发布在webAdmin下

2020-07-20 12:03:35 157

原创 JavaScript：if 判断语句

if (res.code === 200) { if (res.data.length === 0) { if (this..pageNum === 1) { this.list = [] this.$message('没有评论') } else { this.$message('显示全部评论') this.isScroll = false } } else { this.list = res.data }}

2020-07-17 19:48:54 800

原创涨芝士：VScode如何在俩个窗口打开同一个项目（目录）

在工作区打开项目在 File > Add Folder to Workspace… 另存一个name.code-workspace文件新开一个vscode窗口，打开新文件即可实现俩个窗口打开同一个项目

2020-07-17 12:28:24 8618 9

原创涨芝士：vue 如何修改 element-ui 里的 placeholder 字体颜色

& ::placeholder { color: #000;}注意： & 后面有空格，否则不生效

2020-07-16 18:46:50 2719 1

原创 element-ui 解决 el-select 设置默认值后无法切换选项

原因：select已经绑定了值，render函数没有自动更新，数据刷新了但是视图没有刷新解决方法：使用this.$forceUpdate()重新render<el-select v-model="ruleForm.region" placeholder="请选择角色" @change="handleSelectChange"> <el-option v-for="item in roleOption" :key="item.id"

2020-07-16 14:58:23 3837 6

原创解锁新技能：如何去除element-ui中el-drawer标题自带蓝色框

通过穿透样式来修改:focus的属性/deep/ :focus { outline: 0;}

2020-07-16 14:31:21 2724

原创涨芝士：vue如何通过this.$emit接收参数

一个参数时子组件this.$emit('handleClick', item)父组件<div @handleClick="handleClickFn($event)" />handleClickFn (msg) { let item = msg}多个参数时子组件this.$emit('handleClick', item, true)父组件<div @handleClick="handleClickFn(arguments)" />handleClickF.

2020-07-16 14:27:20 1794

原创解锁新技能：vue如何渲染嵌套数据递归展示

数据结构如下：data: { return { lists: [{ name: '1', children: [{ name: '11', children: [{ name: '111', children: [{ name: '1111' }] }] }] }, { name: '2', children: [{ name: '22', }, { name: '22

2020-07-16 12:18:41 1320 1

原创解锁新技能：vue动态添加样式

<li v-for="(chatting,index) in item" :key="index" :class="{'user_right':chatting.user_id}">运用三元运算符<li v-for="(chatting,index) in item" :key="index" :class="chatting.user_id ? 'user_right' : '' ">

2020-07-15 11:21:03 259

原创涨芝士：如何截取指定字符后面的部分

let inpVal = '回复 xxx: 今天真美'要求：截取': '后面的内容let staInd = inpVal.indexOf(': ')inpVal = inpVal.substring(staInd + 1, inpVal.length)console.log(inpVal) // 今天真美

2020-07-15 11:16:53 137

原创涨芝士：取消input获得焦点属性focus

watchwatch 首次变化不触发事件props: { isFlag: { type: Boolean, default: false }},watch: { 'isFlag'(val) { if (val) { doSome() } }}首次加载，如果isFlag的值改变的话，isFlag里的if判断是不会执行的解决方法：computedprops: { isFlag: { type: Boolean, default: false }

2020-07-13 21:29:51 858

原创涨芝士 - HTML：iframe

window.postMessage()，可以安全的实现跨源通信（不是浏览器的两个Tab页，而是一个页面中嵌套iframe的跨源通信）<iframe src="http://127.0.0.1:8888" frameborder="0" id="myIframe" ></iframe>// 3s以后发postMessage通知子框架修改body颜色setTimeout(function () { const iframe = document.querySelecto.

2020-07-13 19:39:28 128

原创 Vue 中 watch 和 computed 的区别

监听某个属性，被监听的属性值发生变化就会执行函数函数执行后，获取的 newVal 值和 oldVal 值不一样'userInfo.userType'(newVal, oldVal) { doSome()}监听整个对象，每个属性值的变化都会执行handler属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的userInfo: { // 每个属性值发生变化就会调用这个函数 handler(newVal, oldVal) { conso.

2020-07-13 12:27:48 132

原创 vue如何阻止事件冒泡/取消默认事件

.stop.prevent出现情况代码如下：<div @click="handle(item)" class="div1"> <div @click="handle(el)" class="div2"></div></div>handle(el) { console.log(el) // div1点击打印div1值，div2点击分别打印div1，div2的值}想要只打印当前点击的值，就需要阻止事件冒泡，在vue中，我们这样绑定事件可以实现

2020-07-11 17:41:18 3577

原创 el-input输入框输入内容同时不清空placeholder

实现el-input的placeholder失去焦点或获得焦点时都不清空<el-input type="text" placeholder="回复xxx:" :placeholder="dialogInfo.placeNick" :onfocus="dialogInfo.placeNick" :onblur="dialogInfo.placeNick" />

2020-07-11 17:32:53 1836 2

原创简易实现上拉加载操作（vue滚动条事件 - 获取滚动条距离底部距离）

通过获取到滚动条距离底部的距离，可以实现上拉加载操作有滚动条，div一定要设固定高度，然后overflow: auto出现滚动条<div @scroll.passive="gotoScroll($event)" style="height: 100px; overflow: auto"></div>passive是使滚动更加流畅，减少卡顿gotoScroll(event) { // 滚动条距离底部的距离scrollBottom let scrollBottom =

2020-07-11 16:04:39 823

原创关于vue的this.$refs打印为undefined解决方法

在template里定义了ref元素<div ref="secoller" ></div>updated() { console.log(this.$refs.secoller) // <div ref="secoller" ></div>}详解：ref本身是作为渲染结果被创建的，在初始渲染的时候访问不到它们 - 它们是不存在的。只有等页面加载完成好之后才能调用this.$refs。如果在mounted里获取，此时dom还未完全加载，所

2020-07-11 15:49:54 6543 1

原创 vue报错：Type of the default value for data prop must be a function

出现情况：props: { propsA: { type: Object, default: {} }}解决方法：props: { propsA: { type: Object, default: _ => { return { id: '', name: '' } } }}

2020-07-10 11:39:51 911

原创 ESLINT 配置

{ "explorer.confirmDelete": false, "window.zoomLevel": 0, "editor.parameterHints": true, "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "git.ignoreMissingGitWarning": true,

2020-07-08 13:27:35 148

原创 vue报错: [eslint-plugin-vue] [vue/valid-v-for] [vue/no-parsing-error]

具体报错信息：[vue/valid-v-on]Avoid using JavaScript keyword as "v-on" value: "handleSearchTable".eslint-plugin-vue[vue/no-parsing-error]Parsing error: control-character-in-input-stream.eslint-plugin-vue[vue/no-parsing-error]Parsing error: Unexpected cha

2020-07-08 13:22:42 3386 3

原创 el-table实现点击某行高亮（修改背景色）

添加属性<el-table highlight-current-row />设置样式.el-table__body tr.current-row>td{ background-color: #69A8EA !important; color: #fff;}

2020-07-07 21:37:48 3286 1

原创【Git】git 命令

git命令操作

2020-07-07 21:32:32 337

原创关于 Cannot read property ‘length‘ of null 报错的解决办法

原因：后端没有数据要返回时，给前端返回了null，就报错Cannot read property 'length' of null

2020-07-07 21:11:30 1796

原创原生h5下载app

<div class="btn"> <a class="btn-sty a-btn" href="android" style="display:none">立即下载</a> <a class="btn-sty i-btn" href="ios scheme://" style="display:none">立即下载</a></div>var androidBtn = document.getElementsByClass

2020-07-06 00:16:35 448

原创解析:focus-within css伪类

和:focus产生的效果是一样的，只是区别于产生作用的效果，:focus-within表示一个元素获得焦点，或，该元素的后代元素获得焦点。也就是元素自身或者它的某个后代匹配 :focus 伪类<form> <label for="given_name">Given Name:</label> <input id="given_name" type="text"> <br> <label for="family_name".

2020-07-05 23:19:31 166

原创在html中修改网站logn和标题

2020-07-05 22:16:47 203

原创 README.md实现markdown效果

https://blog.csdn.net/Rain_9155/article/details/82731732操作步骤如下，注意事项在gitlab上直接修改readme.md时，注意先切换需要修改的分支

2020-07-03 14:40:14 129

原创初识delete

场景： this.menus = [{id:1},{id:2},{id:3}];row.id = 3for (const i in this.menus) { if (this.menus[i].id === row.id) { delete this.menus[i].id }}delete 返回boolean类型console.log(delete this.menus[i].id) // trueconsole.log(this.menus) // [{id:1},{id:2

2020-07-01 20:06:05 165

原创在数组对象中添加或删除指定的一项

场景：this.userMenus = [{id:1},{id:2},{id:3}];row.id = 2要求：在this.userMenus数组中找row.id，没有添加，有则删除符合条件这一项const result = this.userMenus.some(item => { if (item.id === row.id) { return true }})if (result) { for (const item in this.userMenus) {

2020-07-01 16:45:36 1431 1

票票的博客