xkt-element

新课堂后台组件库

新增MessageOwner 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

基础用法

当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

:::demo 调用$alert_own方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。

<template>
  <el-button type="text" @click="open">点击打开 Message Owner</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert_own(['确认要将该词汇书移出学习计划吗？',' 移除后学习记录仍将保留，但下次需重新开始学习。'], '删除确认', {
          confirmButtonText: '移除',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>

:::

输入内容

:::demo 调用$prompt_own方法即可打开消息提示，它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式，或者用inputValidator规定校验函数，可以返回Boolean或String，返回false或字符串时均表示校验未通过，同时返回的字符串相当于定义了inputErrorMessage字段。此外，可以用inputPlaceholder字段来定义输入框的占位符。

<template>
  <el-button type="text" @click="open">点击打开 Message Owner</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$prompt_own('请输入学员邮箱：', '提示', {
          confirmButtonText: '确认新增',
          showCancelButton: false,
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    }
  }
</script>

:::

双按钮样式

:::demo 默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 'cancel'。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。

<template>
  <el-button type="text" @click="open">点击打开 Message Owner</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm_own(['确认要将该词汇书移出学习计划吗？',' 移除后学习记录仍将保留，但下次需重新开始学习。'], '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '移除',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
          });
      }
    }
  }
</script>

:::

双图标样式

:::demo 调用$alert_own方法即可打开消息提示，它模拟了系统的 alert，可以自定义一个图标。此例中接收了两个参数，message和title。iconName和operateIcon分别作为自定义图标的icon类名、操作方法。

<template>
  <el-button type="text" @click="open">点击打开 Message Owner</el-button>
</template>

<script>
  export default {
    methods: {
      open () {
        this.$alert_own(['确认要将该词汇书移出学习计划吗？',' 移除后学习记录仍将保留，但下次需重新开始学习。'], '删除确认', {
          confirmButtonText: '保存',
          iconName: 'el-icon-delete',
          operateIcon: () => {
            this.handleOperateIcon()
          },
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      handleOperateIcon: function(){
        this.$message({
          type: 'error',
          message: '可增加操作icon的方法'
        });
      }
    }
  }
</script>

:::