本文實(shí)例為大家分享了vue實(shí)現(xiàn)抽屜彈窗效果的具體代碼，供大家參考，具體內(nèi)容如下

以下代碼比較簡(jiǎn)單。主要就是實(shí)現(xiàn) 側(cè)邊彈窗而且不會(huì)影響頁(yè)面操作的方式，求點(diǎn)贊！！！不多說(shuō)直接貼代碼。

<template> <div> <div :class=’{'itemCount':true,'leftT':!leftShow,'left':leftShow}’>//這種寫(xiě)法是動(dòng)態(tài)獲取樣式 <div style='font-size:60px;'>表格數(shù)據(jù)</div> <div>//下面就是彈框內(nèi)的樣式。按自己需要放樣式（我這里拿表格舉例吧） <el-table :data='tableData' style='width: 100%'> <el-table-column prop='date'label='日期'width='150'> </el-table-column> <el-table-column label='配送信息'> <el-table-column prop='name'label='姓名'width='120'> </el-table-column> <el-table-column label='地址'> <el-table-column prop='province' label='省份' width='120'> </el-table-column> <el-table-column prop='city' label='市區(qū)' width='120'> </el-table-column> <el-table-column prop='address' label='地址' width='300'> </el-table-column> <el-table-column prop='zip' label='郵編' width='120'> </el-table-column> </el-table-column> </el-table-column> </el-table> </div> </div> </div></template>export default { data(){ leftShow:false}}<script></script><style lang=’less’ scoped> //下面是設(shè)置的樣式。就可以實(shí)現(xiàn)了。 .itemCount { position: absolute; top: 30%; background: yellowgreen; height:600px; padding: 10px; width:1000px; z-index: 2 } .left { left:0; transition: left 0.5s; } .leftT { left:-1200px; transition: left 0.5s;</style>

如下圖：

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。