bluer-vue v1.1.8

JS Components

Toast

简短的消息提示框，支持自定义位置、持续时间、手动关闭。

基本用法：

// components
import Toast from 'components/toast'

Toast('提示信息')

在调用 Toast 时传入一个对象即可配置更多选项

Toast({
    position: 'bottom',
    message: '提示信息',
    duration: 5000
})

若需在文字上方显示一个 icon 图标，可以将图标的类名作为 iconClass 的值传给 Toast（图标需自行准备）

Toast({
    message: '操作成功',
    iconClass: 'icon icon-success'
})

这样做每次要用到的时候都要import显得很麻烦，如果把toast方法挂载到vue对象上，每个页面只需要调用this.$toast方法就可以，岂不很方便，具体代码如下：

// src/main.js 中加入下面代码
import Toast from 'components/toast'

Vue.$toast = Vue.prototype.$toast = Toast;

// 在vue文件中调用
this.$toast('提示信息')

执行 Toast 方法会返回一个 Toast 实例，每个实例都有 close 方法，用于手动关闭 Toast，手动关闭需要把duration参数设置成loading，这样才不会2秒自动关闭。

let toastd = this.$toast({
  iconClass: 'preloader white',
  message: '加载中',
  duration: 'loading'
})
setTimeout(() => toastd.close(), 3000)

Modal

弹出式提示框，有多种交互形式。

基本用法：

import Modal from 'components/modal'
Vue.$modal = Vue.prototype.$modal = Modal;

this.$modal({
    title: '提示',
    content: '操作成功'
})

弹出confirm框，自定义按钮组的文字和点击后的回调函数

this.$modal({
    title: '提示',
    content: '操作成功',
    buttons: [{
      text: '取消',
      onClick: () => {
        this.$toast('取消')
      }
    }, {
      text: '确定',
      onClick: () => {
        this.$toast('确定')
      }
    }]
})

Action sheet

操作表，从屏幕下方移入。

基本用法：

actions 属性绑定一个由对象组成的数组，每个对象有 name 和 method 两个键，name 为菜单项的文本，method 为点击该菜单项的回调函数。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 actionsheet 的显示与隐藏。

<bl-actionsheet
    :actions="actions"
    v-model="sheetVisible">
</bl-actionsheet>

API

Popup

弹出框，可自定义内容。

基本用法：

position 属性指定了 popup 的位置。比如，position 为 'bottom' 时，popup 会从屏幕下方移入，并最终固定在屏幕下方。移入/移出的动效会根据 position 的不同而自动改变，无需手动配置。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 popup 的显示与隐藏。

<bl-popup
  v-model="popupVisible"
  position="bottom">
  ...
</bl-popup>

API

Slot

Picker

选择器，支持多 slot 联动。

基本用法：

<bl-picker :slots="slots" @change="onValuesChange"></bl-picker>

export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    };
  }
};

在 change 事件中，可以使用注册到 picker 实例上的一些方法：

• getSlotValue(index)：获取给定 slot 目前被选中的值
• setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中
• getSlotValues(index)：获取给定 slot 的备选值数组
• setSlotValues(index, values)：设定给定 slot 的备选值数组
• getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
• setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中

slots

绑定到 `slots 属性的数组由对象组成，每个对象都对应一个 slot，它们有如下键名

API

Slot

Datetime picker

日期时间选择器，支持自定义类型。

基本用法：

v-model 属性为组件的绑定值。

type 属性表示 datetime-picker 组件的类型，它有三个可能的值：

• datetime: 日期时间选择器，可选择年、月、日、时、分，value 值为一个 Date 对象
• date: 日期选择器，可选择年、月、日，value 值为一个 Date 对象
• time: 时间选择器，可选择时、分，value 值为一个格式为 HH:mm 的字符串

datetime-picker 提供了两个供外部调用的方法：open 和 close，分别用于打开和关闭选择器。

<template>
  <bl-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue">
  </bl-datetime-picker>
</template>

<script>
  export default {
    methods: {
      openPicker() {
        this.$refs.picker.open();
      }
    }
  };
</script>

可以为选项提供自定义模板。模板须为一个包含了 {value} 的字符串，{value} 会被解析为相应选项的值。

<bl-datetime-picker
  v-model="pickerVisible"
  type="date"
  year-format="{value} 年"
  month-format="{value} 月"
  date-format="{value} 日">
</bl-datetime-picker>

当点击确认按钮时会触发 confirm 事件，参数为当前 value 的值。

<bl-datetime-picker
  v-model="pickerVisible"
  type="time"
  @confirm="handleConfirm">
</bl-datetime-picker>

API

Events

Scroll

下拉/上拉刷新。

基本用法：

<bl-scroll :enableRefresh="true" :onRefresh="onRefresh" :on-infinite="onInfinite" :enableInfinite="isLoading">
    // ...
</bl-scroll>

API

Slide

轮播图，需要搭配slide-item一起使用

基本用法：

<bl-slide>
  <bl-slide-item>
    <a href="javascript:;"><img _src="http://placeholder.qiniudn.com/750x375" alt=""></a>
  </bl-slide-item>
  <bl-slide-item>
    <a href="javascript:;"><img _src="http://placeholder.qiniudn.com/750x375" alt=""></a>
  </bl-slide-item>
</bl-slide>

API

slide

CSS Components

Switch

开关

基本用法：

<bl-switch v-model="values" type="pink"></bl-switch>

v-model绑定一个本地变量代表开还是关，type代表显示颜色

API

Button

按钮，提供几种基础样式和尺寸，可自定义图标。

改变颜色

<bl-button type="primary">主要按钮</bl-button>
<bl-button type="secondary">次要按钮</bl-button>
<bl-button type="other">其他按钮</bl-button>

改变大小

<bl-button>大按钮</bl-button>
<bl-button size="small">小按钮</bl-button>
<bl-button size="middle">中等按钮</bl-button>

禁用按钮

<bl-button disabled>禁用按钮</bl-button>

普通按钮

<bl-button inline>普通按钮</bl-button>

带图标

<bl-button icon="icon-success">成功按钮</bl-button>

自定义图标

<bl-button>
  <img src="../assets/100x100.png" height="20" width="20" slot="icon">
  带自定义图标
</bl-button>

API

Slot

Navbar

顶部选项卡，与 Tabbar 类似，依赖 tab-item 组件。

搭配 tab-container 组件使用

<bl-navbar :fixed="true" v-model="selected">
  <bl-tab-item id="1">已分配</bl-tab-item>
  <bl-tab-item id="2">可分配</bl-tab-item>
  <bl-tab-item id="3">已失效</bl-tab-item>
  <bl-tab-item id="4">已失效</bl-tab-item>
</bl-navbar>

<bl-tab-container :swipeable="false" v-model="selected">
  <bl-tab-container-item id="1">
    1
  </bl-tab-container-item>
  <bl-tab-container-item id="2">
    2
  </bl-tab-container-item>
  <bl-tab-container-item id="3">
    3
  </bl-tab-container-item>
  <bl-tab-container-item id="4">
    4
  </bl-tab-container-item>
</bl-tab-container>

API

navbar

tab-item

tabContainer

面板，可切换显示子页面。

搭配 tab-container-item 组件使用

<bl-tab-container :swipeable="false" v-model="selected">
  <bl-tab-container-item id="1">
    1
  </bl-tab-container-item>
  <bl-tab-container-item id="2">
    2
  </bl-tab-container-item>
  <bl-tab-container-item id="3">
    3
  </bl-tab-container-item>
  <bl-tab-container-item id="4">
    4
  </bl-tab-container-item>
</bl-tab-container>

API

tab-container

tab-container-item