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引入jq插件的实例讲解
下面小编就为大家带来一篇vue引入jq插件的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue中ref的用法及演示
这篇文章主要介绍了Vue中ref的用法及演示，ref被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上，下面来看看文章的详细内容,需要的朋友可以参考一下
2021-11-11
彻底搞懂并解决vue-cli4中图片显示的问题实现
这篇文章主要介绍了彻底搞懂并解决vue-cli4中图片显示的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
Vue2 Observer实例dep和闭包中dep区别详解
这篇文章主要为大家介绍了Vue2 Observer实例dep和闭包中dep区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue+elementui 对话框取消表单验证重置示例
今天小编就为大家分享一篇vue+elementui 对话框取消表单验证重置示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue如何修改浏览器的标题title
这篇文章主要介绍了vue如何修改浏览器的标题title问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue-router中query和params的区别解析
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了vue-router中query和params的区别 ,需要的朋友可以参考下
2022-10-10
vue3+elementUI实现悬浮多行文本输入框效果
这篇文章主要为大家详细介绍了vue3如何引用elementUI实现悬浮文本输入框效果,以便实现多行文本输入,感兴趣的小伙伴可以跟随小编一起学习一下
2023-10-10
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
这篇文章主要介绍了Vue.js 实现地址管理页面的思路(地址添加、编辑、删除和设置默认地址),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
vue点击单张图片放大实现步骤(纯js)
这篇文章主要给大家介绍了关于vue点击单张图片放大实现的相关资料,在vue项目中实现点击图片放大功能相信对大家来说都不陌生,文中给出了详细的js示例代码,需要的朋友可以参考下
2023-07-07