搜索到
103
篇与
的结果
-
父组件向子组件传递数据及子组件调动父组件自定义事件 在vue中，我们基于组件进行开发，一个复杂的页面，我们一般会放到多个component中，多个component之间就会涉及到数据交互的问题。父组件传递数据到子组件从父组件传递数据到子组件还是比较简单的，通过属性传递过去即可。父组件设置:子组件的属性=‘需要传递的数据’子组件接收数据props: ['属性名']没什么特别的地方，只是需要说明的事，因为通过属性传递过去的，所以在子组件中，不能直接修改传递的数据，如果需要修改需要，需要将属性值传递到data中，通过data进行修改。子组件触发父组件方法子组件触发父组件的方法，与值传递类似。只是传递的不再是数据，而是一个方法。父组件设置@子组件需要触发的方法=父组件的方法(参数)子组件设置子组件通过this.$emit(‘子组件需要触发的方法’,参数)即可调用父组件的方法，同时可以传递数据。demo演示<template> <div> <p> 这是父组件 </p> <el-input v-model="fromChild" placeholder="我是从子组件获取的值" /> <el-input v-model="toChild" placeholder="传递给子组件的值"></el-input> <child :toChild="toChild" @fromC="fromChildMethod($event)"></child> </div> </template> <script> import child from './child' export default { name: 'parent', components: {child}, data () { return { toChild: '', fromChild: '' } }, methods: { fromChildMethod: function (val) { debugger this.fromChild = val } } } </script> <template> <div> <p> 这是子组件 </p> <el-input v-model="this.toChild" placeholder="我是从子组件获取的值"/> <el-input v-model="toParent"></el-input> <el-button type="primary" @click="toParentC">返给父组件</el-button> </div> </template> <script> export default { name: 'child', props: ['toChild'], data () { return { toParent: '' } }, methods: { toParentC: function () { this.$emit('fromC', this.toParent) } } } </script> -
vue-pdf通过流的方式在线预览Pdf文件 简介vue-pdf是一个支持在线预览pdf的vue插件。网上较少的比较多的是直接打开一个pdf文件的uri链接。本文另辟蹊径，通过流的方式在线展示Pdf文件。vue-pdf安装安装命令npm install --save vue-pdf如果注册了淘宝源，也可以使用以下命令cnpm install --save vue-pdf使用组件<template> <el-dialog :visible.sync="viewPdf" :show-close="false" width="40%" height="100%" :modal="true" :close-on-click-modal="true" :close-on-press-escape="true" @close='closeDialog' class="el_dialog"> <div v-show="fileType === 'pdf'" class="pdf"> <pdf :src="src" ref="pdf" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event" :page="pageNum"> </pdf> <el-button-group style="text-align: center"> <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button> <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i> </el-button> </el-button-group> <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div> </div> </el-dialog> </template> <script> import pdf from 'vue-pdf' import { fileView } from '@/api/store/detection/test' export default { components: { pdf }, props: ['attachmentId', 'viewPdf'], data() { return { fileType: 'pdf', src: '', pageNum: 1, pageTotalNum: 1, // 总页数 loadedRatio: 0 //当前页面的加载进度，范围是0 - 1 ，等于1的时候代表当前页已经完全加载完成了 } }, mounted() { this.getNumPages() }, methods: { // 上一页 prePage() { let page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一页 nextPage() { let page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page }, getNumPages() { var _this = this fileView({ attachmentId: this.attachmentId }).then(response => { let reader = new window.FileReader() // 使用readAsArrayBuffer读取文件, result属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据 reader.readAsArrayBuffer(response) reader.onload = function(e) { const result = e.target.result const contentType = response.type // 生成blob图片,需要参数(字节数组, 文件类型) const blob = new Blob([result], { type: 'application/pdf' }) // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上 if (window.createObjectURL != undefined) { // basic _this.src = window.createObjectURL(blob) } else if (window.webkitURL != undefined) { // webkit or chrome try { _this.src = window.webkitURL.createObjectURL(blob) } catch (error) { } } else if (window.URL != undefined) { // mozilla(firefox) try { _this.src = window.URL.createObjectURL(blob) } catch (error) { } } let loadingTask = pdf.createLoadingTask(this.src) loadingTask.promise.then(pdf => { _this.pageTotalNum = pdf.numPages }).catch(err => { console.error('pdf 加载失败', err) }) } }) }, closeDialog() { this.$emit('resetViewPdf') } } } </script> <style scoped> .el-dialog { position: relative; margin: 0 auto 0px; background: #FFFFFF; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; height: 60%; } .el-dialog__body { border-top: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6; max-height: 85% !important; min-height: 70%; overflow-y: auto; } -webkit-scrollbar { width: 2px; background-color: #ccc; } -webkit-scrollbar-thumb { background-color: #0ae; } -webkit-scrollbar-track { background-color: #ccc; } </style> apitest.js//查看附件 export function fileView(data) { return request({ url: '/store/detection/test/fileView/', method: 'get', responseType: 'blob', params: data }) }
-
elementui input控件的按键事件的不起作用解决 使用el-input插件后直接使用keyup等 是不生效的，需要在@keyup等事件后加上native，即@keyup.enter.native='(方法)'。@keydown、@keypress都是类似的。<template> <div> <el-input @blur="click" @keyup.enter.native="click" v-model="input" placeholder="请输入内容"></el-input> <input @keyup.enter="click" v-model="input" placeholder="请输入内容"> </div> </template> <script> export default { name: '事件绑定与监听', data () { return { input: '' } }, methods: { click: function () { debugger this.$message({ message: '警告哦，这是一条警告', type: 'warning' }) } } } </script> <style scoped> </style>
-
Vue列表渲染及视图不刷新问题解决 Vue中列表渲染主要使用v-for指令，v-for指令根据接收到的数组，重复渲染v-for绑定到的DOM元素及内部子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中。简单演示<template> <div> <el-steps :active="active" finish-status="success" style="text-align: left"> <el-step v-for="step in steps" :title="step.name" :key="step.index"></el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">下一步</el-button> <el-button style="margin-top: 12px;" @click="restSteps">重置列表</el-button> <el-button style="margin-top: 12px;" @click="changeStep">修改列表不刷新</el-button> <el-button style="margin-top: 12px;" @click="changeStepRefresh">修改列表刷新</el-button> </div> </template> <script> export default { name: '列表渲染', data () { return { active: 0, steps: [ { name: '步骤一', index: 1 }, { name: '步骤二', index: 2 }, { name: '步骤三', index: 3 } ] } }, methods: { next: function () { if (this.active++ > 2) { this.active = 0 } }, restSteps: function () { }, changeStep: function () { }, changeStepRefresh: function () { } } } </script> <style scoped> </style> 列表元素修改重新渲染一般情况下，改变数组时，能自动触发视图更新，但是一下两种情况除外：通过索引直接修改数组元素直接修改数组的长度。俗话活得好，上帝给你关上一扇门，肯定会给你留下一扇窗。针对以上两种情况，我们都有办法对应解决：<template> <div> <el-steps :active="active" finish-status="success" style="text-align: left"> <el-step v-for="step in steps" :title="step.name" :key="step.index"></el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">下一步</el-button> <el-button style="margin-top: 12px;" @click="restSteps">重置列表不更新</el-button> <el-button style="margin-top: 12px;" @click="restStepsRefresh">重置列表更新</el-button> <el-button style="margin-top: 12px;" @click="changeStep">修改列表不刷新</el-button> <el-button style="margin-top: 12px;" @click="changeStepRefresh">修改列表刷新</el-button> </div> </template> <script> export default { name: '列表渲染', data () { return { active: 0, steps: [ { name: '步骤一', index: 1 }, { name: '步骤二', index: 2 }, { name: '步骤三', index: 3 } ] } }, methods: { next: function () { if (this.active++ > 2) { this.active = 0 } }, restSteps: function () { this.steps.length = 0 }, restStepsRefresh: function () { this.steps.splice(0, 3) }, changeStep: function () { this.steps[2] = { name: '步骤三山', index: 3 } }, changeStepRefresh: function () { this.$set(this.steps, 2, { name: '步骤三山', index: 3 }) } } } </script> <style scoped> </style>
-
jquery ias流式分页插件添加 下载ias插件下载地址：https://github.com/webcreate/Infinite-Ajax-Scroll引入js插件<div class="content"> <#if articles?exists> <!--这里的#if是freemarker语法，用来判断是否有数据，然后进行循环展示--> <#list articles as article> <article class="excerpt excerpt-1"><a class="focus" href="/article/${article.contentId}.html" title=""> <img class="thumb" data-original="${article.imgurl}" src="${article.imgurl}" alt=""></a> <header><a class="cat" href="/category/${article.categoryId}.html">${article.categoryValue}<i></i></a> <h2><a href="/article/${article.contentId}.html" title="">${article.title}</a></h2> </header> <p class="meta"> <time class="time"><i class="glyphicon glyphicon-time"></i> ${article.createDate}</time> <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共${article.click}人围观</span> <a class="comment" href="article.html#comment"> <i class="glyphicon glyphicon-comment"></i> ${article.comment}个评论</a></p> <p class="note">${article.abstr} ... </p> </article> </#list> </#if> <nav class="pagination" style="display: none;"> <ul> <li class="prev-page"></li> <#if nextPage?exists> <li class="next-page"><a href="/page/${nextPage}">下一页</a></li> </#if> <li><span>共 ${pageNum} 页</span></li> </ul> </nav> </div> 温馨提示需要注意的是container，item，pagination，next，必须要一一对应//无限滚动反翻页 jQuery.ias({ history: false, container: '.content', item: '.excerpt', pagination: '.pagination', next: '.next-page a', trigger: '查看更多', loader: '<div class="pagination-loading"><img src="/images/loading.gif" /></div>', triggerPageThreshold: 5, onRenderComplete: function () { $('.excerpt .thumb').lazyload({ placeholder: '/images/occupying.png', threshold: 400 }); $('.excerpt img').attr('draggable', 'false'); $('.excerpt a').attr('draggable', 'false'); } });分页java代码@RequestMapping("/page/{num}") public String page(Model model, @PathVariable int num) { //获取点击量和评论量 List<Count> countList = countService.getCountList(); //获取最新发布的文章 List<Article> list = articleService.getArticleList(num, countList); model.addAttribute("articles", list); //总数 int count = articleService.getArticleSize(); //总页数 int pageNum = count / 5; model.addAttribute("pageNum", pageNum); if (pageNum > num) { model.addAttribute("nextPage", num + 1); } //今日推荐 List<Article> top2 = articleService.getTopArticleList("2"); model.addAttribute("now", top2.get(0)); return "homepage/index"; }
-
-
js检测flash代码 function flashChecker() { var hasFlash = 0; //是否安装了flash var flashVersion = 0; //flash版本 if (isIE()) { var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if (swf) { hasFlash = 0; VSwf = swf.GetVariable("$version"); flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]); if (flashVersion > 10) { hasFlash = 1; } } } else { if (navigator.plugins && navigator.plugins.length > 0) { var swf = navigator.plugins["Shockwave Flash"]; if (swf) { hasFlash = 1; var words = swf.description.split(" "); for (var i = 0; i < words.length; ++i) { if (isNaN(parseInt(words[i]))) continue; flashVersion = parseInt(words[i]); } } } } return { f: hasFlash, v: flashVersion }; }
-
easyui tab关闭方法 easyui窗体关闭$("#id").tabs('close', 'title');或者$("#id").tabs('close', 'index');第一个方法，可以传递title，也就是页签的标题进行删除，第二个参数可以传递标签的index，也就是索引。通过title关闭标签通过title的方式关闭还是非常简单的。window.parent.$("#mainTab").tabs('close', '影像待办'); 通过index关闭页签我们首先获取到当前的页签，通过页签获取到index，然后通过index进行关闭。var tab = window.parent.$('#mainTab').tabs('getSelected');//获取当前选中tabs var index = window.parent.$('#mainTab').tabs('getTabIndex', tab);//获取当前选中tabs的index window.parent.$('#mainTab').tabs('close', index);//关闭对应index的tabs
-
jQuery post打开窗口并传递数据 有时候，在项目中，我们为了隐藏URL，可以通过post的方式打开一个新的窗口，并将数据post到新的网页。以下代码通过一个隐藏的form标签，实现post打开新窗体功能。function openBlank(action,data,n){ var form = $("<form/>").attr('action',action).attr('method','post'); if(n) form.attr('target','_blank'); var input = ''; $.each(data, function(i,n){ input += '<input type="hidden" name="'+ i +'" value="'+ n +'" />'; }); form.append(input).appendTo("body").css('display','none').submit(); }使用方法：openBlank('/member/succeed.html',{id:'6',describe:'添加控制器, 包括前台与后台',money:$('.money:first').text()});
-
JavaScript结合.Net实现base64加、解密 主要解决问题，客户端通过utf8进行base64加密后，将加密后的信息传送到服务端，服务端对加密后的信息进行解密，获取明文。JavaScript加密、解密代码function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz+/="; // public method for encoding this.encode = function(input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = _utf8_encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4); } return output; } // public method for decoding this.decode = function(input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) { enc1 = _keyStr.indexOf(input.charAt(i++)); enc2 = _keyStr.indexOf(input.charAt(i++)); enc3 = _keyStr.indexOf(input.charAt(i++)); enc4 = _keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } } output = _utf8_decode(output); return output; } // private method for UTF-8 encoding _utf8_encode = function(string) { string = string.replace(/\r\n/g, "\n"); var utftext = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if ((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; } // private method for UTF-8 decoding _utf8_decode = function(utftext) { var string = ""; var i = 0; var c = c1 = c2 = 0; while (i < utftext.length) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if ((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i + 1); c3 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } }通过Ajax将密文传送到服务端，服务端对密文进行解密.net代码#region 5.0 Base64加密 需指定编码 + static string Base64Encrypt(string source, Encoding encode) /// <summary> /// 5.0 Base64加密 需指定编码 /// </summary> /// <param name="strData"></param> /// <param name="encod"></param> /// <returns></returns> public static string Base64EncryptByEncode(string source, Encoding encode) { return Convert.ToBase64String(encode.GetBytes(source)); } #endregion #region 5.1 Base64解密 需指定编码 + static string Base64Decrypt(string source, Encoding encode) /// <summary> /// 5.1 Base64加密 需指定编码 /// </summary> /// <param name="strData"></param> /// <param name="encod"></param> /// <returns></returns> public static string Base64DecryptByEncode(string source, Encoding encode) { return encode.GetString(Convert.FromBase64String(source)); } #endregion #region 5.2 Base64加密(默认UTF8编码) + static string Base64Encrypt(string source) /// <summary> /// 5.2 Base64加密 /// </summary> /// <param name="strData"></param> /// <returns></returns> public static string Base64Encrypt(string source) { return Convert.ToBase64String(Encoding.UTF8.GetBytes(source)); } #endregion #region 5.3 Base64解密 + static string Base64Decrypt(string source) /// <summary> /// 5.3 Base64加密(默认UTF8编码) /// </summary> /// <param name="strData"></param> /// <param name="encod"></param> /// <returns></returns> public static string Base64Decrypt(string source) { return Encoding.UTF8.GetString(Convert.FromBase64String(source)); } #endregion
-
ckeditor上传图片去掉默认的高度宽度 在使用CKEditor插件上传图片时，插件默认会给予图片宽度高度的大小,而项目需求不需要默认图片的宽高大小样式，这就需要更改CKEditor的配置文件了。网上找了很多解决方案,都无法解决问题，唯一未测试是否可行的是加disallowedContent属性,disallowedContent属性只有在CKEditor 4.4以上的版本才有，而项目使用的是4.2版本，所以如果有使用4.4以上版本的可以尝试使用disallowedContent属性解决。4.2版本解决方法如下：打开目录ckeditor\plugins\image\dialogs中的image.js文件；搜索E.setValue(C.$.height)对应的宽度的是E.setValue(C.$.width)将其值设置为null便可以了。例如E.setValue(null)。设置成功后浏览器记得清除缓存，亲测可行。对应的CKEditor 4.7版本的代码如下：if ("true" == c.getCustomData("isReady")) { var d = a.getContentElement("info", "txtWidth"), f = a.getContentElement("info", "txtHeight"), g; b ? c = g = 0 : (g = c.$.width, c = c.$.height); d && d.setValue(g); f && f.setValue(c) }对应的将setValue的值设置为Null应该就可以了。注：CKEditor 4.7版本的修改方法未测试。有问题可留言探讨。
-
Jquery.cookie的使用 在原始的JavaScript中，我们可以通过document.cookie的方式获取cookie，但是由于cookie是字符串，所以当有多个值时，我们需要通过split方法进行截取。除此之外，我们可以通过正则表达式的方式通过名称获取cookie，但是正则表达式不容易阅读，起码我是这么认为的。为了方便读取或者设置cookie，我们可以引用jQuery.cookie插件。安装插件jQuery.cookie的下载地址，大家可以直接去网上下载，引用方法也非常简单，直接引用一个js即可，如下<script src="~/lib/jquery-cookie/jquery.cookie.js" type="text/javascript"></script>使用jQuery.cookie获取cookieif ($.cookie("UserName") != undefined) { $("#RememberMe").attr('checked', 'checked'); } 设置cookie$.cookie("UserName", $("#UserName").val());
