格jscss-vue2命令组件-

import _Message from './MyMessage.vue';
export default{
    install(Vue){
        let message = null;
        Vue.component(_Message.name, _Message);
        Vue.prototype.$message1 = {
            show,
            hide,
            info
        }

        function info(props){
            this.show({...props, type: 'danger'});
        }
         
        function show(props){
            if(!message){
                const Message = Vue.extend({
                    render(h){
                        return h('my-message', {props});
                    }
                })
                message = new Message();
                this.vm = message.$mount();
                document.body.appendChild(this.vm.$el);
            }
        }

        function hide(){
            document.body.removeChild(this.vm.$el);
            message.$destroy();
            message = null;
            this.vm = null;
        }
    }
}

<template>
    <div :class="['app-x']">
        <div :class="['app-box', type]" >
            <div class="header" >
                {{ title }}
                <span class="colse" @click="$message1.hide()">X</span>
            </div>
            <div class="content">
                {{ content }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "MyMessage",
    props: {
        title: {
            type: String,
            default: 'title'
        },
        content: {
            type: String,
            default: 'my is content'
        },
        type: {
            type: String,
            default: 'primage',
            validator(value) {
                return ['primage', 'success', 'warn', 'danger'].includes(value);
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.app-x {
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .app-box{
        position: relative;
        top: 100px;
        left: 50%;
        width: 300px;
        margin-left: -250px;
        color: #fff;
        .header{
            font-size: 16px;
            padding: 10px 15px;
            .colse{
                float:right;
                color: #fff;
                cursor: pointer;
            }
        }
        .content{
            background-color: #fff;
            padding: 50px 15px 15px;
            color: #000;
        }
        &.primage{
            background-color: blue;
        }
        &.success{
            background-color:green;
        }
        &.warn{
            background-color: rgb(28, 25, 25);
        }
        &.danger{
            background-color: yellow;
            color: #3a3a3a;
        }
    }
    
}
</style>

import  MyMessage from '@/components/MyUi/MyMessage';
Vue.use(MyMessage);

 // this.$message1.show({
        //   title: '我是提示',
        //   content: '我是content',
        //   type : 'success'
        // });
        this.$message1.info({
          title: 'hello word',
          content : 'contents内容'
        });

import SelectEdit from './SelectEdit'
export default {
  data() {
  	return {
  	  name: ''
  	}
  },
  render(h) {
  	// 如果使用原生的则
  	// return h('div', {
  	// 这个是挂载组件
  	return h(SelectEdit, {
  		// 此处是给 SelectEdit 组件传值的（props传值）
 		props: {
	      value: 1,
	      type: 'on'
	    },
	    // class可以数组的形式也可以对象的形式
	    // class: ['speci-class'],
	   	class: {
		  'speci-class': true
		},
		// 样式有-的注意小驼峰 或者使用 string 模式
		style: {
		  color: 'red',
		  fontSize: '14px',
		  // 或者这样
		  'font-size': '14px'
		},
		// 普通的 HTML attribute
		attrs: {
		  placeholder: '这是给原生html赋值placeholder属性'
		},
		// DOM property
		domProps: {
    	  innerHTML: 'DOM property',
    	  // 这个参数等同于h函数的第三个参数
    	  innerText: 'xxxxxxx'
  		},
	    // 这里是挂载方法的但不再支持如 `v-on:keyup.enter` 这样的修饰器
	    on: {
	      // 方法名可以自定义（组件内 $emit('xxxchange', {name: 'zs'})）
	      'xxxchange': val => {
	        this.name = val.name;
	      },
	      'click': val => {
	        this.name = val.name;
	      },
	    },
	    // 仅用于组件，用于监听原生事件，而不是组件内部使用
	    // `vm.$emit` 触发的事件。
	    nativeOn: {
	      click: this.nativeClickHandler
	    },
	    // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
	    directives: [
	      {
	        name: 'my-custom-directive',
	        value: '2',
	        expression: '1 + 1',
	        arg: 'foo',
	        modifiers: {
	          bar: true
	        }
		  }
		],
		// 作用域插槽的格式为
		scopedSlots: {
	     default: props => createElement('span', props.text)
	    },
	     // 如果组件是其它组件的子组件，需为插槽指定名称
	    slot: 'name-of-slot',
	    // 其它特殊顶层 property
	    key: 'myKey',
	    ref: 'myRef',
	    // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  	    // 那么 `$refs.myRef` 会变成一个数组。
	    refInFor: true
	 }, '这里是显示文本')
  }
}