如何在this.$confirm消息框里面写html

在 `this.$confirm` 消息框中，可以通过使用 `createElement` 方法来创建一个包含 HTML 内容的元素节点，然后将其作为 `content` 属性的值传递给 `this.$confirm` 方法。

例如，以下代码演示了如何在 `this.$confirm` 消息框中显示一个包含 HTML 内容的段落：

const h = this.$createElement;
const content = h('p', { domProps: { innerHTML: '<strong>这是一个加粗的段落</strong>' } });

this.$confirm({
  title: '确认提示',
  content: content,
  // 其他选项
});

在上面的代码中，`h` 方法会创建一个 `p` 元素节点，并将 `innerHTML` 属性设置为包含加粗文本的 HTML 字符串。然后，将这个元素节点作为 `content` 属性的值传递给 `this.$confirm` 方法。

相关问题

ElMessageBox.confirm 的 css

ElMessageBox.confirm 的 css 样式可以在以下三个地方进行修改：

1. 全局配置：

在 main.js 中使用 Vue.use(ElementUI) 引入 ElementUI 后，可以使用以下代码修改全局配置：

Vue.prototype.$confirm = function (message, title, options) {
  return ElMessageBox.confirm(message, title, Object.assign({
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }, options))
}

其中，confirmButtonText 和 cancelButtonText 可以分别修改确认按钮和取消按钮的文字，type 可以修改提示框的类型。

2. 单个 confirm 弹框：

在单个 confirm 弹框中，可以使用以下代码修改样式：

<el-button @click="showConfirm">显示 confirm 弹框</el-button>

<el-dialog
  :visible.sync="dialogVisible"
  title="提示"
  :show-close="false"
>
  <span>这是一条消息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确定</el-button>
  </span>
</el-dialog>

<style>
.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--default {
  border-color: #dcdfe6;
  color: #606266;
}

.el-button--default:hover {
  color: #409EFF;
  border-color: #409EFF;
}
</style>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    showConfirm() {
      this.dialogVisible = true
    },
  },
}
</script>

其中，通过样式修改了确认按钮和取消按钮的背景色和边框颜色。

3. 修改全局样式：

在项目的样式文件中，可以通过以下代码修改全局样式：

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--default {
  border-color: #dcdfe6;
  color: #606266;
}

.el-button--default:hover {
  color: #409EFF;
  border-color: #409EFF;
}

其中，通过样式修改了确认按钮和取消按钮的背景色和边框颜色。这种方式会全局生效，如果只想修改单个 confirm 弹框的样式，建议使用第二种方式。

用uniapp写一个在聊天界面发送并领取红包的代码

好的，以下是一个简单的在聊天界面发送并领取红包的uniapp代码示例：

1. 在页面中添加一个发送红包的按钮，点击后调用发送红包的函数：

<template>
  <view>
    <!-- 聊天记录展示区域 -->
    <scroll-view class="chat-log" scroll-y="true" ref="scroll" @scrolltolower="scrollToLower">
      <view v-for="(item, index) in messages" :key="index">
        {{ item.text }}
      </view>
    </scroll-view>
    <!-- 发送红包按钮 -->
    <button class="send-red-packet" @click="sendRedPacket">发送红包</button>
  </view>
</template>

2. 在页面的methods中添加发送红包的函数：

methods: {
  // 发送红包
  sendRedPacket() {
    // 弹出红包发送确认框，获取红包金额等信息
    uni.showModal({
      title: '确认发送红包',
      content: '请输入红包金额',
      success: (res) => {
        if (res.confirm) {
          // 用户点击了确定按钮
          // 获取红包金额
          const amount = this.redPacketAmount;
          // 构造发送的消息
          const message = {
            from: 'me',
            text: `发了一个 ${amount} 元的红包`,
            type: 'red-packet',
            data: {
              amount,
              status: 'unclaimed'
            }
          };
          // 将消息添加到聊天记录中
          this.messages.push(message);
          // 模拟发送消息的过程
          setTimeout(() => {
            // 修改红包状态为已发送
            message.data.status = 'sent';
            // 更新聊天记录
            this.messages = [...this.messages];
          }, 1000);
        }
      }
    });
  }
}

3. 每次接收到一条红包消息时，在显示该消息的组件中添加领取红包的按钮，点击后调用领取红包的函数：

<template>
  <view v-if="message.type === 'red-packet'">
    {{ message.text }}
    <button v-if="message.data.status === 'unclaimed'" @click="claimRedPacket">领取红包</button>
  </view>
  <view v-else>
    {{ message.text }}
  </view>
</template>

4. 在页面的methods中添加领取红包的函数：

methods: {
  // 领取红包
  claimRedPacket() {
    // 修改红包状态为已领取
    this.message.data.status = 'claimed';
    // 更新聊天记录
    this.$emit('update-message', this.message);
    // 弹出领取成功提示框
    uni.showToast({
      title: '领取成功',
      icon: 'success',
      duration: 2000
    });
  }
}

以上是一个简单的在聊天界面发送并领取红包的uniapp代码示例，供参考。