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>

     

  • 相关阅读:
    9.11 eventbus
    9.10,,,实现new instanceof apply call 高阶函数,偏函数,柯里化
    9.9 promise实现 写完了传到gitee上面了,这里这个不完整
    9.5cors配置代码
    9.5 jsonp 实现
    9.5 http tcp https总结
    9.3 es6 class一部分 and es5 class 发布订阅
    8.30 cookie session token jwt
    8.30vue响应式原理
    warning: LF will be replaced by CRLF in renard-wx/project.config.json. The file will have its original line endings in your working directory
  • 原文地址:https://www.cnblogs.com/liuXiaoDi/p/13057657.html
Copyright © 2011-2022 走看看