我的取消和确认按钮都在上面，怎么让他不管是pc端app端h5端都可以兼容在最下面

Question

<u-modal v-model="showmodal" :show-cancel-button='true' title='处理方式' @confirm='confirmM' @cancel='cancelM' :zoom="true">
    <u-input v-model="user.al_note" :type="type1" :border="border" placeholder='请输入处理方式'/>
</u-modal>

这样一写，我的取消和确认按钮都在上面，怎么让他不管是pc端app端h5端都可以兼容在最下面

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个需求，你需要对模态框内部的布局进行调整，使其在不同终端上都能将取消和确认按钮放置在底部。你可以使用CSS样式来实现这个目标。这里我会提供一个通用的CSS样式方案，并将其应用到你的Vue组件中。

首先，在你的全局样式表（例如src/assets/css/global.css）中添加以下样式，它会确保模态框中的按钮始终位于底部：

.u-modal__footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
}

.u-modal__btns {
  display: flex;
  flex-direction: row-reverse;
}

然后，在你的Vue组件中引入这个全局样式表。如果你使用的是单文件组件（SFC），可以在<style>标签内引用：

<style scoped>
@import '@/assets/css/global.css';
</style>

接下来，你需要修改u-modal组件内的结构，以便让按钮在底部显示。在原代码的基础上稍作调整，添加一个新的包含按钮的容器：

<u-modal v-model="showmodal" :show-cancel-button='true' title='处理方式' @confirm='confirmM' @cancel='cancelM' :zoom="true">
  <u-input v-model="user.al_note" :type="type1" :border="border" placeholder='请输入处理方式'/>

  <!-- 添加新的div来包裹按钮 -->
  <div class="u-modal__footer">
    <div class="u-modal__btns">
      <u-button type="primary" @click="confirmM">确认</u-button>
      <u-button @click="cancelM">取消</u-button>
    </div>
  </div>
</u-modal>

这样，不论是在PC端、App端还是H5端，按钮都会被定位到模态框的底部。请注意，这里的代码假设你使用的UI框架提供了名为.u-modal__footer和.u-modal__btns的类名，以及<u-button>元素。如果你使用的是其他UI框架，可能需要调整类名和按钮组件名称以匹配实际的框架。