vue 创建隐式组件 结果提示组件
调用方法：
this.$Result.init({
title:"标题",
subTitle:"副标题",
type:'success',
append:"内容补充",
btns:[
{
name:"确定",
type:'info',
onClick:()=>{
this.$Result.destroy()
}
},
{
name:"警告",
type:'success',
onClick:()=>{
}
},
{
name:"错误",
type:'primary',
onClick:()=>{
}
},
]
}); 步骤一：
创建模板 result.vue
<template>
<div class="result">
<div class="resultMask"></div>
<div class="resultContent">
<div class="center">
<Icon type="ios-checkmark-circle" v-if="params.type=='success'" style="color:#19be6b" size="80"/>
<Icon type="ios-close-circle" v-if="params.type=='error'" style="color:#ed4014" size="80"/>
</div>
<div class="center title"v-if="params.title">
<span v-html="params.title"></span>
</div>
<div class="center subTitle" v-if="params.subTitle">
<span v-html="params.subTitle"></span>
</div>
<div class="center" v-if="params.append">
<span class="append" v-html="params.append"></span>
</div>
<div class="center btnCon" >
<Button :type="item.type" :key="index" v-for="(item,index) in params.btns" @click="btnClick(index)">{{item.name}}</Button>
</div>
</div>
</div>
</template>
<script>
import { Icon,Button } from 'view-design';
export default {
name: "Result",
components:{
Icon,
Button
},
data() {
return {
params: {
}
}
},
methods: {
btnClick(index){
this.params.btns.onClick();
},
add (params) {
this.params = params;
},
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btnCon button{
margin-right:10px;
}
.resultMask{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:99999 ;
background: rgba(0,0,0,0.5);
}
.resultContent{
position:fixed;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:500px;
background: white;
z-index: 999999;
border:2px solid #f8f8f9;
padding:20px;
}
.center{
text-align: center;
padding-top:10px;
}
.title{
color:#17233d;
font-size:24px;
}
.subTitle{
color:#808695;
font-size:14px;
}
.append{
display:inline-block;
padding:20px;
background: #f8f8f9;
border-radius: 10px;
color:#515a6e;
font-size:14px;
}
</style>
步骤二：
创建 实例 instance.js
import Result from './result.vue';
import Vue from 'vue';
Result.newInstance = properties => {
const _props = properties || {}
const div = document.createElement('div')
document.body.appendChild(div)
const result = new Vue({
el: div,
render: h => h(Result)
}).$children
_props.remove = function() {
document.body.removeChild(result.$el)
}
result.add(_props)
return {
component: result,
destroy() {
document.body.removeChild(result.$el)
},
}
}
export default Result 步骤三：
对外暴露方法
创建 index.js
import Result from './instance'
let instance
function getInstance(opt) {
instance = Result.newInstance(opt)
return instance
}
export default {
init(opt) {
getInstance(opt)
},
destroy() {
instance.destroy()
instance = null
}
} 步骤四：
在main.js 中引入
import Result from './implicitComponents/Result/index';
Vue.prototype.$Result = Result;
页:
[1]