在vue2+ts+sass环境下封装一个对话框modal组件，需求：高度可通过prop设置，并支持宽度随内容多少而自适应，可设置max-width和min-width，还有可控制对话框modal显示与隐藏的prop属性modalShow，组件modal还具有遮罩层，头部有标题，底部有“取消”和“确定”按钮，并可通过prop属性进行设置

好的，我可以为您提供一个大体的实现思路。

首先，在vue2+ts+sass环境下，可以通过在组件中定义props属性，来接收组件需要的参数。对于高度和宽度的设置，可以分别定义一个props属性：

props: {
  modalHeight: {
    type: String,
    default: 'auto'
  },
  modalMaxWidth: {
    type: String,
    default: 'none'
  },
  modalMinWidth: {
    type: String,
    default: 'none'
  },
  modalShow: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  }
}

接着，在组件的模板中，可以使用flex布局来实现对话框的自适应宽度。具体实现如下：

<template>
  <div class="modal-wrapper" v-show="modalShow">
    <div class="modal-overlay"></div>
    <div class="modal-content"
      :style="{
        'max-width': modalMaxWidth,
        'min-width': modalMinWidth,
        'height': modalHeight,
        'width': '100%'
      }"
    >
      <div class="modal-header">{{ title }}</div>
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button class="modal-cancel" @click="$emit('update:modalShow', false)">{{ cancelText }}</button>
        <button class="modal-confirm" @click="$emit('update:modalShow', false)">{{ confirmText }}</button>
      </div>
    </div>
  </div>
</template>

在上述代码中，我们在modal-content元素上设置了max-width和min-width属性，同时设置了height和width属性。height属性可以通过props接收到的modalHeight属性来设置，而width属性则设置为100%。这样子，modal-content元素的宽度就会自适应其父元素的宽度了。

接下来，我们可以在modal-body元素上设置overflow-y属性，使得内容区域超出modal-height时可以出现纵向滚动条。而对于遮罩层和显示隐藏的逻辑，可以使用v-show指令和CSS来实现。

最后，在底部的“取消”和“确定”按钮上，我们可以通过slots插槽来实现。

<template>
  <div class="modal-wrapper" v-show="modalShow">
    <div class="modal-overlay"></div>
    <div class="modal-content"
      :style="{
        'max-width': modalMaxWidth,
        'min-width': modalMinWidth,
        'height': modalHeight,
        'width': '100%'
      }"
    >
      <div class="modal-header">{{ title }}</div>
      <div class="modal-body" :style="{'overflow-y': modalHeight === 'auto' ? 'visible' : 'auto'}">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button class="modal-cancel" @click="$emit('update:modalShow', false)">{{ cancelText }}</button>
        <button class="modal-confirm" @click="$emit('update:modalShow', false)">{{ confirmText }}</button>
      </div>
    </div>
  </div>
</template>

综上所述，我们可以通过定义props属性和使用flex布局来实现一个支持高度、宽度自适应，以及遮罩层、标题、底部按钮等功能的对话框modal组件。