关于前端:Elementui-Drawer-抽屉

Element-ui Drawer 抽屉

原文链接：https://note.noxussj.top/?source=sifo

展现另外一种弹窗成果

按需引入形式

如果是残缺引入可跳过此步骤

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

原文链接：https://note.noxussj.top/?source=sifo