toast组件
模板文件
<template>
<transition name="bounce">
<div class="toast" :class="{'hidden': !visiable}">
<i class="message">{{message}}</i>
<i class="icon icon-tuichu" @click="closeToast"></i>
</div>
</transition>
</template>
<script>
export default {
data () {
return {
message: '提示消息',
visiable: true
}
},
methods:{
closeToast: function () {
this.close();
}
}
}
</script>
<style scoped lang="less">
@import url("../../assets/css/variable.less");
@import url("../../assets/css/public.less");
.toast{
&{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%);
.transition(@property: opacity;@duration: .3s);
display: table-cell;
border-radius: 5px;
padding: 20px;
min-width: 120px;
min-height: 60px;
line-height: 60px;
text-align:center;
background: rgba(0, 0, 0, 0.5);
color: @color;
}
&:hover .icon-tuichu{
display: inline-block;
}
.icon-tuichu{
position: absolute;
display: none;
right: 8px;
top: 8px;
height: 16px;
line-height: 16px;
margin: 0;
}
}
.hidden {
transform: scale(0);
opacity: 0;
}
</style>
js部分
import Toast from '@/components/utils/toast.vue';
var plugin = {}
let removeDom = event => {
event.target.parentNode.removeChild(event.target);
}
plugin.install = function (Vue, options = {}) {
const ToastController = Vue.extend(Toast);
ToastController.prototype.close = function () {
this.visiable = false;
this.$el.addEventListener('transitionend', removeDom);
}
Vue.prototype.$toast = (option = {}) => {
var instance = new ToastController().$mount(document.createElement('div'));
let duration = option.duration || options.duration || 2500;
instance.message = typeof option === 'string' ? option : options.message;
document.body.appendChild(instance.$el);
setTimeout(function () {
instance.close();
}, duration)
}
}
export default plugin;
import Toast from '@/assets/js/Toast'
Vue.use(Toast)
this.$toast(option)
option.message: 显示的文本内容
option.duration: 显示的时间数,毫秒
confirm组件
模板部分
<template>
<div class="confirm" :class="{'hidden': !visible}" :style="{'width': width}">
<div class="bg"></div>
<div class="header">{{title}}
<i @click="close" class="icon icon-tuichu"></i>
</div>
<div class="content">
<slot name="content">{{content}}</slot>
</div>
<div class="footer" slot="footer">
<a href="javscript:void(0)" class="btn btn-tint" @click="confirm">确定</a>
<a href="javscript:void(0)" class="btn btn-gray" @click="close" v-if="showCancelBtn">取消</a>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'confirm',
props: {
width: {
type: String,
default: '260px'
},
title: {
type: String,
default: '信息'
},
content: {
type: String,
default: '内容呀'
},
visible: {
type: Boolean,
default: true
},
closeVisible: {
type: Boolean,
default: false
},
showCancelBtn:{
type: Boolean,
default: true
}
},
data () {
return {
}
},
methods: {
close () {
this.$emit('cancel', false)
this.closeConfirm && this.closeConfirm()
},
confirm(){
this.$emit('confirm', false)
this.submitConfirm && this.submitConfirm()
}
}
}
</script>
<style scoped lang="less">
@import url("../../assets/css/variable.less");
@import url("../../assets/css/public.less");
.confirm{
&{
.transition(@property: opacity, transform;);
position: fixed;
left:50%;
top: 50%;
transform:translate(-50%,-50%) scale(1);
z-index:9999;
display: inline-block;
.border(@color: @border-color);
background: @color;
}
.header{
height: 40px;
color: @color;
line-height: 40px;
padding: 0 10px;
background: @main-tint-bg;
}
.content{
color: @color-1;
padding: 20px;
line-height: 26px;
text-align: center;
}
.footer{
.border-top(@color: @border-color);
text-align:center;
padding: 10px 0;
.btn{ border: none;
}
}
}
.hidden {
transform: scale(0);
opacity: 0;
}
</style>
js部分
import Confirm from '@/components/utils/confirm.vue';
let plugin = {};
let removeDom = event => {
event.target.parentNode.removeChild(event.target);
}
plugin.install = function (Vue) {
const ConfirmConstructor = Vue.extend(Confirm);
ConfirmConstructor.prototype.closeConfirm = function () {
this.visible = false;
this.$el.addEventListener('transitionend', removeDom);
}
ConfirmConstructor.prototype.submitConfirm = function () {
this.visible = false;
this.$el.addEventListener('transitionend', removeDom);
this.confirmFn && this.confirmFn();
}
Vue.prototype.$confirm = function (option = {}){
var instance = new ConfirmConstructor().$mount(document.createElement('div'));
instance.width = option.width || '260px';
instance.visiable = true;
instance.content = option.content || '我是confirm内容';
instance.showCancelBtn = option.showCancelBtn !== undefined ? option.showCancelBtn : true;
instance.confirmFn = option.confirm || null;
document.body.appendChild(instance.$el);
}
}
export default plugin;
import Confirm from '@/assets/js/confirm'
Vue.use(Confirm)