普通插槽
父組件
<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>
<!-- 用來存放父組件的內(nèi)容 -->
<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;">
<!-- 接收父組件對應(yīng)的內(nèi)容 -->
<slot name="left"></slot>
<!-- <slot name="right"></slot> -->
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
rem適配
- 1、rem與px 的換算
計算公式: 元素的寬度(或高度) / html元素(跟標(biāo)簽)的font-size = rem;
舉例 元素的寬度是 200px, html的font-size是100px, 那么元素寬度的rem大小 = 200/100 = 2rem - 2蝶防、移動端自適應(yīng)網(wǎng)頁
1.自適應(yīng): 當(dāng)屏幕的像素變大的時候,字體和元素也響應(yīng)變大
2.什么是視口: 移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域
3.代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 視口寬度與設(shè)備寬度一樣 禁止用戶縮放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 當(dāng)我們拖動網(wǎng)頁或者剛改手機的時候,html的font-size會發(fā)生改變
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);
// 默認(rèn)的設(shè)置是375px(ip6)的根元素設(shè)為100px, 其他的手機都相對這個進行調(diào)整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<div>
內(nèi)容
</div>
</body>
</html>
- 3明吩、 postcss-pxtorem 像素自動轉(zhuǎn)換成rem
寫px的時候能夠主動轉(zhuǎn)換成rem，使用 postcss-pxtorem就能實現(xiàn)
1.安裝postcss-pxtorem
npm i postcss-pxtorem --save-dev
2.項目根目錄下的package.json印荔，postcss的plugins里添加下面的代碼
"postcss-pxtorem": {
"rootValue": 100,
"propList": [
"*"
]
}
