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抽屉的资料请关注脚本之家其它相关文章!

相关文章

  • 解读为什么vue前端项目要使用Nodejs

    解读为什么vue前端项目要使用Nodejs

    这篇文章主要介绍了解读为什么vue前端项目要使用Nodejs问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • windows下vue-cli导入bootstrap样式

    windows下vue-cli导入bootstrap样式

    这篇文章主要介绍了windows下vue-cli导入bootstrap样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue 的 solt 子组件过滤过程解析

    vue 的 solt 子组件过滤过程解析

    这篇文章主要介绍了vue 的 solt 子组件过滤过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • vue 自定义icon图标的步骤

    vue 自定义icon图标的步骤

    这篇文章主要介绍了vue 自定义icon的图标的步骤,文中大概给大家分为两步骤,通过实例图文相结合给大家介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • Element-UI+Vue模式使用总结

    Element-UI+Vue模式使用总结

    这篇文章主要介绍了Element-UI+Vue模式使用总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 一文详解WebStorm如何调试Vue项目

    一文详解WebStorm如何调试Vue项目

    这篇文章主要介绍了如何使用WebStorm进行断点调试,包括配置、启动本地应用程序、设置断点以及使用调试工具等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • Vue项目配置在局域网下访问方式

    Vue项目配置在局域网下访问方式

    这篇文章主要介绍了Vue项目配置在局域网下访问方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 实例详解vue中的代理proxy

    实例详解vue中的代理proxy

    这篇文章主要介绍了vue中的代理proxy,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • vue中关于v-for循环key值问题的研究

    vue中关于v-for循环key值问题的研究

    这篇文章主要介绍了vue中关于v-for循环key值问题的研究,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue项目中 jsconfig.json概念及使用步骤

    vue项目中 jsconfig.json概念及使用步骤

    这篇文章主要介绍了vue项目中 jsconfig.json是什么,本文仅仅简单介绍了 jsconfig .json 的一些基本配置,而 jsconfig .json提供了大量能使我们快速便捷提高代码效率的方法,需要的朋友可以参考下
    2022-07-07

最新评论