有关cubeUI中的toast使用

本文档展示了如何在Vue项目中引入cube-ui库,用于创建Toast和Dialog组件,包括成功、错误、警告、加载和文本提示等不同类型的提示,并提供确认对话框和带输入框的警告框功能。示例代码详细说明了每个组件的用法和回调函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

import Vue from 'vue'
import { Toast, Dialog } from 'cube-ui'
import _ from 'lodash'

Vue.use(Toast, Dialog)

function success (text) {
  Toast.$create({
    txt: text,
    type: 'correct',
    time: 1000
  }).show()
}

function error (text) {
  // eslint-disable-next-line no-console
  console.log('toast error:' + text)
  Toast.$create({
    txt: text,
    type: 'error',
    time: 3000
  }).show()
}

function warn (text) {
  Toast.$create({
    txt: text,
    type: 'warn',
    time: 1000
  }).show()
}

function loading (text) {
  Toast.$create({
    txt: text,
    type: 'loading',
    time: 1000
  }).show()
}

function txt (text) {
  Toast.$create({
    txt: text,
    type: 'text',
    time: 1000
  }).show()
}

function confirm (
  {
    title,
    content,
    successMsg = '',
    confirmBtnText = '确定',
    cancelBtnText = '取消',
    cancelMsg = '取消操作',
    successCallBack = null,
    cancelCallBack = null
  }
) {
  Dialog.$create({
    icon: 'cubeic-alert',
    type: 'confirm',
    title,
    content,
    confirmBtn: {
      text: confirmBtnText,
      active: true,
      disabled: false,
      href: 'javascript:;'
    },
    cancelBtn: {
      text: cancelBtnText,
      active: false,
      disabled: false,
      href: 'javascript:;'
    },
    onConfirm: () => {
      if (!_.isEmpty(successMsg)) {
        success(successMsg)
      }
      if (successCallBack) {
        successCallBack.apply(successCallBack)
      }
    },
    onCancel: () => {
      if (!_.isEmpty(cancelMsg)) {
        warn(cancelMsg)
      }
      if (cancelCallBack) {
        cancelCallBack.apply(cancelCallBack)
      }
    }
  }).show()
}
// 带输入框的警告框
function prompt (
  {
    title,
    placeholder = '请输入理由',
    successMsg = '',
    confirmBtnText = '确定',
    cancelBtnText = '取消',
    cancelMsg = '取消操作',
    successCallBack = null,
    cancelCallBack = null
  }) {
  Dialog.$create({
    title,
    type: 'prompt',
    prompt: {
      value: '',
      placeholder
    },
    confirmBtn: {
      text: confirmBtnText,
      active: true,
      disabled: false,
      href: 'javascript:;'
    },
    cancelBtn: {
      text: cancelBtnText,
      active: false,
      disabled: false,
      href: 'javascript:;'
    },
    onConfirm: (e, val) => {
      if (!_.isEmpty(successMsg)) {
        success(successMsg)
      }
      if (successCallBack) {
        successCallBack(val)
      }
    },
    onCancel: () => {
      if (!_.isEmpty(cancelMsg)) {
        warn(cancelMsg)
      }
      if (cancelCallBack) {
        cancelCallBack.apply(cancelCallBack)
      }
    }
  }, false).show()
}

export default {
  success, warn, error, loading, txt, confirm, prompt
}
// 在文件中调用
import Toast from 'toast'

toast.success('text')
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值