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抽屉的资料请关注脚本之家其它相关文章!
相关文章
vue3中el-table实现多表头并表格合并行或列代码示例
这篇文章主要给大家介绍了关于vue3中el-table实现多表头并表格合并行或列的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02解决Echarts2竖直datazoom滑动后显示数据不全的问题
这篇文章主要介绍了解决Echarts2竖直datazoom滑动后显示数据不全的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)
使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下2023-04-04
最新评论