FLEX

摘要： 在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址如下： https://echarts.baidu.com/index.html ，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。 本文流程： 1.安装插件→2.引入Echarts→3.创建图表→4.修改样式→5.接入数据 一.安装插件 方法一：npm安装Echarts npm install echarts -S 方法二：cnpm安装Echarts 1.首先我们需要安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2.然后 cnpm install echarts -S 二.引入Echarts 方法一：全局引入 打开 main.js 文件引入Echarts import echarts from 'echarts' 然后将echart添加到vue的原型上，这样就可以全局使用了 Vue.prototype.$echarts = echarts 方法二：局部引入 全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需要来局部引入，比如我们需要引入一个柱状图 // 引入基本模板 let

<!-- * @Description: * @Version: 2.0 * @Autor: lhl * @Date: 2020-01-15 11:15:40 * @LastEditors: lhl * @LastEditTime: xxx --> < template > < div > < el-table :data ="tableData" style ="width: 100%" > < el-table-column align ="center" label ="Date" prop ="date" ></ el-table-column > < el-table-column align ="center" :label ="'姓名\n(注：element ui 表格表头换行)'" prop ="name" ></ el-table-column > < el-table-column align ="center" :render-header ="renderHeader" > < template slot-scope ="scope" > < span > {{scope.row.address}} </ span > </ template > </ el-table-column > </ el-table > </ div > </ template

㈠什么是BFC？ BFC 全称为 块格式化上下文 (Block Formatting Context) 。 定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 ㈡BFC的布局规则是什么？ 1）内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。 2）Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3）每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此 4）BFC的区域不会与float box 重叠 5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此 6）计算BFC的高度时，浮动元素也参与计算 ㈢那些情况会产生新的BFC/如何创建BFC？ ⑴根元素或其它包含它的元素 ⑵浮动 (元素的 float 不为 none) ⑶绝对定位元素 (元素的 position 为 absolute 或 fixed) ⑷行内块 inline-blocks (元素的 display: inline

为什么需要自定义组件？因为小程序通过组件来传值，但小程序没有提供很多传值的方法，所以需要写自定义组件。调用自定义组件 - 传值给组件 - 组件传值出来，开发者需要在组件中写属性及方法等。 原博文章： https://www.jianshu.com/p/8a2a730d9e60 现在来实现弹幕功能 如下： 1. 首先需要单独创建一个组件目录，在目录中新建一个AuglyVideo文件夹，用来存放弹窗组件，结构如下: 2. 组件初始化准备完成。开始写组件相关的配置。我们需要现在自定义组件声明 component 字段为 true //AuglyVideo.json { 　　"component": true, // 自定义组件声明 　　"usingComponents": {} // 可选项，用于引用别的组件 } 接下来组件的页面结构： //AuglyVideo.wxml <view class='wx_dialog_container' hidden="{{!isShow}}"> 　　<view class='wx-mask'></view> 　　<view class='wx-dialog'> 　　　　<view class='wx-dialog-title'>{{ title }}</view> 　　　　<view class='wx-dialog-content'>{{

　　由于如浮动、margin值叠加等时候会用到BFC，但让我详细说BFC到底是什么，有说不清楚，所以决定对BFC的知识进行一个整理。 1.BFC是什么 　　BFC中三个英文字母B、F、C分别是Block（块级盒子）、Formatting（格式化）、Context（上下文）。 　　BFC的中文意思是块级格式化上下文。简单的理解BFC， 其从样式上和普通盒子没有什么区别，其从功能上可以将其看作是隔离了的独立容器，容器里面的元素布局不会影响到外面的元素（如浮动、首元素的margin-top加到了父元素上等） ， 并且BFC容器具有普通容器没有的一些特点，如包含浮动元素解决内容塌陷等 。 　　BFC是特殊盒子（容器）所具有的的特性（属性），这种特殊盒子在样式上和普通盒子没有区别；其从功能上可以将其看作是隔离了的容器，容器里面的布局不会影响到外面的元素，并且该容器有一些普通容器没有的特殊能力（作用），如解决高度塌陷、解决margin值叠加等。 2.如何触发BFC 　　触发BFC的条件： 根元素（html、body） float不会none（left、right） 绝对定位元素（absolute、fixed） display设置为inline-block、table-cell、table-caption、flex、inline-flex overflow不为visible可看见的（hidden

1转换 2D 转换 二维平面移动 语法： transform:translateX( 移动的距离 ) translateY( 移动的距离 ); Transform:translate( 水平移动距离，垂直移动距离 ) 可以设置负值，水平的正值是向右移动，垂直的正值是向下移动 二维平面旋转 语法： Transform:rotate(30deg); 旋转原点的设置 transform-origin:center( 默认值 ) 可以设置 left,top,right,bottom,center, 百分比设置： transform-origin: 水平位置的百分比 垂直位置的百分比 3D 转换 透视点 在所看元素的父元素或者是祖先元素上设置透视点 语法 :perspective: 1000px; 三维立体的移动 语法： transform: translateZ(200px); transform: translate3d( 水平移动 , 垂直移动 ,z 轴移动 ); z 轴： z 轴垂直于屏幕，方向是射向我们。 三维立体的旋转 语法： /*transform: rotateX(30deg);*/ /*transform: rotateY(30deg);*/ /*transform: rotateZ(30deg);*/ transform: rotate3d(1,1,1,30deg);

当面试官问道你高度塌陷时，人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 　对，没错，这是一个完美的解决方案，但是我们有考虑过这个方案的实现原理吗，或者面试管继续问你这个方法的原理是什么？是不是一脸懵，不懵的也别杠，接下来我通过排他法来展示他的原理 　1. 首先 ::after 是元素的伪元素，在元素后面生成伪元素 　2.content 是伪元素的内容，为空，只是让伪元素不显示，显然不是原理 　3. height:0 是为了让伪元素高度为0 ，显然不是 　4. visibility:hidden 是为了伪元素浏览器渲染但不显示，显然也不是 　5. display: block 只是为了让伪元素成为块级元素，成为触发 clear:both 的条件，有点关系 　6. clear:both 规定在左右两侧不允许出现浮动元素， 这便是清除浮动的原理了 那么为什么要清除浮动，最常见的原因是 外层容器高度塌陷，下面简单演示一下 <style> .wrap { width: 200px; border: 1px solid #333; } .wrap:after { content: '伪元素'; } .left { float:

上一篇有自定义提示框， 前端 自定义弹出框-提示框（一） ，这篇推荐一个确认框的实现。 JS默认确认框 确认框 var result=confirm('确认删除XX文件？');result为bool类型 回复确认框 var result=prompt('请输入文件标题：');result返回输入的值 自定义确认框 下文提供一个自定义提示框的案例，通过另一种方案（样式设置）来实现： 1 <div class="confirmWindow" id="confirmwindow"> 2 <div class="body"> 3 <div class="content">确认要删除XX文件么？</div> 4 <div class="btns"> 5 <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onClick="cancelOnClick()">取消</a> 6 <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onClick="okOnClick()">确认</a> 7 </div> 8 </div> 9 </div> 通过js设置元素的display属性，来控制提示框的显示隐藏 document.getElementById(

前言：微信小程序的代码实现，uniapp与原生代码差异不大，语法格式可对比swiper实现的原生代码和scrollview实现的uniapp代码。 参考资料： 微信小程序api>> https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 获取元素/组件与顶部的距离>> https://www.jianshu.com/p/fe72cff2b808 swiper实现的简易demo>> https://blog.csdn.net/weixin_41599291/article/details/93650074 功能实现： 右侧滚动，左侧会对应高亮显示； 左侧是否重复点击，右侧显示相应数据，置顶； 实现思路： 围绕 scroll-view 组件的 scroll-into-view 和 scroll-top 属性展开 巨坑： for(let i in this.topList) 中的 i 属于字符串，执行计算操作时必须先转数字 int 效果图： 代码： <template> <view> <view style="text-align: center;">搜索栏</view> <view class='productNav'> <view class='left'> <view :class=

React Native之获取通讯录信息并实现类通讯录列表(ios android) 一,需求分析 1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用。 2,获取通讯录信息,实现类通讯录,可拨打电话 发短信等。 二,技术介绍与配置 2.1 技术介绍 1, react-native-contacts地址 :https://www.npmjs.com/package/react-native-contacts 2,下载安装： npm install react-native-contacts --save 3,自动链接： react-native link react-native-contacts 4,react-native-contacts API介绍： getAll(callback)——以对象数组的形式返回所有联系人 getAllWithoutPhotos——和getAll在安卓系统上是一样的，但是在iOS系统上它不会返回联系人照片的uri(因为创建这些图片会带来很大的开销) getPhotoForId(contactId, callback)——返回联系人照片的URI(或null) openContactForm (contact, callback)——在contactsUI中创建一个新的联系人并显示。添加一个联系人到通讯录。 updateContact