抽屉

基础抽屉（显示/不显示蒙层）

抽屉标题

抽屉的内容

<template>
    <div>
        <t-drawer :visible.sync="visible" header="抽屉标题" :onConfirm="onClickConfirm"  :showOverlay="overlay" :closeBtn="true">
            <p>抽屉的内容</p>
            <template #footer>
                <t-button @click="visible = false">确定</t-button>
                <t-button variant="outline" @click="visible = false">取消</t-button>
            </template>
        </t-drawer>
        <t-button variant="outline" @click="handleClick">打开抽屉(显示蒙层)</t-button>
        <t-button variant="outline" @click="handleClick1">打开抽屉(不显示蒙层)</t-button>
    </div>
</template>

<script>

export default {
  data() {
    return {
        visible: false,
        overlay: true,
    };
  },
  methods: {
    handleClick() {
        this.visible = true;
        this.overlay = true;
    },
    handleClick1() {
        this.visible = true;
        this.overlay = false;
    },
    onClickConfirm() {
        this.visible = false;
    },
  },
};
</script>

显示代码 复制代码 复制代码

不同位置的抽屉

抽屉标题

抽屉的内容

左侧 右侧 上方 下方

<template>
    <div>
        <!-- @click-cancel 和 :onClickCancel 两种写法都支持； :onClickOverlay 和 @click-overlay 两种写法都支持-->
        <t-drawer
        header="抽屉标题"
        :visible="visible"
        @cancel="visible = false"
        :onOverlayClick="() => (visible = false)"
        :onConfirm="() => (visible = false)"
        :placement="placement"
        :sizeDraggable="true"
        >
            <p>抽屉的内容</p>
            <template #footer>
                <t-button @click="visible = false">确定</t-button>
                <t-button variant="outline" @click="visible = false">取消</t-button>
            </template>
        </t-drawer>
        <div class="tdesign-radio-button" style="margin-bottom: 20px;">
            <t-radio-group :defaultValue="placement" v-model="placement">
                <t-radio-button value="left">左侧</t-radio-button>
                <t-radio-button value="right">右侧</t-radio-button>
                <t-radio-button value="top">上方</t-radio-button>
                <t-radio-button value="bottom">下方</t-radio-button>
            </t-radio-group>
        </div>
        <t-button variant="outline" @click="visible = true" class="btn-top-margin">打开抽屉</t-button>
    </div>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      placement: 'right',
    };
  },
};
</script>

显示代码 复制代码 复制代码

自定义抽屉

自定义头部

抽屉的内容

<template>
    <div>
        <!-- 使用插槽自定义 -->
        <t-drawer :visible.sync="visible" closeBtn>
            <p>抽屉的内容</p>
            <template #header>
                <div>自定义头部</div>
            </template>
            <template #footer>
                <t-button @click="visible = false">确定</t-button>
                <t-button variant="outline" @click="visible = false">取消</t-button>
            </template>
        </t-drawer>
        <t-button variant="outline" @click="visible = true" class="btn-top-margin">打开抽屉</t-button>
    </div>
</template>
<script>

export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>

显示代码 复制代码 复制代码