css细节
- 写界面时：一般先写HTML，然后补充css,此时是有可能改变HTML结构的。最后写js。很多全局都看可能用到的变量，函数，例如色号。字体大小等，可以统一新建一个helper.scss文件，放在assets。
- 在给z-index时需要先给一个相对定位
position:relative; - 可以通过获取屏幕宽度，通过宽度来判断是否需要做某些操作。
const width = document.documentElement.clientWidth;
//获取屏幕宽度。
-
选中和未选中的状态进行切换，可以用
:class="{checked:xxx}"来进行。如果xxx是false，则class没有值，如果xxx是true，则class值为checked。xxx可以通过传值传入。 -
x-link或者a标签的选中态做法：
active-class="selected"，此时点击，就会给点击的元素加上一个selected的class。 -
子组件的CSS不可以用scoped。父组件可以。
-
Teleport组件可以将包含的元素的环境移动到指定环境内，避免被遮挡。
<teleport to="body">
//将环境移动到body内
-
获取element元素的宽，高，顶部，左部的位置，用
const {width,height,top,left} = element.getBoundingClientRect()。可以获取四个值。 -
clip-path:ellipse(xx xx at xx xx)可以用来在css里画圆弧。具体参数自行尝试。 -
子元素的字体不会继承父元素的字体，所以需要继承时加上
font:inherit;
-弹出有输入框的弹窗提示：window.prompt('信息xxx')，弹出仅提示的弹框：window.alert('标签名不能为空')。
-
无法用import将js文件导入到ts文件，用require。
-
做布局时，如果只有两个元素，一个在左，一个居中，此时可以再做一个不展示的元素，然后
display:flex；
justify-content:center;
align-items:center
这样就不需要绝对定位，就可以做到居中对齐的效果，不展示的元素大小需要和左边展示的元素大小一致，才更好保证中间的居中。
插槽
父组件引用子组件时，在组件元素之间写内容时并不会显示。加上标签就可以使所写的内容渲染出来。
如果需要渲染多段内容，则需要使用到具名插槽。
//子组件内，使用不同插槽
<header>
<slot name="title"></slot>
<span @click="close" class="you-dialog-close"></span>
</header>
<main>
<slot name="content"></slot>
</main>
//父组件内给需要展示的内容插槽命名
<Dialog>
<template v-slot:title>
<strong>可编辑的标题</strong>
</template>
<template v-slot:content>
<div>这是第一行内容</div>
<div>这是第二行内容</div>
</template>
</Dialog>
此时就可以在子组件内渲染出父组件引用子组件时，子组件包裹的内容了。
获取插槽的内容：
在HTML里，直接用slot标签，在JS里，用const defaults = context.slots.default()。
