uni.showModal 美化

uni.showModal函数是uni-app框架中用于显示模态对话框的方法。它可以用于弹出一个提示框，让用户进行确认或取消操作。如果你想美化uni.showModal的样式，可以通过修改参数中的confirmColor和cancelColor来改变按钮的颜色。

以下是一个示例代码，演示如何使用uni.showModal函数并美化按钮颜色：

uni.showModal({
  title: '',
  content: '是否删除合同？',
  cancelText: "取消",
  confirmText: "删除",
  confirmColor: '#F54E40', // 删除按钮的颜色
  cancelColor: '#000', // 取消按钮的颜色
  success: function(res) {
    if (res.confirm) {
      that.delContractPort();
    } else if (res.cancel) {
      // 用户点击了取消按钮
    }
  }
});

在上述代码中，我们通过设置confirmColor为'#F54E40'来改变删除按钮的颜色，设置cancelColor为'#000'来改变取消按钮的颜色。你可以根据自己的需求修改这两个参数的值，以实现你想要的美化效果。

相关问题

uni.showModal配合uni.showPrompt

uni.showModal是uni-app框架中的一个API，用于显示模对话框，可以用来展示一些提示信息或者确认操作。而uni.showPrompt是一个自定义的函数，可能是你自己封装的函数，我不清楚具体实现细节。但是一般来说，可以将uni.showPrompt作为回调函数传递给uni.showModal，以实现在模态对话框中显示自定义的内容和逻辑。

以下是一个示例代码，展示了如何使用uni.showModal配合uni.showPrompt：

// 在某个事件触发时调用
function showModalWithPrompt() {
  uni.showModal({
    title: '提示',
    content: '是否确认删除该条记录？',
    success: function (res) {
      if (res.confirm) {
        // 用户点击了确认按钮
        uni.showPrompt({
          title: '请输入密码',
          success: function (res) {
            if (res.confirm) {
              // 用户输入密码并点击了确认按钮
              // 执行删除操作
            } else if (res.cancel) {
              // 用户点击了取消按钮
              // 取消删除操作
            }
          }
        });
      } else if (res.cancel) {
        // 用户点击了取消按钮
        // 取消删除操作
      }
    }
  });
}

在上述示例中，当用户触发某个事件时，会弹出一个模态对话框，询问用户是否确认删除记录。如果用户点击了确认按钮，则会再次弹出一个自定义的输入框对话框，要求用户输入密码。根据用户的操作结果，可以执行相应的删除操作或者取消删除操作。

美化uni.showModal弹框

要美化uni.showModal弹框，你可以使用uni-app的自定义组件来实现。以下是一个简单的示例代码，展示如何自定义一个美化的弹框：

// 引入自定义组件
import CustomModal from '@/components/CustomModal'

// 在页面中使用自定义组件
<template>
  <view>
    <custom-modal 
      v-if="showModal" 
      :title="modalTitle" 
      :content="modalContent" 
      @confirm="confirmModal" 
      @cancel="cancelModal"
    ></custom-modal>
  </view>
</template>

<script>
import CustomModal from '@/components/CustomModal'

export default {
  components: {
    CustomModal
  },
  data() {
    return {
      showModal: false,
      modalTitle: '',
      modalContent: ''
    }
  },
  methods: {
    openModal(title, content) {
      this.modalTitle = title
      this.modalContent = content
      this.showModal = true
    },
    confirmModal() {
      // 弹框确认按钮逻辑
      this.showModal = false
    },
    cancelModal() {
      // 弹框取消按钮逻辑
      this.showModal = false
    }
  }
}
</script>

请注意，以上代码只是示例，你需要根据你的实际需求来自定义弹框组件CustomModal，并在页面中使用它。