Element-ui Drawer抽屜按需引入基礎(chǔ)使用
更新時(shí)間：2023年07月06日 11:46:22 作者：菜園前端
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
Element-ui Drawer 抽屜
展示另外一種彈窗效果
按需引入方式
如果是完整引入可跳過此步驟
import Vue from 'vue'
import { Drawer } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/drawer.css'
Vue.use(Drawer)基礎(chǔ)使用
<template>
<div>
<el-radio-group v-model="direction">
<el-radio label="ltr">從左往右開</el-radio>
<el-radio label="rtl">從右往左開</el-radio>
<el-radio label="ttb">從上往下開</el-radio>
<el-radio label="btt">從下往上開</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;"> 點(diǎn)我打開 </el-button>
<el-drawer title="我是標(biāo)題" :visible.sync="drawer" :direction="direction">
<span>我來啦!</span>
</el-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl'
}
}
}
</script>Drawer Attributes
以上就是Element-ui Drawer抽屜按需引入基礎(chǔ)使用的詳細(xì)內(nèi)容，更多關(guān)于Element-ui Drawer抽屜的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家?guī)硪黄獀ue引入jq插件的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來給元素或子組件注冊(cè)引用信息。引用信息會(huì)被注冊(cè)在父組件上的$refs對(duì)象上，下面來看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
徹底搞懂并解決vue-cli4中圖片顯示的問題實(shí)現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解
這篇文章主要為大家介紹了Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例
今天小編就為大家分享一篇vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue如何修改瀏覽器的標(biāo)題title問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-router中query和params的區(qū)別解析
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下2022-10-10
vue3+elementUI實(shí)現(xiàn)懸浮多行文本輸入框效果
這篇文章主要為大家詳細(xì)介紹了vue3如何引用elementUI實(shí)現(xiàn)懸浮文本輸入框效果,以便實(shí)現(xiàn)多行文本輸入,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Vue.js 實(shí)現(xiàn)地址管理頁面思路詳解(地址添加、編輯、刪除和設(shè)置默認(rèn)地址)
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)地址管理頁面的思路(地址添加、編輯、刪除和設(shè)置默認(rèn)地址),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)步驟(純js)
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)的相關(guān)資料,在vue項(xiàng)目中實(shí)現(xiàn)點(diǎn)擊圖片放大功能相信對(duì)大家來說都不陌生,文中給出了詳細(xì)的js示例代碼,需要的朋友可以參考下2023-07-07