HIPS-UNI-UI

# Dialog 通知提示

# 使用指南

# 组件使用

import Dialog from '@hips/uni-ui/lib/dialog/component';

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

# 插件使用

import Dialog from '@hips/uni-ui/lib/dialog';

Vue.use(Dialog);
1
2
3

# 跨平台支持

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

# 代码演示

# 基础用法

<hips-dialog v-model="show" title="提示" message="这是一个提示内容" />
1
export default {
  data() {
    return {
      show: false,
    };
  },
};
1
2
3
4
5
6
7

# Alert

<hips-dialog v-model="show" title="提示" message="这是一个提示内容" />
1

# Confirm

<hips-dialog
  v-model="show"
  type="confirm"
  title="提示"
  message="这是一个提示内容"
/>
1
2
3
4
5
6

# 点击确认按钮后延迟关闭

<hips-dialog
  v-model="show"
  title="提示"
  message="这是一个提示内容"
  type="confirm"
  :confirm-close="false"
  @confirm="handleAfterConfirm"
/>
1
2
3
4
5
6
7
8
export default {
  data() {
    return { show: false };
  },
  methods: {
    handleAfterConfirm(event) {
      setTimeout(() => {
        this.show = false;
      }, 3000);
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# 使用 ref 开启和关闭

<button @click="$refs.alert.open()">open alert</button>
<hips-dialog
  ref="alert"
  title="提示"
  message="这是一个提示内容"
  @confirm="handleConfirm"
/>

<button @click="$refs.confirm.open()">open confirm</button>
<hips-dialog
  ref="confirm"
  type="confirm"
  title="提示"
  message="这是一个提示内容"
  @confirm="handleConfirm"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 插件方式开启和关闭

<hips-dialog id="alert" /> <hips-dialog id="confirm" />
1
this.$hips.dialog.alert({
  selector: '#alert',
  title: '提示',
  message: '这是个Alert消息',
  onConfirm(event) {
    console.log('alert-onConfirm event = ', event);
  },
});

this.$hips.dialog.confirm({
  selector: '#confirm',
  title: '提示',
  confirmClose: false,
  message:
    '这是个Confirm消息这是个Confirm消息这是个Confirm消息这是个Confirm消息',
  confirmOpenType: 'getUserInfo',
  onConfirm(event) {
    console.log('confirm-onConfirm event = ', event);
    setTimeout(() => {
      this.$hips.dialog.close();
    }, 3000);
  },
  onCancel() {
    console.log('confirm-onCancel');
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意

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

export default {
  components: {
    'hips-dialog': Dialog,
  },
};

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

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

# API

参数 说明 类型 可选值 默认值
value 使用 v-model 绑定，控制显示隐藏 Boolean - false
type 类型 String [alert, confirm] alert
confirm-text 确认按钮文字 String - 确认
cancel-text 取消按钮文字 String - 取消
title 标题 String - -
message 消息内容 String - -
click-overlay-close 点击遮罩层关闭 Boolean - false
confirm-open-type 确认按钮 open-type 属性 String - -
confirm-close 点击确认是否立即关闭 Boolean - true

提示

confirm-open-type 配置请参看这里

# Functions

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

提示

  • this.$refs.hipsDialog.open()

  • this.$refs.hipsDialog.close()

# Event

名称 说明 参数 类型
close 点击关闭按钮触发 - -
cancel 点击取消按钮触发 js event -
confirm 点击确认按钮触发 js event -

# 插件使用配置

# API

参数 说明 类型 可选值 默认值
type 类型 String [alert, confirm] alert
confirmText 确认按钮文字 String - 确认
cancelText 取消按钮文字 String - 取消
title 标题 String - -
message 消息内容 String - -
clickOverlayClose 点击遮罩层关闭 Boolean - false
confirmOpenType 确认按钮 open-type 属性 String - -
confirmClose 点击确认是否立即关闭 Boolean - true
selector 选择器 String - #hipsNotify
context 选择器的选择范围，可以传入自定义组件的 this 作为上下文 Object - 当前页面

# Functions

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

提示

  • this.$hips.alert.open({message: '提示'})

  • this.$hips.alert.close()

# 样式变量

变量名 说明 默认值
dialog-bg-color white
dialog-border-color #eeeeee
dialog-width 630rpx
dialog-title-color #4d4d44
dialog-title-font-size 36rpx
dialog-content-color #4d4d44
dialog-content-font-size 28rpx
dialog-border-radius 8rpx
dialog-message-padding-bottom 40rpx
dialog-message-padding-top 10rpx
dialog-message-min-height 150rpx
dialog-button-segmentation-height 60rpx
dialog-button-segmentation-width 2rpx

注意

Fab 悬浮按钮组