12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <template>
- <view :class="'i-class i-drawer ' + (visible ? 'i-drawer-show' : '') + ' ' + ('i-drawer-' + mode)">
- <view v-if="mask" class="i-drawer-mask" @tap="handleMaskClick"></view>
- <view class="i-drawer-container">
- <slot></slot>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {};
- },
- externalClasses: ['i-class'],
- props: {
- visible: {
- type: Boolean,
- default: false
- },
- mask: {
- type: Boolean,
- default: true
- },
- maskClosable: {
- type: Boolean,
- default: true
- },
- mode: {
- type: String,
- default: 'left' // left right
- }
- },
- methods: {
- handleMaskClick() {
- if (!this.maskClosable) {
- return;
- }
- this.$emit('close', {
- detail: {}
- });
- }
- },
- created: function () {}
- };
- </script>
- <style>
- @import './index.css';
- </style>
|