[email protected]

右侧弹出窗，可以根据主题风格切换颜色，也可以自定义颜色。

示例

浅色主题

<template>
  <el-button type="primary" @click="dialog = true">
    点我打开抽屉-默认
  </el-button>
  <!-- 嵌套抽屉 -->
  <t-drawer class="light" :visible="dialog" @close="dialog = false">
    <p>我是父抽屉</p>
    <el-button @click="innerDrawer = true">打开子抽屉</el-button>
    <t-drawer class="light" :appendToBody="true" :visible="innerDrawer" size="20%" @close="innerDrawer = false">
      我是子抽屉
    </t-drawer>
  </t-drawer>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  setup() {
    interface State {
      [propName: string]: boolean;
    }
    const state: State = reactive({
      dialog: false,
      innerDrawer: false,
    });

    function handleClick(key: string, value: boolean) {
      state[key] = value;
    }

    return {
      ...toRefs(state),
      handleClick,
    };
  },
});
</script>

深色主题

<template>
  <el-button type="primary" @click="dialog = true">
    点我打开抽屉-默认
  </el-button>
  <!-- 嵌套抽屉 -->
  <t-drawer class="dark" :visible="dialog" @close="dialog = false">
    <p>我是父抽屉</p>
    <el-button @click="innerDrawer = true">打开子抽屉</el-button>
    <t-drawer class="dark" :appendToBody="true" :visible="innerDrawer" size="20%" @close="innerDrawer = false">
      我是子抽屉
    </t-drawer>
  </t-drawer>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  setup() {
    interface State {
      [propName: string]: boolean;
    }
    const state: State = reactive({
      dialog: false,
      innerDrawer: false,
    });

    function handleClick(key: string, value: boolean) {
      state[key] = value;
    }

    return {
      ...toRefs(state),
      handleClick,
    };
  },
});
</script>

自定义样式

<template>
  <el-button type="primary" @click="dialog = true">
    点我打开抽屉-默认
  </el-button>
  <!-- 嵌套抽屉 -->
  <t-drawer class="light" :c-style="cStyle" :visible="dialog" @close="dialog = false">
    <p>我是父抽屉</p>
    <el-button @click="innerDrawer = true">打开子抽屉</el-button>
    <t-drawer class="light" :appendToBody="true" :visible="innerDrawer" size="20%" @close="innerDrawer = false">
      我是子抽屉
    </t-drawer>
  </t-drawer>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  setup() {
    interface State {
      [propName: string]: boolean;
    }
    const state: State = reactive({
      dialog: false,
      innerDrawer: false,
      cStyle:{
        wrapper: {
          default: {
            background: '#f00'
          },
        },
        content: {
          default: {
            background: 'green'
          },
        },
        icon: {
          default: {
            color: 'blue',
          },
        },
      }
    });

    function handleClick(key: string, value: boolean) {
      state[key] = value;
    }

    return {
      ...toRefs(state),
      handleClick,
    };
  },
});
</script>

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/drawer
yarn add @ths-base/drawer

使用

import TDrawer from '@ths-base/drawer';
import '@ths-base/drawer/lib/index.css';
createApp(App).use(TDrawer);

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TDrawer);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------------- | ---------------------------------------------------------------------------- | ------------------ | ------------------ | ------ | | visible | 是否可见 | boolean | -- | false | | width | 弹框宽度 | string(100px，20%) | -- | 30% | | button-color | 关闭按钮颜色 | string | -- | #333 | | background-color | 弹框背景色 | string | -- | #fff | | theme-style | 主题风格 | number | 1-light，2-dark | 1 | | modal | 是否需要遮罩层 | boolean | -- | true | | close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean | -- | true | | destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 ? | boolean | -- | true | | append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true | boolean | -- | false | | direction | Drawer 打开的方向 可选值：rtl（从右往左开） | string | rtl，ltr，ttb，btt | rtl | | is-show-close | 是否显示关闭按钮 | boolean | -- | true |

事件

| 事件名称 | 说明 | 回调参数 | | -------- | -------------------- | -------- | | close | 关闭弹窗事件 | -- | | closed | 关闭弹窗动画结束事件 | -- | | open | 打开弹窗事件 | -- | | opened | 打开弹窗动画结束事件 | -- |

方法

| 方法名 | 说明 | 参数 | | ---------- | ------------ | ----------------------------------- | | handleEmit | 处理弹窗事件 | 'close'，'closed'，'open'，'opened' |

其他属性及用法

作者：张金秀