手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

vue in ie11

 几个小问题记录一下

1、如果IE11打不开F12控制面板,可能是因为你是从win7的IE8升上来的,如果是这样,下载这个更新包:
XML/HTML代码
  1. Install the latest cumulative IE update :  
  2.   
  3. http://www.microsoft.com/en-us/download/details.aspx?id=45134 (32 bit)
  4. http://www.microsoft.com/en-us/download/details.aspx?id=45154 (64 bit)  
2、在IE11下面你会发现VUE居然不解析,报错内容是说:mount(){ 这一行缺少;,这个在官方论坛里介绍,IE11不认这种语法简写,还是乖乖的用mount:function(){}这种写法吧。同理。如果你的函数在methods中也是 a(){},b(){}这样写的。乘早换成a:function(){},b:function(){}吧
 
记录一下,不然的话,虽然 说VUE支持IE9+,但你在IE11下也不正常。。。
即使微软说未来EDGE要换chrome的核心,但老机器 怎么办啊!!XP最高只支持IE8好象。希望我都是接一些高端点的活(如果钱给够,IE8我也可以吐血支持)

Tags: vue, ie

tinymce 5 的dialog不再支持iframe了

 尝试整个vue+tinymce的时候遇到点问题(之前说过,本来是用quillJS的。但如果要发表的内容支持那些微信编辑器里复制过来的内容。quill自己定义过的一些虚拟DOM就不支持了)

希望是美好的,实现起来是麻烦的,最后我放弃所有的选项,改用弹框iframe的形式。然而,问题就这么来了,tinymce5的dialog居然不支持iframe了。比如你看这个:https://github.com/tinymce/tinymce/issues/4786,官方直接说不支持了。NND

不过有人提示说,可以利用htmlpanel,直接在htmlpanel的html标签里,用<iframe。。。然后我试了一下。。居然真的OK

好吧,直接参考 这个了!https://github.com/tinymce/tinymce/issues/4786#issuecomment-463827289

JS文件:

JavaScript代码
  1. function FileManager(callback, value, meta) {  
  2.         var windowManagerURL = "/FilManage";// filemanager path  
  3.    
  4.         var windowManagerCSS = '<style type="text/css">' +  
  5.             '.tox-dialog {max-width: 100%!important; width:97.5%!important; overflow: hidden; height:95%!important; border-radius:0.25em;}' +  
  6.             '.tox-dialog__header{ display:none!important; }' +// for custom header in filemanage  
  7.             '.tox-dialog__footer { display: none!important; }' +// for custom footer in filemanage  
  8.             '.tox-dialog__body { padding: 0!important; }' +  
  9.             '.tox-dialog__body-content > div { height: 100%; overflow:hidden}' +   
  10.             '</style > ';  
  11.         window.tinymceCallBackURL = '';  
  12.         window.tinymceWindowManager = tinymce.activeEditor.windowManager;  
  13.         tinymceWindowManager.open({  
  14.             title: '',  
  15.             body: {  
  16.                 type: 'panel',  
  17.                 items: [{  
  18.                     type: 'htmlpanel',  
  19.                     html: windowManagerCSS+ '<iframe src="' + windowManagerURL + '"  frameborder="0" style="width:100%; height:100%"></iframe>'  
  20.                 }]  
  21.             },  
  22.             buttons: [] ,  
  23.             onClose: function () {  
  24.                 if (tinymceCallBackURL!='')  
  25.                     callback(tinymceCallBackURL, {}); //to set selected file path  
  26.             }   
  27.             
  28.         } );  
  29.     }  

iframe中:

JavaScript代码
  1. var windowManager = top != undefined && top.tinymceWindowManager != undefined ? top.tinymceWindowManager : '';  
  2.   
  3.   
  4.  if (windowManager != '') {  
  5.         if (top.tinymceCallBackURL != undefined)  
  6.             top.tinymceCallBackURL = path;  
  7.             windowManager.close();  
  8.     }  

 

Tags: tinymce

vue-nprogress-pjax 插件

 基于昨天写的vue+blade+(vue-pjax-adapter),发现没有任何进度提示,感觉比较不直观,但vue-pjax-adapter不能注入方法(或许是我不会)。

在app.js里引入了nprogress后。在axios请求前尝试注入,比如:
JavaScript代码
  1. window.axios.interceptors.request.use((config) => {  
  2.     console.log(before);  
  3.     NProgress.configure({easing: 'ease', speed: 1000, showSpinner: true});  
  4.     NProgress.start();  
  5.     return config;  
  6. });  
  7. window.axios.interceptors.response.use((response) => {  
  8.     NProgress.done();  
  9.     console.log(after);  
  10.     return response;  
  11. }, (error) => {  
  12.     return Promise.reject(error);  
  13. });  
但是没有看到有任何需求。才尝试修改了一下vue-pjax-adapter插件
用法和vue-pjax-adapter完全一样:
XML/HTML代码
  1. import nPjaxAdapter from 'vue-nprogress-pjax';  
  2. window.Vue.use(nPjaxAdapter);  
  3. /**  
  4.  * 如果不是标准的pjax-container,就是这样使用  
  5.  * // window.Vue.use(nPjaxAdapter, {  
  6.  //     targetSelector: '#my-custom-target',  
  7.  // });  
  8.  */  
就这样简单。现在切换页面有进度条了
 代码在这里:https://www.npmjs.com/package/vue-nprogress-pjax
 
 
 

post的奇技淫巧:Post the checkboxes that are unchecked

 放到javascript里为实在是意外 。主要是这应该是属于前端的事情。

起因是这样的,一个checkbox,在没有选中前提交。POST过来的数据中。连checkbox对应的name的KEY,在$_POST中就不存在。这个就尴尬了。因为正常操作是form.submit(),或者是用$.post('xxx',$('#form').serializeArray())。这两种情况下,未选中的checkbox直接就消失在$_POST中了
 
表单的KEY比较多,将近20个(有点夸张,但是是事实)。如果一个个的写 var xxx = $('xxx:checked').val()||0; 这样也好痛苦的说~~
 
网上找了一下,看到这个:https://stackoverflow.com/questions/1809494/post-the-checkboxes-that-are-unchecked,
投票最高的居然是:
XML/HTML代码
  1. <form>  
  2.   <input type='hidden' value='0' name='selfdestruct'>  
  3.   <input type='checkbox' value='1' name='selfdestruct'>  
  4. </form>  
原理就是,如果selfdestruct有值,默认下面有值的会覆盖上面的。因为一个FORM里同名的key只能有一个。如果selfdestruct没有选中,那么就会用hidden里的值!
 
 
 
 

jqweui 的 select/picker 控件添加清除

 jqweui是一个偷懒的基于Weui的组件,1.0的时候已经部分支持rem。所以用的还是比较多的。特别是我对它的部分组件有了一些扩展。而且它还有一些奇技淫巧。

1、如何通过函数来动态调整picker的内容。

默认情况下,picker/select在初始化的时候值已经固定了。这时候你其实是没有办法调整的,但不代表没有办法。虽然 API里没有提供,读了源码后你就能发现。其实你可以这样:

JavaScript代码
  1. $('#xxx').val('').data('weui-select',false).select({  
  2.                   title: "其他值",  
  3.                   items: ["1","2"]  
  4.               });  

记得有一个恶心的地方,items里的值不能是数字!!!

2、添加清除功能,默认的select/picker在选择后就不能清除了(当然你可以在items的第一个值设置为空)。所以我简单的扩展了一下:https://github.com/lihongxun945/jquery-weui/issues/443。

无非就是加个文字,加个清除等等。。

3、picker/select在使用的时候,有时候会显示一个软键盘而无法删除和隐藏。这时候的解决办法其实就是在input上面加上onfocus="this.blur()"即可!