普通插槽
父组件
<template>
<van-panel title="普通插槽">
<Child>hello child,我来自父组件</Child>
</van-panel>
</template>
<script>
import Child from "./Child";
export default {
components: {
Child
}
};
</script>
<style>
</style>
子组件
<template>
<div style="border: 1px solid green;">
<h4>这是Child组件</h4>
<!-- 用来存放父组件的内容 -->
<slot></slot>
<p>我喜欢编程</p>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
具名插槽(有名字的插槽)
<template>
<van-panel title="具名插槽">
<Child>
<p slot="left">
<van-button>左边</van-button>
</p>
<p slot="right">
<van-button>右边</van-button>
</p>
</Child>
<!-- vant的slot -->
<div slot="footer">
<van-button type="primary">点击</van-button>
</div>
</van-panel>
</template>
<script>
import Child from "./Child";
export default {
components: {
Child
}
};
</script>
<style>
</style>
子组件
<template>
<div class="flex jc-sa" style="border: 1px solid green;">
<!-- 接收父组件对应的内容 -->
<slot name="left"></slot>
<!-- <slot name="right"></slot> -->
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
rem适配
- 1、rem与px 的换算
计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem - 2、移动端自适应网页
1.自适应: 当屏幕的像素变大的时候,字体和元素也响应变大
2.什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
3.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变
html {
font-size: 100px;
}
body {
font-size: 16px;
}
h1 {
font-size: 0.12rem;
}
// 试试手机为ip6plus和ip5时,div的宽高各是多少(px)
div {
width: 1rem;
height: 1rem;
background: gray;
line-height: 1rem;
}
</style>
</head>
<body>
<script>
function resetWidth() {
// 兼容ie浏览器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<div>
内容
</div>
</body>
</html>
- 3、 postcss-pxtorem 像素自动转换成rem
写px的时候能够主动转换成rem，使用 postcss-pxtorem就能实现
1.安装postcss-pxtorem
npm i postcss-pxtorem --save-dev
2.项目根目录下的package.json，postcss的plugins里添加下面的代码
"postcss-pxtorem": {
"rootValue": 100,
"propList": [
"*"
]
}
