Youlian-mobile-ui NPM

youlian-mobile-ui

有联网络科技有限公司自用vue移动端常用ui库

Installation

npm

npm install youlian-mobile-ui --S

Usage

main.js

import Vue from 'vue'
import App from './App.vue'
import UI from 'youlian-mobile-ui'
import 'youlian-mobile-ui/lib/youlian-mobile-ui.css'

Vue.use(UI)

Methods

toast提示框

  1.纯文字toast提示框：
    this.$toast('提示框')

  2.带图标toast提示框：
    this.$toast({
      title: '提示框',
      type: 'success',
      duration: '1000'
    })

  3.带动画的加载中提示框：
    this.$toast({
      title: '加载中，请稍后',
      type: 'loading'
    })

  4.带动画的全屏加载中提示：
    this.$toast({
      title: '加载中，请稍后',
      type: 'full-loading'
    })

  5.关闭带动画的加载中提示：
    this.$hideToast()

  6.参数说明：
    title：提示框的提示语，必填
    type：提示框的类型，分别为success（带成功图标的提示框），loading（带动画的加载中提示框），full-loading（带动画的全屏加载中提示），默认为纯文字提示框，选填
    duration：提示框显示的时常，默认为2秒，选填

dialog确认框

  1.单确认按钮的对话框：
    this.$confirm({
      type: 'alert',
      title: '提示',
      body: '内容',
      confirm: res => {
        console.log(res)
      }
    })

  2.取消、确认双按钮的确认框：
    this.$confirm({
      type: 'confirm',
      title: '提示',
      body: '内容',
      confirm: res => {
        console.log(res)
      }
    })

  3.带输入框的对话框：
    this.$confirm({
      type: 'text',
      title: '提示',
      body: '内容',
      confirm: res => {
        console.log(res)
      }
    })

  4.自定义按钮提示语与字体颜色：
    this.$confirm({
      type: 'confirm',
      title: '提示',
      body: '内容',
      cancelText: '再想想',
      confirmText: '确定购买',
      cancelColor: '#ccc',
      confirmColor: '#FF7C4F',
      confirm: res => {
        console.log(res)
      }
    })

  5.参数说明：
    type：确认框类型，目前仅有三种模式，分别为alert（单确认按钮弹的确认框）、confirm（取消、确认双按钮的确认框）、text（带输入框的对话框），必填
    title：确认框的标题，必填
    body：确认框的提示内容，必填
    cancelText：左边按钮的提示文字，一般为取消按钮，选填
    confirmText：右边按钮的提示文字，一般为确认按钮，选填
    cancelColor：左边按钮提示文字的字体颜色，默认为#000（黑色），选填
    confirmColor：右边按钮提示文字的字体颜色，默认为#4A90E2（蓝色），选填
    confirm：右边按钮的点击事件，选填