Element-ui Drawer抽屉按需引入基础使用

 更新时间:2023年07月06日 11:46:22   作者:菜园前端  
这篇文章主要为大家介绍了Element-ui Drawer抽屉按需引入基础使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

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)

基础使用

<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;"> 点我打开 </el-button>
        <el-drawer title="我是标题" :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抽屉按需引入基础使用的详细内容,更多关于Element-ui Drawer抽屉的资料请关注脚本之家其它相关文章!

相关文章

  • vue2 全局变量的设置方法

    vue2 全局变量的设置方法

    下面小编就为大家分享一篇vue2 全局变量的设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于Vue3过渡动画踩坑的相关资料,需要的朋友可以参考下
    2021-12-12
  • vue openlayers实现台风轨迹示例详解

    vue openlayers实现台风轨迹示例详解

    这篇文章主要为大家介绍了vue openlayers实现台风轨迹示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue实现将时间戳转换成日期格式

    vue实现将时间戳转换成日期格式

    这篇文章主要介绍了vue实现将时间戳转换成日期格式方式,具有很好的参考价值,希望对大家有所帮助,
    2023-10-10
  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本篇文章主要介绍了vue父子组件的嵌套的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 在vue中使用SockJS实现webSocket通信的过程

    在vue中使用SockJS实现webSocket通信的过程

    最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,下面小编把实现过程记录下来,对vue中使用SockJS实现webSocket通信的相关知识感兴趣的朋友一起看看吧
    2018-08-08
  • 深入浅出 Vue 系列 -- 数据劫持实现原理

    深入浅出 Vue 系列 -- 数据劫持实现原理

    深入浅出 Vue 系列 -- 数据劫持实现原理
    2019-04-04
  • 前端Vue全屏screenfull通用解决方案及原理详细分析

    前端Vue全屏screenfull通用解决方案及原理详细分析

    这篇文章主要给大家介绍了关于前端Vue全屏screenfull通用解决方案及原理的相关资料,使用screenfull这一第三方库可以实现更稳定的全屏功能,需要的朋友可以参考下
    2024-10-10
  • django中使用vue.js的要点总结

    django中使用vue.js的要点总结

    在本篇文章里小编给各位整理了关于django中使用vue.js需要注意的地方以及相关知识点,需要的朋友们跟着学习参考下。
    2019-07-07
  • vue2安装vue-router报错的解决方法

    vue2安装vue-router报错的解决方法

    vue-router的安装不是理想化的,会出现问题,需要静下心认真研究,熬过去就会懂得更多,这篇文章主要给大家介绍了关于vue2安装vue-router报错的解决方法,需要的朋友可以参考下
    2022-03-03

最新评论