记自己在开发中常用的东西(持续更新中……)

1、watch的写法

监听data中的值

	cur(news, olds) {
	window.scrollTo(0,0)

监听state中的值

	'$store.state.orderType':function() {
		......
	}

2、启动dist目录

	// 全局安装serve
	npm install -g serve
	// 运行打包后的文件
	serve -s dist

3、使用css变量

	:root {
	--bg-color: red;
	
	.title {
		background-color: var(--bg-color)
	}
	.desc {
		background-color: var(--bg-color)
	}

4、事件总线的创建方法

eventBus、layout.vue、selection.vue

	import Vue from 'vue'
	const eventBus = new Vue()
	export { eventBus }

layout.vue

	<template>
		<div @click="resetComponent">
		</div>
	</template>
	methods: {
		resetComponent() {
		eventBus.$emit('reset-component')
	}

selection.vue

	mounted() {
		eventBus.$on('reset-component', ()=> {
			this.isDrop = false
		})
	},
	methods: {
		toggleDrop(event){
			eventBus.$emit('reset-component')
			this.isDrop = !this.isDrop
		}
	)

5、使用element的messagebox和message时，刷新页面时弹出空的提示框

解决方式是将Vue.use(MessageBox)或Vue.use(Message)改为Vue.component(MessageBox)或Vue.component(MessageBox
6、美化选中框

	<label>
		<input type="checkbox" hidden />
		<span class="square"></span>
	</label>
<style>
.square {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid #999;
}  
input[type="checkbox"]:checked + .square:after {
    content: "";
    width: 14px;
    height: 14px;
    display: block;
    color: #202020;
    border-radius: 2px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 1;
}
input[type="checkbox"]:checked + .square:before {
    content: "";
    font-weight: bold;
    display: block;
    border-radius: 2px;
    text-align: center;
    width: 6px;
    height: 9px;
    border-right:#202020 solid 2px;
	border-bottom:#202020 solid 2px;
    transform:rotate(40deg);
    position: absolute;
    top: 1px;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 2
}
input[type="checkbox"]:checked + .square {
    border: 1px solid transparent;
    background: #626262;
    position: relative;

}
</style>

7、word-wrap对长的不可分割的单词进行换行，word-wrap: break-word

8、边框图片：border-image: url(border.png) 30 30 round

9、用css写一个三角形

	width:: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 30px solid #333;

10、让页面字体遍布清晰、变细用css做

在window系统下没有作用，但在ios设备上起作用

	-webkit-font-smoothing: antialiased

11、flex布局中的几个属性

aign-items

	// flex-start: 起点对齐
	// flex-end: 终点对齐
	// center: 中点对齐
	// baseline: 第一行文字的基线对齐
	// stretch: 如果项目未设置高度或者为auto，将占满整个容器的高度
	.box {
		align-items: flex-start | flex-end | center | baseline | stretch
	}

align-self: 允许单个项目和其他项目不一样，可覆盖align-items

	.item {
		align-self: auto | flex-start | flex-end | center | baseline | stretch
	}

flex-shrink: 定义项目的缩小比例，默认1，如果空间不足，项目将缩小

	.item {
		flex-shrink: 2
	}

12、合理使用变量

• 当设计稿中某一类元素都是用相同的字体大小，颜色，行高等样式属性时，可以将这些值存放在变量中

// sass
$direction: left;
// less
@direction: left;

• css也存在原生变量：

  语法： --变量名

:root {
	--width: 100px;
	--height: 100px;
}
.button {
	width: calc(0.8 * var(--width));
	height: calc(0.8 * var(--height));
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
}

13、解决多次点击相同路由报错问题

方法一：降低版本

	npm i vue-router@3.0 -s

方法二：在router的配置文件router/index.js中添加代码

	
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

方法三：捕获异常

	this.$router.push().catch(err => {
	})

方法四：补齐第三个参数

	this.$router.push(route,() => {}, (e) => {
	})

14、原生添加删除class样式

document.getElementsByTagName('body')[0].classList.add('fixedlayout')
    
document.getElementsByTagName('body')[0].classList.remove('fixedlayout')

15、encodeURIComponent()可以把字符串作为URI组件进行编码

在传递url的时候，如果出现空格这样的特殊字段，后台只会读取到空格前面的内容，后面的内容丢失，造成戴护具读取失败，但是如果用encodeURIComponent()包裹一下，那么这些特殊字符讲进行转移，这样就能读取成功了

16、img会在底部撑出4px大小的空白使用display: block或者vertival-align: bottom可以解决

17、如果UI设计的适配图可以自动适配屏幕大小不需要写自适应和大小

18、drop-shadow()

**注意：**这个函数类似于box-shadow属性 box-shadow属性是在元素的整个框后面创建一个矩形的阴影，而drop-shadow()是创建一个符合图像本身形状的阴影

	drop-shadow(16px 16px 10px black)

19、数组/对象更新 视图不更新

由于js的限制，vue不能检测数组的直接变动，以及对象的添加/删除

	arr:[1,2,3,4,5]
	obj: {
		a: 1,
		b: 2
	}

解决方式：
1、this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

	this.$set(this.arr, 0, '123')
	this.$set(this.obj, "c", "456")

2、数组原生方法触发视图更新，数组原生方法

	splice()、push()、pop()、shift()、unshift()、sort()、reverse()

20、filters的使用

	{{message | filterTest}}
	
	export default {
		data() {
			return {
				message: 1
			}
		},
		filters: {
			filtersTest(value) {
				if(value === 1) {
					return '最后输出的值'
				}
			}
		}
	}

21、style的scoped在组件中用js动态创建dom，添加样式不生效

	<template>
         <div class="test"></div>
    </template>
    <script>
        let a=document.querySelector('.test');
        let newDom=document.createElement("div"); // 创建dom
        newDom.setAttribute("class","testAdd" ); // 添加样式
        a.appendChild(newDom); // 插入dom
    </script>
    <style scoped>
	    .test{
	       background:blue;
	        height:100px;
	        width:100px;
	    }
	    .testAdd{
	        background:red;
	        height:100px;
	        width:100px;
	    }
    </style>

原因：
scoped只作用于当前组件中的元素，它会为组件中所有的标签和class样式添加一个scoped标识，动态添加的dom没有scoped添加的标志，没有跟testAdd的样式匹配起来，导致样式失效
解决方式
1、去掉该组件的scoped
2、动态添加style

newDom.style.height = '100px'
newDom.style.width =  '100px'
newDom.style.background = 'red'

22、绝对定位居中

position: absolute;
left: 50%;
tranform: translateX(-50%)

23、更改v-html渲染的标签样式

给包含v-html写上class名称，使用深度选择器更改样式，例如：

.test >>> * {
	color: #fff;
	test-align: left
}

24、设置prettier格式化末尾不适用分号

在settings.json中添加以下代码

 "vetur.format.defaultFormatterOptions": {
	  "prettier": {
           "semi": false
       }
  }

25、line-height

有时候会遇到设置了line-height之后发现文字并没有完全垂直居中对齐，这是怎么回事呢？这是因为不同的字体会有不同的默认字体行高，因此在字体大小、行高和文本框不变的情况下，更改字体也会导致文本对齐存在偏差
解决办法：css草案

	h1 {
		text-edge: cap alphabetic;
		leading-trim: both
	}