纷享销客开发者手册

简体中文

English

弹层

约 1313 字大约 4 分钟

2026-01-16

Alert

Alert 基于 Dialog 扩展而来

Demo
<template>
  <div>
    <group>
      <switch title="Toggle" :value.sync="show"></switch>
    </group>
    <alert
        :show.sync="show"
        title="congratulations"
        :mask-transition="maskTransition"
        :dialog-transition="dialogTransition"
        @on-show="onShow"
        @on-hide="onHide"
    >
        Message is sent
    </alert>
  </div>
</template>

<script>
import { Alert, Group, Switch } from '../components';

export default {
  components: {
    Alert,
    Group,
    Switch,
  },
  data () {
    return {
      show: false,
      maskTransition: 'uik-fade',
      dialogTransition: 'uik-dialog',
    };
  },
  methods: {
    onHide() {
      console.log('on hide');
    },
    onShow() {
      console.log('on show');
    },
  },
};
</script>

<style>
.uik-fade-transition {
  opacity: 1;
  transition: opacity linear 0.2s
}

.uik-fade-enter, .uik-fade-leave {
  opacity: 0;
}

.uik-dialog-transition {
  opacity: 1;
  transition-duration: .4s;
  transform: translate(-50%, -50%) scale(1)!important;
  transition-property: transform, opacity!important;
}

.uik-dialog-enter, .uik-dialog-leave {
  opacity: 0;
}

.uik-dialog-enter {
  transform: translate(-50%, -50%) scale(1.185)!important;
}

.uik-dialog-leave {
  transform: translate(-50%, -50%) scale(1)!important;
}
</style>
Props
参数说明类型默认值
button-text可选，按钮文字StringOK
dialog-transition可选，弹窗动画(CSS3 自定义动画, 通过类名指定)String无
mask-transition可选，遮罩动画(CSS3 自定义动画, 通过类名指定)String无
show必选，是否显示，双向绑定Booleanfalse
title必选，提示标题String无
Slots
名字说明
默认slot可选，提示消息内容(DOM 元素, 可根据具体业务自行定制)
Events
自定义事件名参数描述
on-show无显示时触发
on-hide无关闭时触发

Confirm

Confirm 基于 Dialog 扩展而来, 用于需要用户确认操作的情况

Demo
<template>
  <div>
    <group>
      <switch title="Toggle" :value.sync="show"></switch>
    </group>
    <confirm
        :show.sync="show"
        title="confirm deleting the item"
        :mask-transition="maskTransition"
        :dialog-transition="dialogTransition"
        @on-cancel="onCancel"
        @on-confirm="onConfirm"
    >
      <p style="text-align:center;">Are you sure?</p>
    </confirm>
  </div>
</template>

<script>
import { Confirm, Group, Switch } from '../components';

export default {
  components: {
    Confirm,
    Group,
    Switch,
  },
  data () {
    return {
      show: false,
      maskTransition: 'uik-fade',
      dialogTransition: 'uik-dialog',
    };
  },
  methods: {
    onCancel() {
      console.log('on cancel');
    },
    onConfirm() {
      console.log('on confirm');
    },
  },
};
</script>

<style>
.uik-fade-transition {
  opacity: 1;
  transition: opacity linear 0.2s
}

.uik-fade-enter, .uik-fade-leave {
  opacity: 0;
}

.uik-dialog-transition {
  opacity: 1;
  transition-duration: .4s;
  transform: translate(-50%, -50%) scale(1)!important;
  transition-property: transform, opacity!important;
}

.uik-dialog-enter, .uik-dialog-leave {
  opacity: 0;
}

.uik-dialog-enter {
  transform: translate(-50%, -50%) scale(1.185)!important;
}

.uik-dialog-leave {
  transform: translate(-50%, -50%) scale(1)!important;
}
</style>
Props
参数说明类型默认值
cancel-text可选，取消按钮文字Stringcancel
confirm-text可选，确认按钮文字Stringconfirm
dialog-transition可选，弹窗动画(CSS3 自定义动画, 通过类名指定)String无
mask-transition可选，遮罩动画(CSS3 自定义动画, 通过类名指定)String无
show必选，是否显示，双向绑定Booleanfalse
title必选，提示标题String无
Slots
名字说明
默认slot可选，提示消息内容(DOM 元素, 可根据具体业务自行定制)
Events
自定义事件名参数描述
on-confirm无确认时触发
on-cancel无取消时触发

Dialog

Demo
<template>
  <div>
    <group>
      <switch :value.sync="show" title="Toggle"></switch>
    </group>
    <dialog
        :show.sync="show"
        :mask-transition="maskTransition"
        :dialog-transition="dialogTransition"
        @on-show="onShow"
        @on-hide="onHide"
        class="dialog-demo"
    >
      <p class="dialog-title">I'm a Dialog.</p>
      <div class="img-box">
        <img src="https://open.fxiaoke.com/fscdn/img?imgId=group1/M00/02/04/rBEiBVfZFl6AOJ6eAABPHGYzNOo452.png" style="max-width:100%">
      </div>
      <span class="uik-close" @click="show=false"></span>
    </dialog>
  </div>
</template>

<script>
import { Dialog, Group, Switch } from '../components';

export default {
  components: {
    Dialog,
    Group,
    Switch,
  },
  data() {
    return {
      show: false,
      maskTransition: 'uik-fade',
      dialogTransition: 'uik-dialog',
    };
  },
  methods: {
    onHide() {
      console.log('on hide');
    },
    onShow() {
      console.log('on show');
    },
  },
  ready () {
    setTimeout(() => {
      this.show = true;
    }, 10);
  },
};
</script>

<style lang="less">
.dialog-demo {
  .weui_dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .uik-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
.uik-fade-transition {
  opacity: 1;
  transition: opacity linear 0.2s
}

.uik-fade-enter, .uik-fade-leave {
  opacity: 0;
}

.uik-dialog-transition {
  opacity: 1;
  transition-duration: .4s;
  transform: translate(-50%, -50%) scale(1)!important;
  transition-property: transform, opacity!important;
}

.uik-dialog-enter, .uik-dialog-leave {
  opacity: 0;
}

.uik-dialog-enter {
  transform: translate(-50%, -50%) scale(1.185)!important;
}

.uik-dialog-leave {
  transform: translate(-50%, -50%) scale(1)!important;
}
</style>
Props
参数说明类型默认值
dialog-transition可选，弹窗动画(CSS3 自定义动画, 通过类名指定)Stringuik-dialog
mask-transition可选，遮罩动画(CSS3 自定义动画, 通过类名指定)Stringuik-fade
show是否显示，双向绑定Booleanfalse
Slots
名字说明
默认slot弹窗主体内容
Events
自定义事件名参数描述
on-show无显示时触发
on-hide无关闭时触发

Loading

Demo
<template>
  <div>
    <group>
      <switch title="Toggle" :value.sync="show" @on-change="delayHide"></switch>
    </group>
    <loading :show="show" :text="textContent"></loading>
  </div>
</template>

<script>
import { Loading, Group, Switch } from '../components';

export default {
  components: {
    Loading,
    Group,
    Switch,
  },
  methods: {
    delayHide () {
      setTimeout(() => {
        this.show = false;
      }, 5000);
    },
  },
  data () {
    return {
      show: false,
      textContent: 'Hello world',
    }
  },
};
</script>
Props
参数说明类型默认值
show是否显示，双向绑定Booleanfalse
text提示文字，与默认slot作用一致StringLoading
Slots
名字说明
默认slot提示文字，和text属性功能一致，若提示文字带有HTML标签，则选择slot方式

Toast

Demo
<template>
  <div>
    <group>
      <switch title="默认提示" :value.sync="show1"></switch>
      <switch title="文字提示" :value.sync="show2"></switch>
      <switch title="提示取消" :value.sync="show3"></switch>
      <switch title="提示禁止" :value.sync="show4"></switch>
      <switch title="设置出现时间1s" :value.sync="show5"></switch>
      <switch title="long text" :value.sync="show6"></switch>
    </group>
    <toast :show.sync="show1" >默认提示</toast>
    <toast :show.sync="show2" type="text">处理成功</toast>
    <toast :show.sync="show3" type="cancel">取消操作</toast>
    <toast :show.sync="show4" type="warn">禁止操作</toast>
    <toast :show.sync="show5" :time="1000">1s关闭</toast>
    <toast :show.sync="show6" type="text" width="20em">Talk is cheap, show me the code.</toast>
  </div>
</template>

<script>
import { Toast, Group, Switch } from '../components';

export default {
  components: {
    Toast,
    Group,
    Switch,
  },
  data () {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
    };
  },
};
</script>
Props
参数说明类型默认值
show是否显示，双向绑定Booleanfalse
time显示时间Number2000(ms)
transition过渡动画Stringsuccess
type图标类型，可选为success,text,cancel,warnString无
widthToast宽度String7.6em

尽管Toast组件提供了 cancel 和 warn 类型，但不推荐使用，如果需要用户关注的通知推荐使用 Alert或者 Confirm 组件

Slots
名字说明
默认slot提示文字