可以做代销的网站,内部链接网站大全,WordPress博客自动更新文章,西安网站建设风尚文章目录 一、样式二、vue笔记2.1、组件之间的通信2.1.1 子组件调用父组件的方法2.1.2 父组件调用子组件的方法2.1.3 孙组件调用祖父组件方法的实现 2.2、使用若依时,node_nodules越来越大的问题2.3、echart笔记 一、样式 1 文字与图标对不齐的解决方法 /**给icon加上这个样式即… 文章目录 一、样式二、vue笔记2.1、组件之间的通信2.1.1 子组件调用父组件的方法2.1.2 父组件调用子组件的方法2.1.3 孙组件调用祖父组件方法的实现 2.2、使用若依时,node_nodules越来越大的问题2.3、echart笔记 一、样式 1 文字与图标对不齐的解决方法 /**给icon加上这个样式即可*/
vertical-align: -10%;2 让内部元素垂直水平居中 在父级div加上这个样式 .main{width: 100%;height: 100vh;display: flex;justify-content: center; /**水平居中*/align-items: center; /**垂直居中*/
}3 禁止换行样式 1 一行不换行并显示省略号 white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;2自定义自能显示多少行溢出使用省略号 overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*行数*4 小程序使图片images设置大小不变形modeaspectFit固定宽高modewidthFix固定宽度并不变形 !-- 固定宽高 --
image srcimages/wqs.png modeaspectFit stylewidth: 100%;/image!-- 固定宽度 --
image srcimages/wqs.png modewidthFix stylewidth: 100%;/image5 元素让内部元素一行显示在要在一行显示的元素加上display: inline-block;样式即可 !--父级元素--
div!--子级元素--div styledisplay: inline-block;/divdiv styledisplay: inline-block;/div
/div6 img加上让固定宽高图片变形的样式object-fit: cover; img classavatar src20210914/07c92ea514be4610930c4da404ee6adb.jpg styleobject-fit: cover;css使img图片不变形 object-fit: cover;6 去掉原始input样式
/* 去掉默认样式 */
input{border: none;outline: none;
}/* 去掉取到光标时默认的样式 */
input:focus{border: none;outline: none;
}8 原始的单选或者多选时点击文字选择选框
!-- 单选框 --
label classchoice_labelinput typeradio namesex value男生 span男生/span
/label!-- 复选框 --
label classchoice_labelinput typecheckbox namevehicle value我已知晓span我已知晓/span
/label9 让内容垂直横向居中
/**父级模块*/
.main{width: 100%;height: 100vh;background-color: red;display: flex;justify-content: center;align-items: center;
}
/**子模块*/
.center{width: 500px;height: 500px;background-color: aqua;
}二、vue笔记
2.1、组件之间的通信
2.1.1 子组件调用父组件的方法
案例
// 子组件
export default {inject: [fatherFunction],methods:{// testfunc(){this.fatherFunction()}}
}// 父组件
export default {inject: [fatherFunction],methods:{},provide () {return {fatherFunction: (item) {console.log(调用了父组件)}}},
}2.1.2 父组件调用子组件的方法
案例
headerChild refheaderChild/headerChildthis.$refs.headerChild.属性
this.$refs.headerChild.方法2.1.3 孙组件调用祖父组件方法的实现
在孙组件中使用inject: [‘fatherMethod’]在祖父组件中的provide里调方法例子
!--祖父组件--
templatediv祖父组件 /div
/template
script
import ServiceAreaComm from /components/serviceAreaComm.vue
export default {name: AppraiseVisu,components: { ServiceAreaComm },data () {return {}},provide () {return {fatherMethod: (item) this.areaParentFunc(item)}},mounted () {},methods: {// 祖父级方法areaParentFunc (id) {console.log(调用到了祖父级的方法areaParentFunc--- id)}}
}
/script!-- 孙组件 --
templatedivbutton typebutton clickfatherMethod调用方法/button /div
/template
script
export default {name: AreaMenuItem,props: {},data () {return {}},inject: [fatherMethod],methods: {}
}
/script2.2、使用若依时,node_nodules越来越大的问题
原因若依内部加入的打包的问题
解决方法将compression-webpack-plugin 插件注释掉即可
所在位置vue.config.js中,
const CompressionPlugin require(compression-webpack-plugin)2.3、echart笔记
1 echarts随着窗口缩放自适应
option this.myChart.setOption(option); // 创建好图形
window.onresize this.myChart.resize; // 使图标自适应窗口2 销毁图形
myChart.dispose()3 创建图形与刷新图形的区别
myChart.setOption(option, true) // 刷新数据刷新数据时不需要销毁图形
myChart.setOption(option) // 创建数据
