vue實(shí)現(xiàn)抽屜彈窗效果

更新時(shí)間：2020年11月15日 10:11:53 作者：時(shí)光荏苒

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)抽屜彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

<template>
 <div>
 <div :class='{"itemCount":true,"leftT":!leftShow,"left":leftShow}'>//這種寫法是動(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問題及解決
這篇文章主要介紹了vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問題
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細(xì)的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下
2023-08-08
VUE前端導(dǎo)出文件之file-saver插件安裝使用教程
這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個(gè)用于保存文件的JavaScript庫,它提供了一種簡(jiǎn)單的方式來生成和保存文件,支持各種文件類型,例如文本文件、圖片、PDF等,需要的朋友可以參考下
2024-05-05
在Vue3中實(shí)現(xiàn)虛擬列表的方法示例
文章主要介紹在 Vue3 中實(shí)現(xiàn)虛擬列表的方法,包括原理和代碼實(shí)現(xiàn),原理是只渲染可視區(qū)域內(nèi)的列表項(xiàng),通過設(shè)置子數(shù)據(jù)項(xiàng)高度、計(jì)算可視區(qū)域、渲染可視區(qū)域、滾動(dòng)監(jiān)聽、設(shè)置緩沖列表項(xiàng)等提升性能,感興趣的小伙伴跟著小編一起來看看吧
2025-01-01
使用vue3實(shí)現(xiàn)element-plus的主題切換效果
Vue3 Element Plus是一個(gè)基于Vue 3框架的UI組件庫,它是由Element UI團(tuán)隊(duì)開發(fā)的升級(jí)版本,Element Plus延續(xù)了Element UI簡(jiǎn)潔、高效的風(fēng)格,并引入了一些新的設(shè)計(jì)語言和技術(shù),如響應(yīng)式API和更好的性能優(yōu)化,本文給大家介紹了如何使用vue3實(shí)現(xiàn)element-plus的主題切換效果
2024-12-12
Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法
這篇文章主要介紹了在Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼
這篇文章主要介紹了vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
Vue 使用中的小技巧
這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開發(fā)的時(shí)候用到的小技巧，需要的朋友可以參考下
2018-04-04
解決electron打包vue-element-admin項(xiàng)目頁面無法跳轉(zhuǎn)的問題小結(jié)
這篇文章主要介紹了解決electron打包vue-element-admin項(xiàng)目頁面無法跳轉(zhuǎn)的問題小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
前端vue3樹形組件使用代碼示例
最近在開發(fā)時(shí)遇到一個(gè)問題,是在輸入框里面放一個(gè)樹形組件,這篇文章主要給大家介紹了關(guān)于前端vue3樹形組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07