BotUI：在执行操作之前显示加载动画

Question

BotUI：在执行操作之前显示加载动画

3

使用 BotUI (文档)。我想在动作 (例如按钮) 出现前，也能够显示出消息之前的加载动画。

var botui = new BotUI('hello-world');

botui.message.add({
  content: 'Hello world from bot!'
}).then(function() {
  return botui.message.add({
    delay: 3000,
    human: true,
    content: 'Hello world from human!'
  });
}).then(function() {
  return botui.message.add({
    delay: 3000,
    content: 'Another hello world from bot!'
  });
}).then(function() {
  return botui.message.add({
    delay: 3000,
    human: true,
    content: 'Another hello world from human!'
  });
}).then(function () {
  return botui.action.button({
    delay: 3000,
    action: [{
      text: 'Some button',
      value: 'button1'
    }, {
      text: 'Another button',
      value: 'button2'
    }]
  });
}).then(function (res) {
  if(res.value == 'button1') {
    console.log('Some button was clicked.');
  }
  if(res.value == 'button2') {
    console.log('Another button was clicked.');
  }
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.botui-container {
  font-size: 14px;
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
}

.botui-messages-container {
  padding: 10px 20px;
}

.botui-actions-container {
  padding: 10px 20px;
}

.botui-message {
  min-height: 30px;
}

.botui-message-content {
  padding: 7px 13px 17px 13px;
  border-radius: 15px;
  color: #595a5a;
  background-color: #ebebeb;
}

.botui-message-content.human {
  color: #f7f8f8;
  background-color: #919292;
}

.botui-message-content.text {
  line-height: 1.3;
}

.botui-message-content.loading {
  background-color: rgba(206, 206, 206, 0.5);
  line-height: 1.3;
  text-align: center;
}

.botui-message-content.embed {
  padding: 5px;
  border-radius: 5px;
}

.botui-message-content-link {
  color: #919292;
}

.botui-actions-text-input {
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 5px 7px;
  font-family: "Open Sans", sans-serif;
  background-color: transparent;
  color: #595a5a;
  border-bottom: 1px solid #919292;
}

.botui-actions-text-submit {
  color: #fff;
  width: 30px;
  padding: 5px;
  height: 30px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid #919292;
  background: #777979;
}

.botui-actions-buttons-button {
  border: 0;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  background: #777979;
  box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, 0.25);
}

.botui-actions-text-select {
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 5px 7px;
  font-family: "Open Sans", sans-serif;
  background-color: transparent;
  color: #595a5a;
  border-bottom: 1px solid #919292;
}

.botui-actions-text-searchselect {
  border: 0;
  outline: 0;
  border-radius: 0;
  padding: 5px 7px;
  font-family: "Open Sans", sans-serif;
  background-color: transparent;
  color: #595a5a;
  border-bottom: 1px solid #919292;
}

.botui-actions-text-searchselect .dropdown-toggle {
  border: none !important;
}

.botui-actions-text-searchselect .selected-tag {
  background-color: transparent !important;
  border: 0 !important;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
  display: inline-block;
  background-color: #919292;
}

.dot:nth-last-child(1) {
  margin-left: 0.3rem;
  animation: loading 0.6s 0.3s linear infinite;
}

.dot:nth-last-child(2) {
  margin-left: 0.3rem;
  animation: loading 0.6s 0.2s linear infinite;
}

.dot:nth-last-child(3) {
  animation: loading 0.6s 0.1s linear infinite;
}

@keyframes loading {
  0% {
    transform: translate(0, 0);
    background-color: #ababab;
  }
  25% {
    transform: translate(0, -3px);
  }
  50% {
    transform: translate(0, 0);
    background-color: #ababab;
  }
  75% {
    transform: translate(0, 3px);
  }
  100% {
    transform: translate(0, 0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/botui/build/botui.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui.min.css">
<div class="botui-app-container" id="hello-world">
  <bot-ui></bot-ui>
</div>

至少我成功地找到了 botui.js 中相关的模板部分。

<div v-if=\"msg.loading\" class=\"botui-message-content loading\"><i class=\"dot\"></i><i class=\"dot\"></i><i class=\"dot\"></i></div>

但是由于botui-actions-container的内容只有在延迟后加载，所以我无法在按钮出现之前显示加载动画。

- Three Year Old

请帮帮我！ :) - Three Year Old

2个回答

1

这可以在不改变BotUI内部工作的情况下完成，通过使用botui.message.add（使用loading功能），紧接着使用botui.message.remove并使用最后一条消息的index参数。然后使用您想要的操作。这使得加载出现在所请求的操作之前，尽管botui.action没有loading参数。

这是我使用的代码，其中包括botui.action.button，但您可以使用任何操作。如果您对操作使用delay: 0，则该操作将代替加载，而不会出现任何空白消息，如果您不删除初始消息，则会出现空白消息。

// add an empty message to use the "loading" feature not available with action
botui.message.add({
    delay: 2000,
    loading: true,
    content: ''
}).then(function (index) {
    // get the index of the empty message and delete it
    botui.message.remove(index);
    // display action with 0 delay
    botui.action.button({
        delay: 0,
        action: [{
            text: 'Action 1',
            value: 'a1'
        }, {
            text: 'Action 2',
            value: 'a2'
        }]
    }).then(function (res) {
        botui.message.bot({
            delay: 1000,
            content: 'action chosen: ' + res.value
        });
    });
});

- Jeremie

1

这就是我所说的聪明解决方案。非常感谢！ :) - Three Year Old

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ferry Kranenburg · Accepted Answer

您正在尝试更改第三方组件的内部工作方式。这通常是一个不好的做法。在这种情况下，最好的方法可能是在他们的Github存储库上打开一个新问题（链接）。向他们询问您需要的确切功能，也许他们会为您实现所请求的功能。