目錄
1-SKU列表
2-SKU上下架
?3-SKU詳情
1-SKU列表
當用戶點擊Sku管理，組件掛載的時候，我們需要獲取sku列表信息；但是獲取列表方法在分頁列表改變頁碼和每頁顯示大小的時候也需要觸發(fā)，我們封裝為一個方法。
//sku列表的接口 /admin/product/list/{page}/{limit}
export const reqSkuList = (page,limit)=>request({url:`/admin/product/list/${page}/${limit}`,method:'get'});
?
2-SKU上下架
當我們點擊列表中操作的上架下架按鈕時，需要調用相關的接口向服務器發(fā)送請求，并且改變圖片箭頭的方向，這里需要添加一個變量來控制。
//上架 /admin/product/onSale/{skuId}
export const reqSale = (skuId)=>request({url:`/admin/product/onSale/${skuId}`,method:'get'});
?
//下架 /admin/product/cancelSale/{skuId}
export const reqCancel = (skuId)=>request({url:`/admin/product/cancelSale/${skuId}`,method:'get'});
?
? 3-SKU詳情
當用戶點擊列表的查看詳情按鈕的時候，我們需要從右向左實現(xiàn)抽屜效果，需要請求服務器獲取數(shù)據(jù)；實現(xiàn)抽屜效果需要用到el-drawer組件。商品圖片還需使用輪播圖效果el-carousel；
//獲取SKU詳情的接口 /admin/product/getSkuById/{skuId} ?get
export const reqSkuById = (skuId)=>request({url:`/admin/product/getSkuById/${skuId}`,method:'get'});
?
?一般情況下，在組件的樣式中添加scoped只會影響到自己組件的樣式，不會影響到子組件的樣式。但是如果想在父組件的樣式中加上scoped也影響到子組件，需要使用到深度選擇器。深度選擇器可以實現(xiàn)樣式穿透。
原始css? >>>
less? /deep
scss ::v-deep
這里我們將輪播圖上的小點點在scoped使用深度選擇器，實現(xiàn)樣式穿透>>>
?為了使圖片好看，我們給圖片加了一個寬和高文章來源：http://www.zghlxwxcb.cn/news/detail-423759.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-423759.html
到了這里，關于管理后臺項目-05-SKU列表-上下架-詳情抽屜效果-深度選擇器的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[golang gin框架] 26.Gin 商城項目-前臺自定義商品列表模板, 商品詳情數(shù)據(jù)渲染,Markdown語法使用](https://imgs.yssmx.com/Uploads/2024/02/430041-1.png)
