工作记录-前端——contentWindow的使用及手写elementUI的四种弹窗

在回答这个问题之前，我需要先澄清一点：contentWindow 是一个属性，它返回一个对嵌入在某个窗口中的文档的引用。通常，这个属性用于 <iframe> 元素。

下面是如何使用 contentWindow 的示例：

<iframe id="myframe" src="somepage.html"></iframe>

var iframe = document.getElementById('myframe');
var win = iframe.contentWindow;

在上面的例子中，win 是一个对嵌入在 iframe 中的页面的 window 对象的引用。

手写 ElementUI 的四种弹窗：

1. 消息提示（Message Box）

var { MessageBox } = ElementUI;
 
MessageBox.alert('这是一条警告信息', '标题名称', {
  confirmButtonText: '确定',
  callback: action => {
    this.$message({
      type: 'info',
      message: `您选择了: ${action}`
    });
  }
});

2. 确认框（Confirm Box）

var { MessageBox } = ElementUI;
 
MessageBox.confirm('确认执行此操作？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });          
});

3. 输入框（Prompt Box）

var { MessageBox } = ElementUI;
 
MessageBox.prompt('请输入您的名字', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  inputPattern: /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])/,
  inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => {
  this.$message({
    type: 'success',
    message: '你的邮箱是: ' + value
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '取消输入'
  });          
});

4. 单选框（Message Box）

var { MessageBox } = ElementUI;
 
MessageBox.choice('选择你喜欢的食物', '提示', {
  distinguishCancelAndClose: true,
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  choices: ['水果', '蔬菜', '肉类', '蔬菜']
}).then(action => {
  this.$message({
    type: 'success',
    message: '你选择了: ' + action
  });
}).catch(action => {
  this.$message({
    type: 'info',
    message: action === 'cancel' ? '取消选择' : '关闭'
  });          
});

以上代码是基于 ElementUI 的 MessageBox 组件来实现的，它们都是非常常用的弹窗形式，可以用来显示不同类型的消息，并且提供了用户交互的功能。