HIPS-UNI-UI

# Toast 轻提示

# 使用指南

# 组件使用

import Toast from '@hips/uni-ui/lib/toast/component';

export default {
  components: {
    'hips-toast': Toast,
  },
};
1
2
3
4
5
6
7

# 插件使用

import Toast from '@hips/uni-ui/lib/toast';

Vue.use(Toast);
1
2
3

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-toast v-model="show" message="这是一条消息" />
1
export default {
  data() {
    return {
      show: false,
    };
  },
};
1
2
3
4
5
6
7

# 样式

<hips-toast v-model="show" message="这是一条消息" color="red" />
1

# 图标和 Icon

<hips-toast v-model="show" message="这是一条消息" icon="phone" />

<hips-toast v-model="show" message="这是一条消息" :image="IconNormal" />
1
2
3
import IconNormal from './assets/icon_person_normal@2x.png';
export default {
  data() {
    return {
      show: false,
      IconNormal,
    };
  },
};
1
2
3
4
5
6
7
8
9

# 持续时间

<hips-toast v-model="show" message="5000ms后关闭" :persist="5000" />

<hips-toast v-model="show" message="不会关闭" :persist="0" />
1
2
3

# 使用 ref 开启和关闭

<button @click="toggle">toggle</button>
<hips-toast ref="hipsToast" message="这是一条消息" />
1
2
export default {
  data() {
    return { isShowing: false };
  },
  methods: {
    toggle() {
      if (this.isShowing) {
        this.$refs.hipsNotify.close();
        this.isShowing = false;
      } else {
        this.$refs.hipsNotify.open();
        this.isShowing = true;
      }
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 插件方式开启和关闭

<hips-toast id="hipsToast" />
1
this.$hips.toast.open('提示消息');
this.$hips.toast.close();
1
2

注意

  1. 插件使用需要手动引入插件的 template
// 页面引入
import Toast from '@hips/uni-ui/lib/toast/component';

export default {
  components: {
    'hips-toast': Toast,
  },
};

// main.js 全局引入
import Toast from '@hips/uni-ui/lib/indicator/component';

Vue.component('hips-toast', Toast);
1
2
3
4
5
6
7
8
9
10
11
12
13
  1. 插件使用方法请务必在页面中添加 <hips-toast/> 标签，并添加选择器。

# API

参数 说明 类型 可选值 默认值
value 使用 v-model 绑定，控制显示隐藏 Boolean - false
message 消息内容 String - -
icon 左侧 icon 名称 String - -
image 左侧图片 String - -
persist 持续时间 [Number,String] - 3000
color 文字和 Icon 颜色 String - white

提示

设定 persist=0 ，不会自动关闭

# Functions

名称 说明 参数 类型
open 手动开启 - -
close 手动关闭 - -

提示

  • this.$refs.hipsToast.open()

  • this.$refs.hipsToast.close()

# 插件使用配置

# API

参数 说明 类型 可选值 默认值
message 消息内容 String - -
icon 左侧 icon 名称 String - -
image 左侧图片 String - -
persist 持续时间 [Number,String] - 3000
color 文字和 Icon 颜色 String - white
selector 选择器 String - #hipsToast
context 选择器的选择范围，可以传入自定义组件的 this 作为上下文 Object - 当前页面

# Functions

名称 说明 参数 类型
open 手动开启 - -
close 手动关闭 - -

提示

  • this.$hips.toast.open({message: '提示消息'})

  • this.$hips.toast.close()

Notify 通知提示