zoukankan      html  css  js  c++  java
  • Vue.extend开发JS类型组件_城市切换弹出框

    前言

    要做成如下的Message弹出框,该弹出框是一个JS类型组件

    使用方法如下

    Message({
                title:"城市定位",
                content:this.city,
                toggleClick:()=>{
                    this.city = "上海"
                    return this.city;
                }
            });

    组件分类

    UI组件:以标签的形式使用组件

    JS组件:以方法的形式使用组件

    extend概念

    Vue.extend是一个构造器,可以创建“子类”.extend接受的参数是一个包含组件选项的对象.

    注意在extend中data必须是函数的形式

    extend构造好的子类通过$mount挂载该实例

    开始开发组件

    样式/组件UI

    创建plugins/message/index.vue文件,专门负责弹出框展示的样式内容

    //message/index.vue
    <template>
        <div class="messageBox">
            <div class="messageBox_title">{{title}}</div>
            <div class="messageBox_content">{{content}}</div>
            <div class="messageBox_btn">
                <div class="messageBox_btn-ok" @click="handleToggle">切换</div>
                <div class="messageBox_btn-ok" @click="handleOk">确定</div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        
    }
    </script>
    
    <style>
    ... </style>

    组件逻辑部分

    创建一个plugins/message/index.js专门负责组件的逻辑部分

    import messageBox from "./index.vue"
    import Vue from "vue";
    
    export default (options)=>{
        let defaultData = {
            title:"提示",
            content:"内容",
            toggleClick:function(){}
        }
    
        for(var key in options){
            defaultData[key] = options[key];
        }
    
        //继承Vue 将JS对来继承Vue 来转换成JS组件 这个JS组件可以被放在页面的任何地方
        let MessageBox = Vue.extend(messageBox);
        //相当于给index.vue的export defalult中添加el,data,methosds
        let vmMessage = new MessageBox({
            el:document.createElement("div"),
            data:{
                title:defaultData.title,
                content:defaultData.content
            },
            methods:{
                handleOk(){
                    this.$mount().$el.remove();
                },
                handleToggle(){                
                   if( defaultData.toggleClick ){
                    let city = defaultData.toggleClick();
                    this.content = city;
                   }
    
                }
            }
        })
    
        document.body.appendChild(vmMessage.$mount().$el);
    
    }

    使用

    以函数的形式调用组件,就达成了我们的目的

    <template>
        <div id="app"></div>
    </template>
    
    <script>
    import Vue from "vue";
    import Message from "./plugins/message/index.js";
    export default {
        name:"App",
        data(){
            return {
               city:"北京"
            }
        },
        created() {
        //这里是重点
            Message({
                title:"城市定位",
                content:this.city,
                toggleClick:()=>{
                    this.city = "上海"
                    return this.city;
                }
            });
        },
    
    }
    </script>
    
    <style>
    ...
    </style>

     

  • 相关阅读:
    yii2 gii 命令行自动生成控制器和模型
    控制器中的方法命名规范
    Vue Property or method "" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based
    IDEA插件:GsonFormat
    Spring Boot : Access denied for user ''@'localhost' (using password: NO)
    Typora添加主题
    Git基础命令图解
    Java Joda-Time 处理时间工具类(JDK1.7以上)
    Java日期工具类(基于JDK1.7版本)
    Oracle SQL Developer 连接Oracle出现【 状态: 失败 -测试失败: ORA-01017: invalid username/password; logon denied】
  • 原文地址:https://www.cnblogs.com/liuXiaoDi/p/13057657.html
Copyright © 2011-2022 走看看