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全屏screenfull通用解决方案及原理详细分析
这篇文章主要给大家介绍了关于前端Vue全屏screenfull通用解决方案及原理的相关资料,使用screenfull这一第三方库可以实现更稳定的全屏功能,需要的朋友可以参考下2024-10-10
最新评论