一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

postMessage的使用

一、简介# 1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递 2、postMessage(data,origin)方法接受两个参数: (1)data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果, (2)origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"; 二、使用# 1、子页面向父页面传递消息 <!-- frame1.html --> <h1>iframe1 page</h1> <script>   window.top.postMessage('message from iframe1'); </script> 2、父页面向子页面传递消息

    from:https://www.cnblogs.com/EricZLin/p/10534537.html

龙生   21 Apr 2020
View Details

Dapper.Contrib:GetAsync only supports an entity with a [Key] or an [ExplicitKey]

property 异常处理:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点:Model里面的Table和Key是Dapper.Contrib.Extensions命名空间下的 成功~   from:https://www.cnblogs.com/dunitian/p/5710467.html

龙生   20 Apr 2020
View Details

vue css中scoped

1、什么是scoped vue组件中,在style标签中有一个属性,叫做scoped。当此标签拥有scoped属性的时候,该组件下的css样式只适用于本组件,而不会影响全局组件。这其实也相当于样式的模块化了。 2、scoped实现的原理 其实scoped中最重要的就是PostCSS,PostCSS是一种css的编译的工具。来看一下转译之前的代码: 编译前的代码:

  编译之后的代码:

  编译后,我们发现css中,PostCSS给所有的dom都添加了一个独一无二的动态属性,给css选择器也添加了一个对应的属性选择器,这样就可以让样式只作用于该属性的dom元素(组件内部的dom)。   from:https://www.cnblogs.com/marksir/p/11685350.html

龙生   15 Apr 2020
View Details

vue项目中json字符串转换成json对象

场景:在前端发送ajax请求是后台有时会返回json字符串,这样的数据需要转化成json对象才可以正常的使用 之前我在这个问题上困惑了好几天,从网上找了一些资料,使用了一下都是报错的,所以写着篇博客是为了让像我一样的新手可以少一些痛苦,尽快的完成任务 JSON.parse(jsonstr);//括号内为你需要转化json对象的内容 我标红的那一行就是转化json对象的,大家可以看一下,转化之前打印的red   和转化之后打印的this.bookcontent的格式是不一样的,之前是json字符串,之后的是json对象, created(){ getBookContent(this.bookId, this.chapterid).then(red =>{ // console.log(red) let a = JSON.parse(red.data);//将json字符串转换成json对象 this.bookcontent = a.chapter.chaptername // console.log(this.bookcontent) }).catch(err =>{ console.log(err,’请求失败') }) } ———————————————— 版权声明:本文为CSDN博主「qq_41114935」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_41114935/java/article/details/81284188

龙生   09 Apr 2020
View Details

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn; 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/><button @click=’select(大连)'>点击此处将‘大连’发射给父组件</button> </div> </template> <script> export default { name:’trainCity', props:['sendData'], // 用来接收父组件传给子组件的数据 methods:{ select(val) { let data = { cityname: val }; this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件 } } } </script> 父组件: <template> <div> <div>父组件的toCity{{toCity}}</div> <train-city @showCityName="updateCity" :sendData="toCity"></train-city> </div> <template> <script> import TrainCity from "./train-city"; export default { name:’index', components: {TrainCity}, data () { return { toCity:"北京" } }, methods:{ updateCity(data){//触发子组件城市选择-选择城市的事件 this.toCity = data.cityname;//改变了父组件的值 console.log('toCity:’+this.toCity) } } } </script>   from:https://www.cnblogs.com/shaozhu520/p/10637455.html

龙生   08 Apr 2020
View Details

vue中find函数

let obj = this.role.find(v => v.code === res.company.role) 循环 data对象中的role数组 ,每个数组元素用v代替,code为他的键,返回找到的数组元素对象。   from:https://www.cnblogs.com/erfsfj-dbc/p/10063533.html

龙生   03 Apr 2020
View Details

当表格列数太多时,怎么实现表格的横向滚动

效果: 要点:在表格外加一层div,div宽固定 html:

  postcss:

  from:https://www.cnblogs.com/XHappyness/p/7819246.html

龙生   03 Apr 2020
View Details

table中,表头固定,body滚动的方式。也就是使用:css Table布局-display:table

两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性)。 HTML Table是指使用原生的<table>标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。 在W3C关于<table>相关标签的文档中我们可以找到,HTML 4中<table>相关标签的默认样式表: js 代码: table    { display: table } tr       { display: table-row } thead    { display: table-header-group } tbody    { display: table-row-group } tfoot    { display: table-footer-group } col      { display: table-column } colgroup { display: table-column-group } td, th   { display: table-cell } caption  { display: table-caption } 显而易见HTML Table使用标签<table>、<tr>、<td>等标签,就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况: table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2) inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2) table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2) table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2) table-row:指定对象作为表格行。类同于html标签<tr>(CSS2) table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2) table-column:指定对象作为表格列。类同于html标签<col>(CSS2) table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2) table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2) table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2) 下面是一些 display:table 示例,你可能会发现它很有用: · 动态垂直居中对齐

这也许是使用display:table最常见的例子了。对于动态高度的元素,有了它,就可以实现真正的垂直(居中)对齐。 还有另一个不用display:table实现的垂直居中的简单方式,您可能感兴趣: table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法   找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed;   原理很简单,有爱研究的童鞋可以去css官网看看说明文档。   直接贴代码:

  from:https://www.cnblogs.com/susan-home/p/8761574.html

龙生   03 Apr 2020
View Details

vue 子组件主动获取父组件的数据和方法

子组件主动获取父组件的数据和方法: this.$parent.数据 this.$parent.方法   在子组件Header.vue里面

from:https://www.cnblogs.com/sulanlan/p/9932986.html

龙生   27 Mar 2020
View Details

Uncaught (in promise) 的解决方法

在微信小程序开发过程中,使用了promise,但是在使用的过程中报Uncaught (in promise)错误,第一次遇到这种错误,所以在此记录下,方便以后解决问题

  只要在后面加上.catch((e) => {}),就不会报错了   from:https://blog.csdn.net/dwb123456123456/article/details/89083464

龙生   25 Mar 2020
View Details
1 17 18 19 58