slot vue 怎麼用專題及常見問題 - CSDN

總結所做所學

這周做的是一個學長布置的類京東商品列表頁和商品詳情頁，還有很多不懂，沒有全部完成，先把做了什麼，學了什麼，怎麼用組件等小小的記錄一下。不多說

vant 搜索框組件slot使用

可見slot要加template使用

<van-sticky> <van-search v-model="value" placeholder="請輸入搜索關鍵詞" input-align="left" shape="round" background="#0D803D" > <template v-slot:left> <van-icon class="icon-left" name="arrow-left" size="1.7rem" color="white" /> </template> </van-search>

vant組件引入方法
在main.js中引入

import Vant from 'vant'import 'vant/lib/index.css'Vue.use(Vant)

在vue頁面引入

import { Icon, Search, Tab, Tabs, Sticky, Popup } from 'vant'export default { name: 'Search', components: { [Icon.name]: Icon, [Search.name]: Search, [Tab.name]: Tab, [Tabs.name]: Tabs, [Sticky.name]: Sticky, [Popup.name]: Popup, Brand } }

單選

綁定class名為 syntChecked 通過點擊事件將index傳入data中的 selectIndex，噹噹前的index與點擊的index相同時顯示樣式，其他的則不顯示

<ul> <li :class="{ syntChecked: index === selectIndex }" v-for="(item, index) of syntList" :key="index" @click="SyntCheck(item, index)" >{{ item }}<span v-show="index === selectIndex" class="iconfont">&#xe668;</span></li></ul>

多選

綁定樣式通過 xxx.includes() 判斷數組中是否存在該元素，存在時返回true，從而顯示樣式

<span :class="{rightChecked: checkedList.includes(innerItem)}" @click="RightCheck(innerItem)">{{ innerItem }}</span>

通過點擊事件將當前所選內容傳入數組，如果已存在，則通過indexOf獲取所在位置index，通過數組的splice方法刪除從而改變樣式

RightCheck (item) { if (!this.checkedList.includes(item)) { this.checkedList.push(item) } else { var index = this.checkedList.indexOf(item) this.checkedList.splice(index, 1) }}

布局小技巧

通過使用flex布局和在select-item離添加width: 100%可以使當綜合換成字更多的 評價最多 時布局不發生改變

.select-bar { padding: 0.8rem 0.3rem; display: flex; justify-content: space-around; background: white; .select-item { width: 100%; text-align: center; display: inline-block; line-height: 0.625rem; font-family: PingFangSC-Regular; font-size: 0.625rem; color: #999999; letter-spacing: 0; } .select-item:first-child { color: #0D803D; } .select-item:last-child { border-left: 1px solid #999999; color: #0D803D; }}

帶右箭頭的欄

<div class="discount"> <span class="discount-title">優惠</span> <span class="discount-lable">活動預告</span> <span class="discount-desc">08月26日00:00滿兩件,總價打9折</span> <div class="icon-container"><span class="iconfont">&#xe652;</span></div></div>

.discount { position: relative; margin: 1rem 0.5rem; display: flex; align-items: center; span { vertical-align: middle; } .discount-title { font-family: PingFangSC-Semibold; font-size: 0.875rem; color: #333333; letter-spacing: 0; font-weight: bold; margin-right: 0.5rem; } .discount-lable { padding: 0.1rem; background: #e7d3d3; font-family: PingFangSC-Regular; font-size: 0.625rem; color: #D92B2B; letter-spacing: 0; line-height: 0.75rem; border-radius: 0.25rem; margin: 0 0.5rem; } .discount-desc { font-family: PingFangSC-Regular; font-size: 0.75rem; color: #666666; letter-spacing: 0; line-height: 1rem; }}.icon-container { display: flex; align-items: center; height: 100%; position: absolute; right: 0; .iconfont { color: #afafaf; font-size: 0.625rem; }}

橫向滾動

<div class="lable-bar"> <span class="lable-item">返紅包</span> <span class="lable-item" @click="DropDown">品牌<span class="iconfont arrow-down">&#xe658;</span></span> <span class="lable-item">面部防護<span class="iconfont arrow-down">&#xe658;</span></span> <span class="lable-item">面部防護<span class="iconfont arrow-down">&#xe658;</span></span></div>

.lable-bar { background: white; padding: 0.8rem 0.4rem; overflow-x: scroll; white-space: nowrap; .lable-item { margin-left: 0.4rem; padding: 0.4rem 1.2rem; font-family: PingFangSC-Regular; font-size: 0.75rem; color: #666666; letter-spacing: 0; line-height: 1rem; background: rgba(0,0,0,0.03); border-radius: 0.875rem; .arrow-down { font-size: 0.625rem; } }}

下一步計劃

解決手寫彈窗和遮罩問題