当前位置:首页 > 用vue编写一个插件,vue编写一个弹窗插件的原理,vue动态追加element

用vue编写一个插件,vue编写一个弹窗插件的原理,vue动态追加element

发布于 2018-08-29 阅读 1315 次 Vue Javascript

原理

这个是从vue官网文档截取的片段,详细可自行阅读官方文档

  1. var MyComponent = Vue.extend({
  2. template: '<div>Hello!</div>'
  3. })
  4. // 创建并挂载到 #app (会替换 #app)
  5. new MyComponent().$mount('#app')
  6. // 同上
  7. new MyComponent({ el: '#app' })
  8. // 或者,在文档之外渲染并且随后挂载,**后面我们主要用到这个**
  9. var component = new MyComponent().$mount()
  10. document.getElementById('app').appendChild(component.$el)

想法

首先我们先脱离vue,通常我们写一个弹窗(modal模态框)插件会怎么做呢?
有很多种方法,比如:
1、直接写html放在模板文件里,然后通过一个公用的方法配合属性去控制这些模态框,类似bootstrap的做法
2、我们直接写一个公用的js去动态追加模板到body里面,这个模板作为参数传入。

显然第二种方式和原理里面所述相似。

首先,我们创建一个公共的model.js,在这个js里面调用extend来动态创建组件。
下面写出大概代码

  1. function showModel(tempHtml){
  2. var MyComponent = Vue.extend({
  3. template: tempHtml
  4. })
  5. var model = new MyComponent().$mount();
  6. document.body.appendChild(model.$el);
  7. }

在外部调用showModel函数即可显示一个弹窗了。

  1. showModel("<div>弹窗提示!!!</div>");

写一个动态的vue弹窗插件最主要的一点就是

  1. var component = new MyComponent().$mount()
  2. document.getElementById('app').appendChild(component.$el)

另外实际应用中需要将showModel挂载到Vue上,还要编写install函数

  1. var $model={};
  2. $model.install = function (Vue, options) {
  3. Vue.prototype.$model = showModel;
  4. }

还需要调用Vue.use()来装载插件。

  1. Vue.use($model);

使用的时候只需要:

  1. mounted(){
  2. this.$model('<div>弹窗!!!</div>')
  3. }

下面附上一个完整超级简单的例子:(这个例子哈包含了自己写的一个计算属性的小例子,懒得摘了,凑活看)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  7. <style type="text/css">
  8. .keyboard{width:300px;text-align:center;}
  9. .keyboard ul{width:300px;overflow:hidden;list-style:none;padding:0;}
  10. .keyboard li{float:left;width:27%;margin: 3%;background:#ccc;color:#333;border-radius:10px;text-align:center;line-height:50px;}
  11. .call{display:inline-block;width:97%;line-height:40px;background:#619eea;color:#fff;border-radius:10px;}
  12. .num{width:100%;line-height:30px;height:30px;font-size:16px;margin-bottom:-10px;overflow:hidden;}
  13. .num span{float:right;margin-right:3%;}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="keyboard" id="app">
  18. <div class="num"><span @click="delNum()" v-show="number.length">删除</span>{{str}}</div>
  19. <ul @click="changeNum($event)">
  20. <li>1</li>
  21. <li>2</li>
  22. <li>3</li>
  23. <li>4</li>
  24. <li>5</li>
  25. <li>6</li>
  26. <li>7</li>
  27. <li>8</li>
  28. <li>9</li>
  29. <li>*</li>
  30. <li>0</li>
  31. <li>#</li>
  32. </ul>
  33. <div class="call">拨号</div>
  34. </div>
  35. <script type="text/javascript">
  36. var $model={};
  37. $model.install = function (Vue, options) {
  38. Vue.prototype.$model = function(tempHtml){
  39. console.log(tempHtml)
  40. var MyComponent = Vue.extend({
  41. template: tempHtml
  42. })
  43. // 这里我们把vue实例挂载到一个新建的div上
  44. oDiv = document.createElement('div');
  45. var model = new MyComponent().$mount();
  46. document.body.appendChild(model.$el);;
  47. }
  48. }
  49. Vue.use($model)
  50. var app = new Vue({
  51. el: '#app',
  52. data: {
  53. number:[]
  54. },
  55. computed:{
  56. str(){
  57. return this.number.join('');
  58. }
  59. },
  60. methods:{
  61. changeNum($event){
  62. if($event.target.nodeName != 'LI'){return;}
  63. let n = $event.target.innerHTML;
  64. this.number.push(n);
  65. },
  66. delNum(){
  67. let i = this.number.length-1;
  68. i>-1 && this.number.splice(i,1);
  69. }
  70. },
  71. mounted(){
  72. this.$model('<div>弹窗!!!</div>')
  73. }
  74. })
  75. </script>
  76. </body>
  77. </html>

实际项目中会比较复杂,包括多个弹窗显示的时候蒙层的显示判断,弹窗的大小设置,弹窗的回调函数等等,自己去发掘吧