让u-modal自带的取消和确认按钮都在上面，怎么让他不管是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>

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

Answer 1

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

为了使u-modal组件中的取消（Cancel）和确认（Confirm）按钮始终位于底部，并且确保在PC、App及H5端都能兼容，你需要对模态框内部的布局进行调整。考虑到你使用的可能是UniApp框架，这里提供一个基于Flex布局的解决方案。

首先，在CSS样式表中定义一个新的类名，例如.modal-buttons-bottom，用于设置按钮的底部对齐：

.modal-buttons-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
}

接下来，在HTML部分，将这个新定义的类应用到<template>标签内，这样可以确保在任何设备上，按钮都会显示在底部：

<u-modal
  v-model="showmodal"
  :show-cancel-button="true"
  title="处理方式"
  @confirm="confirmM"
  @cancel="cancelM"
  :zoom="true"
>
  <template slot="footer">
    <div class="modal-buttons-bottom">
      <u-button type="primary" @click="confirmM">确认</u-button>
      <u-button type="warn" @click="cancelM">取消</u-button>
    </div>
  </template>
  <u-input
    v-model="user.al_note"
    :type="type1"
    :border="border"
    placeholder="请输入处理方式"
  />
</u-modal>

这段代码中，我们使用了slot="footer"来替换默认的底部区域，并手动添加了两个u-button元素，分别代表确认和取消按钮。同时，我们移除了原本在u-modal组件内的输入框外层的<template>标签，因为它已经包含在新的<template slot="footer">...</template>内。

注意：如果你的项目没有全局引入Flexbox相关的CSS，可能需要额外引入支持库，比如autoprefixer或者在你的CSS文件中使用前缀（如-webkit-, -moz-, ms-等）来保证不同浏览器的支持。

现在，无论是在PC、App还是H5端，u-modal的取消和确认按钮都应始终位于底部。如果还需要针对不同的屏幕尺寸进行响应式调整，可以在CSS中添加媒体查询（Media Queries）。