Al usar BotUI ( Docs ), me gustaría que la animación de carga, que se muestra antes de que aparezcan los mensajes, también se muestre antes de que aparezcan las acciones (por ejemplo, botones).
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>
Al menos logré identificar la parte de la plantilla relevante en 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>
Pero dado que los contenidos del contenedor de acciones de botui se cargan solo después del retraso, no puedo mostrar la animación de carga antes de que aparezcan los botones.
Está intentando cambiar el funcionamiento interno de un componente de un tercero. Esta es normalmente una mala práctica. En este caso, probablemente la mejor manera sea abrir un nuevo problema en su repositorio de Github . Pregúnteles exactamente lo que necesita y tal vez implementen la función solicitada por usted.
Esto se puede hacer sin cambiar el funcionamiento interno de BotUI, usando botui.message.add
(para usar la función de loading
) seguido inmediatamente por botui.message.remove
usando el parámetro de index
del último mensaje. Luego usa la acción que quieras. Esto hace que la carga aparezca antes de la acción solicitada, a pesar de botui.action
no tiene un parámetro de loading
.
Aquí está el código que uso, con botui.action.button
, pero puedes usar cualquier acción. Si usa delay: 0
para la acción, la acción aparece en lugar de la carga, sin ningún mensaje en blanco que aparecería si no elimina el mensaje inicial.
// 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 }); }); });