判断浏览器版本

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function userBrowser(){  
  var browserName=navigator.userAgent.toLowerCase();  
  if(/msie/i.test(browserName) && !/opera/.test(browserName)){  
      alert("IE");  
      return ;  
  }else if(/firefox/i.test(browserName)){  
      alert("Firefox");  
      return ;  
  }else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){  
      alert("Chrome");  
      return ;  
  }else if(/opera/i.test(browserName)){  
      alert("Opera");  
      return ;  
  }else if(/iPad/i){ 
          alert("ipad"); 
          return ; 
      }
  else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){  
          alert("Safari");  
          return ;  
      }else{  
          alert("unKnow");  
      }  
}  
userBrowser();

展开全文 >>

基于Gulp的前端开发模版

项目运行

1
2
3
4
5
6
7
8
9
$ git clone https://github.com/jusfoun-FE/automation-development-ie8.git
$ cd automation-development-ie8
$ npm install
$ npm run dev //用于开发环境
$ npm run build //用于生产环境

浏览器输入地址查看模板：http://localhost:3000/html/index/

项目目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├─ build/               # gulp 任务配置目录
├─ dist/                # build 生成的生产环境下的项目
├─ src/                 # 源码目录（开发都在这里进行）
│   ├── components/     # 组件（COMPONENT）
│   ├── html/           # 页面级html
│   ├── css/            # css文件存放目录（less ,scss,css）
│   ├── js/             # js文件存放目录
│   ├── images/         # 图片文件
├── .babelrc            # Babel 转码配置
├── .gitignore          # （配置）需被 Git 忽略的文件（夹）
├── gulpfile.js         #   gulpfile基础配置文件
├── package.json        # （这个就不用多解释了吧）

IE低版本兼容小贴士

IE浏览器hack

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
.hack{
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
    background-color:red; /* All browsers */
    background-color:blue !important;/* All browsers but IE6 */
    *background-color:black; /* IE6, IE7 */
    +background-color:yellow;/* IE6, IE7*/
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
    background-color:purple\0; /* IE8, IE9, IE10 */
    background-color:orange\9\0;/*IE9, IE10*/
    _background-color:green; /* Only works in IE6 */
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */
}

1、IE8及以下，布局问题

不使用flex，box-size:border-box，calc

2、ie下进行跨域请求解决方案

引入jquery.xdomainrequest.min.js

3、ie8,9 进行跨域post请求，参数无法传递解决办法

jquery的ajax方法添加
crossDomain: true == !(document.all)
例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
    url: url,
    type: 'POST',
    data: params,
    dataType: 'json',
    contentType: "application/json",
    crossDomain: true == !(document.all),
    success: function (res) {
      ...
    },
    error: function (err) {
      ...
    }
})

4、IE6,IE7下overflow：hidden无效

解决办法：position:relative; 或者 position:relative; / for IE6,IE7 */ 即可解决该bug。

既：

1
2
position: relative;
overflow: hidden;

5、css3选择器兼容问题？

1
2
3
4
<!- -[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="./js/common/nwmatcher.js"></script>
<script type="text/javascript" src="./js/common/selectivizr-min.js"></script>
<![endif]- ->

在非必不可得到情况下不建议使用，会引起页面卡顿

6、兼容IE8不直接使用sessionStorage,localStorage

使用公用方法，使用办法如下：

1
2
3
4
5
6
7
function setKeyItem(key,value) {
    if (window.sessionStorage){
      sessionStorage.setItem(key,value);
    }else{
      setCookie(key,value,TimeoutCookie)
    }
}

7、“JSON”未定义

引入json2.js

注：本模板已经引入

下载地址：https://github.com/douglascrockford/JSON-js

8、IE跨域下出现{“readyState”:0,”status”:0,”TypeError”…}

对浏览器进行设置 工具->Internet选项->安全->自定义级别->其他->通过域访问数据源->启用

9、透明度兼容性：

a、使用rgba背景色做透明的：

背景色变成：background: #000 \9;

再加IE9及以下的透明度设置方法

1
2
3
opacity=80
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

b、直接使用opacity设置透明度的

添加IE9及以下的透明度设置方法

1
2
3
opacity=80
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

10、输入框垂直居中问题

将line-height设置成和height一样 即可,如：

1
2
3
4
innput.txt{
  height: 36px;
  line-height: 36px;
}

11、布局错位问题:

a、没有清除浮动的清除浮动即可,如：

html:

1
2
3
4
<div class="parent clear">
  <div class="child">child1</div>
  <div class="child">child2</div>
</div>

css:

1
2
3
4
5
6
7
.clear{
  overflow: hidden;
  *zoom:1;
}
.parent .child{
  float: left;
}

12、css伪类问题：

将用伪类实现的效果换成其他实现方式；

主要是针对IE7内核，如果不用兼容IE7内核，则不用处理此类问题。

13、ul元素中li 两端顶头，间距均等问题

li使用float为left，加上margin-left,
然后ul同时也加上margin-left，其值使用与li相对应的负值,如：

html:

1
2
3
4
5
6
<ul class="parent">
  <li class="child">测试</li>
  <li class="child">测试</li>
  <li class="child">测试</li>
  <li class="child">测试</li>
</ul>

css:

1
2
3
4
5
6
7
8
9
10
.parent{
  width 1200px;
  margin-left: -20px;
  *zoom:1;
}
.parent .child{
  width 280px;
  height:400px;
  margin-left: 20px;
}

14、background-size: cover

如果你想使用background-size: cover设置全屏背景，

很遗憾IE8办不到…但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式： 

1
2
3
4
.box{
   background-size: cover;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale , src='image.img')\9;
}

将sizingMethod设置为scale，src设置成背景图片地址就OK了。

还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。

一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。

15、last-child

first-child是CSS2的内容，但是last-child就不是了，所以IE8不买账。

推荐的做法不是使用last-child，而是给最后一个元素设置一个.last的class，然后对此进行样式设置，这样就全部兼容了。

16、Media Query(媒体查询)

IE8似乎无法识别Media Query，所以需要hack一下啦！推荐采用Respond.js解决此问题。

Respond.js让IE6-8支持CSS3 Media Query。

Bootstrap里面就引入了这个js文件，从名字看出来是自适应的兼容。

使用：考虑到IE9是支持CSS3的，所以直接在HTML页面的head标签中添加脚本引用即可：

1
2
3
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]—>

官方demo地址：http://scottjehl.github.com/Respond/test/test.html

a.在css中正常用 min/max-width media

b.引入respond.min.js，但要在css的后面

（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）

17、关于max-width

a. td中的max-width

如果针对td中的img元素设置max-width: 100%，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。

经查询发现需要给table设置table-layout: fixed.

b. 嵌套标签中的max-width

如下的HTML结构：

1
2
3
4
5
<div class="work-item">
  <a href="#" class="work-link">
    <img src="sample.jpg" class="work-image img-responsive">
  </a>
</div>

最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效.

后来才发现需要再对a标签设置width: 100%，这样才能使最内层的img标签充满整个div。

18、嵌套inline-block下padding元素重叠

html:

1
2
3
4
5
<ul>
   <li><a>1</a></li>
   <li><a>2</a></li>
   <li><a>3</a></li>
</ul>

CSS：

1
2
3
4
5
6
7
ul li{
   display: inline-block;
}
ul li a{
   display: inline-block;
   padding: 10px 15px;
}

按理来说a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。

我的解决方法是使用float: left替代display: inline-block实现水平布局。

19、filter blur

CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果：

1
2
3
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);

IE8对filter: blur(10px)的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊

要想支持高斯模糊，需要如下设置：

1
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

在实践中发现一个坑就是，所有position: relative的元素都不会生效。

其他的发现是，IE9对filter: blur(10px)无效，

而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=’10’),是针对元素小范围的模糊效果。

§ 参考

展开全文 >>

vue实战技巧

12月18日更新版本

使用vue已经一年多了,做了几个项目，总结点实战经验，巩固一下记忆。

1、插件在打包的时候，由于样式写在组件里面，导致打包后样式，被插件原来样式覆盖，因此必须提取出来，放在公共样式里面，或者新建一个专属的css文件。

2

问题：之前这样import echarts from ‘echarts’引用，版本升级后会报错

解决办法：import echarts from ‘echarts/dist/echarts’

3、组件中标签名不要用语义化标签，如header footer等 容易报错。

4、template中 只能有一个根div，否则也会报错如下：

1
2
3
4
5
6
7
8
9
ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-14b150ee","hasScoped":false,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/App.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
  <div></div>

5、style 里引用mixin时 一定要声明

1
<style lang="scss" scoped>。

6、

问题：想在渲染出来的HTML元素上监听click事件怎么办？

方法：

1
<router-link v-on:click.native="doSomethingCool"to="/">Home</router-link>

7、:class=”变量？class名1:class名2”，处理页面tap切换等改变背景问题

8、v-if 和 v-show的区别

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低

1.共同点：都是动态显示DOM元素

2.区别

手段：
v-if是动态的向DOM树内添加或者删除DOM元素，相当于jquery的append和remove方法；
v-show是通过设置DOM元素的display样式属性控制显隐,相当于display:none和display:block；
编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。

9、加载闪动问题

使用v-cloak

1
2
3
4
<style type="text/css">
      [v-cloak] { display: none }
</style>
<div v-cloak>{{message}}</div>

10、axios的get,post方法

GET方法

1
2
3
4
5
6
7
axios.get(url, {
　　params: { 'key': 'value' }
}).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
const urlModule = require('url');
let params = urlModule.parse(request.url, true).query;//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

POST方法

1
2
3
4
5
6
7
var params = new URLSearchParams();
params.append('key', 'value');
axios.post(url, params).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
4
5
6
7
const queryStringModule = require('querystring');
let postData = '';
request.on('data', function (chunk) {
　　postData += chunk;//接收数据
});
let params = queryStringModule.parse(postData);//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

11、axios的get,post方法

GET方法

1
2
3
4
5
6
7
axios.get(url, {
　　params: { 'key': 'value' }
}).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
const urlModule = require('url');
let params = urlModule.parse(request.url, true).query;//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

POST方法

1
2
3
4
5
6
7
var params = new URLSearchParams();
params.append('key', 'value');
axios.post(url, params).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
4
5
6
7
const queryStringModule = require('querystring');
let postData = '';
request.on('data', function (chunk) {
　　postData += chunk;//接收数据
});
let params = queryStringModule.parse(postData);//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

展开全文 >>

vue-原生动画

12月16日更新版本

最近遇到很多项目要求兼容在ie，很多伙伴们喜欢的一些css3的动画效果不能实现（话说ie9不支持transition真是一个让人烦心的事）,抽个空闲时间，分装了一个原生的动画效果和大家分享一下。

这是在vue中的使用实例，如果不是用vue，你可以把代码抠出来~~~我直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
    <div class="ContactUs-wrap">
        <div class="content">
            <div class="content-item">
                <div class="item">
                    <div class="img">
                        <img src="../../assets/img/biaozhun.jpg" alt="">
                        <div class="text-mask">
                            <span class="text">标准信用等级</span>
                        </div>
                    </div>
                    <div class="mask" id="mask1" @mouseenter="showMask" @mouseleave="hideMask">
                        <span class="words">对行为主体的信用状况及逆行充分展示，并按照严格的赋分标准出具相应的信用等级。</span>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
    export default {
        name: 'ContactUs',
        methods: {
            //mask透明度改变
            showMask(e){
                var event = e || window.event;
                console.log(event.srcElement.id)
                this.tomove(document.getElementById(event.srcElement.id),100,"opacity")
            },
            hideMask(e){
                var event = e || window.event;
                console.log(event.srcElement.classList[0])
                this.tomove(document.getElementById(event.srcElement.id),1,"opacity")
            },
            tomove(obj,target,style,callback){
                var that = this;
                clearInterval(obj.times)
                obj.times=setInterval(function(){
                    var eleStyle;
                    if(style=="opacity"){
                        eleStyle=parseFloat(that.getStyle(obj,style))*100;
                    }else{
                        eleStyle=parseInt(that.getStyle(obj,style));
                    }
                    var speed;
                    if(eleStyle<target){
                       speed=Math.ceil((target-eleStyle)/10);
                    }else{
                       speed=Math.floor((target-eleStyle)/10);
                    }
                    if(eleStyle==target){
                        clearInterval(obj.times)
                        if(callback){callback();}  
                    }else{
                        if(style=="opacity"){
                            obj.style.opacity=(eleStyle+speed)/100;
                        }else{
                            obj.style[style]=eleStyle+speed+"px";
                        }
                    }
                },30)
            },
            getStyle(obj,style){
                if(obj.currentStyle){
                   return obj.currentStyle[style];
                }else{
                   return getComputedStyle(obj,null)[style]
                }
            }
        }
    }
</script>

具体使用说明：

1、这是一个模仿淡入淡出的效果，我们在遮罩层mask上面添加 @mouseenter=”showMask” @mouseleave=”hideMask” 这两个方法

2、我们在showMask方法里面要获取道当前元素：var event = e || window.event;主要是兼容ie和谷歌火狐等浏览器；这块不理解的可以找度娘，不做详细介绍;

3、然后就是showMask方法调用我们分装好的tomove方法，可以看到要传四个参数，然后效果就出来了。参数参数说明如下：

obj：当前对象（滑进去的元素）

target：当前对象要达到的效果最终样式（比如透明度为1等等）

style：当前对象要改变的属性（比如宽、高、margin、left）

callback：当达到的效果要执行的回调函数

4、再来说一下getStyle，getStyle是用于获取元素属性值的一种兼容ie、谷歌等浏览器的方法，了解详细可以问度娘。

getStyle(obj,style){
                if(obj.currentStyle){
                   return obj.currentStyle[style];
                }else{
                   return getComputedStyle(obj,null)[style]
                }
            }

5、这个函数能实行的一些动画：淡入淡出（fade）、放大缩小(scale)、slideUp等等效果

6、可能功能还不完善，如果有不对的地方还请提上宝贵一间。

展开全文 >>

vue使用iframe方法

12月06日更新版本

父级元素内内容：

父级元素内内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
    <div class="page2-wrap">
      <h2>vue使用iframe</h2>
       <iframe width="600" height="600" ref="iframe" src="../../../static/child.html" @load="loaded">            </iframe>
    </div>
</template>
<script type="text/javascript">
  export default {
    name: 'page2',
    data() {
      return {
        dialogVisible: false,
        word: [
                        {
                            name: "板栗",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "枣",
                            value: 20,
                            itemStyle: {
                               normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "葡萄",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "山楂",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "香菇",
                          
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                      
                                }
                            }
                        },
                        {
                            name: "苹果",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "核桃",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "马铃薯",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "南瓜",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "葫芦",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "西红柿",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "萝卜",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        }
                    ]
      };
    },
    mounted(){
     
    },
    methods: {
        loaded(){
          //console.log(this.$refs.iframe.contentWindow.keyWords)
  //父元素调用子元素的方法
          var sss = this.$refs.iframe.contentWindow.keyWords;
           sss(this.word)
           console.log(this.word)
        }
    }
  }
</script>
<style lang="scss" scoped>
  @import "~assets/css/variable";
  @import "~assets/css/mixin";
  #app{
    width: 100%;
    height: 100%;
  }
  .page2-wrap{
    width: 100%;
    height: 100%;
  }
</style>

子级元素内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键词云</title>
    <style>
        #myChart{width:540px;height:310px;}
    </style>
    <script src="echarts-all-2.js"></script>
</head>
<body>
<div id="myChart"></div>
<script type="text/javascript" src="./vue.min.js"></script>
<script>
window.vm = new Vue({
    name:'child',
    
});
    function keyWords(datas){
        console.log(datas)
        var arr = [];
        datas.forEach(function(v,i){
            arr.push({
                itemStyle:v.itemStyle,
                name: v.name,
                value:v.value
            });
        });
        var myChart = echarts.init(document.getElementById('myChart'));
            myChart.setOption({
                        tooltip: {
                            show: true
                        },
                        series: [{
                            name: 'Google Trends',
                            type: 'wordCloud',
                            size: ['100%', '100%'],
                            textRotation : [0, 0, 0, 0],
                            textPadding:15,
                            autoSize:{
                                "enable": true,
                                "minSize": 14
                            },
                            data: arr
                        }] 
            });
    }
</script>
</body>
</html>

主要参考点：

1
<iframe width="600" height="600" ref="iframe" src="../../../static/child.html" @load="loaded">

1、父级使用iframe，需要使用@load绑定加载完毕要执行的函数

2、父元素获取iframe的内容

iframe.contentWindow//获取iframe的window对象
iframe.contentWindow.document//获取iframe的document
iframe.contentWindow.documentElement//获取iframe的html
iframe.contentWindow.head//获取head
iframe.contentWindow.body//获取body
iframe.contentWindow.方法名//获取iframe子页面定义的全局方法

如上述例子所示

方法一（子元素不用vue）

父元素获取子元素方法

1
2
var sss = this.$refs.iframe.contentWindow.keyWords;
       sss(this.word)

子元素声明一个函数

function keyWords（datas）{}

方法二

父元素获取子元素方法

var sss = this.$refs.iframe.contentWindow.vm.keyWords;
sss(this.word)

子元素声明一个函数(子元素用vue)

window.vm = new Vue({
name:’child’,
methods:{
keyWords(){
}
}

});

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家