Alert

Alert is extended from 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

Parameter	Description	Type	Default
button-text	Optional, button text	String	OK
dialog-transition	Optional, dialog animation (CSS3 custom animation specified by class name)	String	None
mask-transition	Optional, mask animation (CSS3 custom animation specified by class name)	String	None
show	Required, whether to display (two-way binding)	Boolean	false
title	Required, alert title	String	None

Slots

Name	Description
default	Optional, message content (DOM element, can be customized for specific business)

Events

Event Name	Parameters	Description
on-show	None	Triggered when shown
on-hide	None	Triggered when hidden

Confirm

Confirm is extended from Dialog, used for situations requiring user confirmation

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

Parameter	Description	Type	Default
cancel-text	Optional, cancel button text	String	cancel
confirm-text	Optional, confirm button text	String	confirm
dialog-transition	Optional, dialog animation (CSS3 custom animation specified by class name)	String	None
mask-transition	Optional, mask animation (CSS3 custom animation specified by class name)	String	None
show	Required, whether to display (two-way binding)	Boolean	false
title	Required, confirmation title	String	None

Slots

Name	Description
default	Optional, message content (DOM element, can be customized for specific business)

Events

Event Name	Parameters	Description
on-confirm	None	Triggered when confirmed
on-cancel	None	Triggered when canceled

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

Parameter	Description	Type	Default
dialog-transition	Optional, dialog animation (CSS3 custom animation specified by class name)	String	uik-dialog
mask-transition	Optional, mask animation (CSS3 custom animation specified by class name)	String	uik-fade
show	Whether to display (two-way binding)	Boolean	false

Slots

Name	Description
default	Main content of dialog

Events

Event Name	Parameters	Description
on-show	None	Triggered when shown
on-hide	None	Triggered when hidden

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

Parameter	Description	Type	Default
show	Whether to display (two-way binding)	Boolean	false
text	Prompt text (same as default slot)	String	Loading

Slots

Name	Description
default	Prompt text (same functionality as text prop). Use slot when HTML tags are needed in the text

Toast

Demo

<template>
  <div>
    <group>
      <switch title="Default" :value.sync="show1"></switch>
      <switch title="Text" :value.sync="show2"></switch>
      <switch title="Cancel" :value.sync="show3"></switch>
      <switch title="Warn" :value.sync="show4"></switch>
      <switch title="1s Duration" :value.sync="show5"></switch>
      <switch title="Long text" :value.sync="show6"></switch>
    </group>
    <toast :show.sync="show1" >Default</toast>
    <toast :show.sync="show2" type="text">Success</toast>
    <toast :show.sync="show3" type="cancel">Canceled</toast>
    <toast :show.sync="show4" type="warn">Forbidden</toast>
    <toast :show.sync="show5" :time="1000">Close after 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

Parameter	Description	Type	Default
show	Whether to display (two-way binding)	Boolean	false
time	Display duration	Number	2000(ms)
transition	Transition animation	String	success
type	Icon type (success, text, cancel, warn)	String	None
width	Toast width	String	7.6em

Although Toast provides cancel and warn types, it's not recommended to use them. For important notifications requiring user attention, use Alert or Confirm components instead.

Slots

Name	Description
default	Toast message text