首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue结合原生js实现自定义组件自动生成示例

Posted in Javascript onJanuary 21, 2017

就目前三大前端主流数据驱动框架（vue,ng,react）而言，均具有创建自定义组件的api，但都是必须先做到事先写好挂载点，这个挂载点可以是原有静态元素标签也可以是自定义模板；对于多种组件通过同一数据流生成的，如果事先在页面上写好挂载点(mounted)，然后通过dom操作去动态添加，会遇到类似这样一条错误提示信息：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)。这又是为何呢，下一步该怎么办？

原因是任何dom操作的对象必须是符合W3C标准的元素，除非如下所述的，改写生成html元素对象的原型（HTMLElement.prototype）并注册自定义元素，从而实现动态生成自定义组件的效果。

不过，大家都明白使用数据驱动框架的初衷就是尽可能避免dom操作，而如下代码中还是有一些dom操作的，就目前认知水平而言，感觉这些必要的dom操作还是避免不了的。其它不多说了，直接看代码。。。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-type" content="text/html,charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/mui.min.css" rel="stylesheet">
  <link href="css/app.css" rel="stylesheet">
  <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="mui-content">
</div>
</body>
<script src="js/fuhao-components.js" type="text/javascript"></script>

<script>

  var jsonData = [
    {
      "keyname": "姓名鄂然失色而热重重中之重重中之重杂志的热热",
      "type": "text",
      "key": "name11"
    }, {
      "value": "姓名鄂之重杂志的热热",
      "key": "name11"
    }, {
      "keyname": "姓名鄂然失色而热热热热是重中之重重中之重重中之重杂志的热热",
    },
    {
      "keyname": "姓名鄂然失色而热热热热是重中之重重中之重重中之重杂志的热热",
      "type": "textarea",
      "key": "name"
    },
    {
      "keyname": "性别",
      "type": "radio",
      "key": "sex",
      "values": [
        {
          "key": "man",
          "value": "男辅导班"
        },
        {
          "key": "women",
          "value": "女"
        }
      ]
    },
    {
      "keyname": "复选",
      "type": "checkbox",
      "key": "checkbox",
      "values": [
        {
          "key": "man",
          "value": "男"
        },
        {
          "key": "women",
          "value": "女"
        }
      ]
    },
    {
      "keyname": "类型",
      "type": "select",
      "key": "type1",
      "values": [
        {
          "key": "type1",
          "value": "类型1"
        },
        {
          "key": "type2",
          "value": "类型2"
        },
        {
          "key": "type3",
          "value": "类型3"
        },
        {
          "key": "type4",
          "value": "类型4"
        }
      ]
    },
    {
      "keyname": "定位",
      "type": "gps",
      "key": "btn",
      "value": "地图获取定位"
    },
    {
      "keyname": "拍照",
      "type": "photo",
      "key": "btn",
      "value": "拍照"
    }
  ];
  (function () {
    AnalyJson(jsonData);
  })();
  function AnalyJson(data) {
    if ('id' in data) {
      arguments.callee(data.values);
    } else {
      if ('name' in data) {
        htmlname = data.name;
        CreateInputViewer(data.name);
        arguments.callee(data.values);
      } else {
        if ('type' in data) {
          CreateInputViewer(data);
        } else {
          for (var p in data) {
            CreateInputViewer(data[p]);
          }
        }
      }
    }
  }
  function CreateInputViewer(data) {
    switch (data.type) {
      case 'text': {
        fh_C(data, 'c-input-text' + '-' + data.key, 'fhInputText', textTpl);
        break;
      }
      case 'textarea': {
        fh_C(data, 'c-textarea' + '-' + data.key, 'fhInputTextarea', textareaTpl);
        break;
      }
      case 'radio': {
        fh_C(data, 'c-input-radio' + '-' + data.key, 'fhInputTextarea', radioTpl);
        break;
      }
      case 'checkbox': {
        fh_C(data, 'c-input-checkbox' + '-' + data.key, 'fhInputCheckbox', checkboxTpl);
        break;
      }
      case 'select': {
        fh_C(data, 'c-select' + '-' + data.key, 'fhSelect', selectTpl);
        break;
      }
      case 'photo': {
        fh_C(data, 'c-photo' + '-' + data.key, 'fhPhoto', photoTpl);
        break;
      }
      case 'gps': {
        fh_C(data, 'c-gps' + '-' + data.key, 'fhGPS', gpsTpl);
        break;
      }
      default: {
        fh_C(data, 'c-default' + '-' + data.key, 'fhInputDefault', defaultTpl);
        break;
      }

    }
  }
  function fh_C(d, c, cn, tpl) {
    console.log(d);
    Vue.component(c, {
      template: tpl,
//       props:['key','keyname','values','value'],
      data: function () {
        return d
      }
    });
    new Vue({
      el: '.mui-content',
      components: {
        cn: cn
      },
    });
    var MyElementProto = Object.create(HTMLElement.prototype);
    MyElementProto.createdCallback = function () {
      this.innerHTML = tpl
    };
    var MyComponent = document.registerElement(c, {prototype: MyElementProto});
    document.querySelector('.mui-content').appendChild(new MyComponent());
  }
</script>
</html>

为了保持代码的可维护性及易读性，我将模板部分单独放在fuhao-components.js的文件里边，如下所示：

var textTpl='';
<div class="mui-content-padded">
  <input :type="type" :name="key" :placeholder="keyname" >
</div>
  
var textareaTpl= '';
<div class="mui-content-padded ">
  <textarea rows="5" :placeholder="keyname"> 
  </textarea>
</div>
  
var radioTpl= '';
<form class="mui-input-group mui-content-padded">
    <div class="mui-input-row mui-radio mui-left"v-for="value in values">
      <label>{{value.key}}</label>
      <input :name="key" :type="type" :value="key">
    </div>
</form>
var checkboxTpl= '';
<form class="mui-input-group mui-content-padded">
    <div class="mui-input-row mui-checkbox mui-left"v-for="value in values">
      <label>{{value.key}}</label>
      <input :name="key" :type="type" :value="key">
    </div>
</form>
var selectTpl= '';
  <div class="mui-content-padded">
  <h5 class="mui-content-padded" v-text="keyname"></h5>
    <select class="mui-btn mui-btn-block " :name="key">
      <option value="key" v-text="value.key" v-for="value in values">{{value.key}}</option>
    </select>
  </div>

var photoTpl= '';
<div class="mui-content-padded">
  <span v-text="keyname"></span>
  <button :name="key" onclick="takePhoto(this.name)" class="mui-btn mui-btn-primary">拍照</button> 
  <img :id="key" height="70" width="100" class="img-rounded">
</div>
  
var gpsTpl='';
<div class="mui-content col-xs-12">
  <button class="mui-btn mui-btn-primary" :id="key" onclick="takeLocation(this.id)">
  获取定位
  </button>
</div>
  
var defaultTpl= '';
<div class="mui-content-padded " v-if="key">
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
      <span class="fuhaoKey" v-text="key"></span>
      <span class="fuhaoValue" v-text="value"></span>
    </li>
  </ul >
</div>

最终渲染效果如下：

Vue结合原生js实现自定义组件自动生成示例

鉴于vue结合dom操作动态生成自定义组件，控制台会报一定的错误这一点bug还在努力修复中，可能需要更加深入地了解vue数据绑定及传递机制与js动态注册自定义组件的深入领会，继续努力中。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue结合原生js实现自定义组件自动生成示例

- Author -

frankly-26

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 #Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 #Javascript
超全面的JavaScript开发规范（推荐）
Jan 21 #Javascript
Mongoose学习全面理解(推荐)
Jan 21 #Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 #Javascript
vue实现添加标签demo示例代码
Jan 21 #Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 #Javascript
幻读(5) 磁盘分区(1) 事务并发(1) MVCC(4) .NET Framework(2) 复读(1) DBLink(1) IIS7(1) GZIP(2) FTP服务器(1)
You might like
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
javascript基础知识
2016/06/07 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
Python模拟三级菜单效果
2017/09/11 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
python3 xpath和requests应用详解
2020/03/06 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
植村秀加拿大官网：Shu Uemura加拿大
2019/09/03 全球购物
俄罗斯首家面向中国消费者的一站式购物网站：Wruru
2020/05/08 全球购物
生产班组长岗位职责
2014/01/05 职场文书
高中课程设置方案
2014/05/28 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
公司处罚决定书
2015/06/24 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Redis实现订单过期删除的方法步骤
2022/06/05 Redis