![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端样式
白枫 White Maple
没有
展开
-
移动端 H5 tab吸顶的需求
需求:展示页面包含:广告位,tab切换,内容展示,需要向上滑动的时候,广告位隐藏,tab吸顶展示,内容区域正常滑动;下拉刷新后,广告位显示,tab取消吸顶。页面:原创 2021-09-23 17:29:13 · 989 阅读 · 0 评论 -
form表单中数组的校验升级---校验多个
之前的form表的数组的校验只能单纯的处理单一的必填校验,如果有多个校验条件就不好处理了,所以换了一种写法:上一篇form表单校验的地址::https://blog.csdn.net/qq_42323925/article/details/109613569#comments_16650949<template> <div class="hello"> <el-form ref="form" :model="form" :rules="rules">原创 2021-05-27 14:27:15 · 1712 阅读 · 0 评论 -
vue中使用iframe的总结
需求描述:在后台管理系统中需要预览配置的数据在手机上显示的样式,方便后台管理人员操作,因为预览的内容比较多,h5已经写好了一套代码,所以利用iframe将h5的页面展示引入到后台代码展示:iframe:<iframe id="iframe" ref="iframe" frameborder="0" class="iframe" :src="srcH5" //srcH5:预览页面的地址/>srcH5:'/iframeH5/preview',父页面给子原创 2020-11-25 18:05:51 · 1693 阅读 · 0 评论 -
vue 搜索的回车搜索功能的几种方法
1.第一种情况,input框<input @keyup.enter="function">2.在自己封装的组件或者是使用一些第三方的UI库时,会发现并不起效果,这时就需要用到.native修饰符了<el-input @keyup.enter.native="function" />3.如果想要绑定的组件太多,可以对键盘进行监控 mounted() { // 绑定enter事件 this.enterKeyup(); }, destr.原创 2020-07-24 14:01:46 · 1128 阅读 · 0 评论 -
el-cascader 级联选择器 总结
1.组件使用图片展示:代码展示:<template> <div class="home"> <el-cascader ref="myCascader" v-model="form.id" :placeholder="form.name" :options="options" :show-all-levels="false" :props="{ value: 'id', labe原创 2020-11-23 16:15:11 · 4411 阅读 · 0 评论 -
设置选中最大值,选中数达最大值时,其他选项置灰
需求描述:循环数组得到选项的div块,选中的爱好达到3个时,其他选项置灰,不能选择;点击取消3个中的一个选项,可以继续选择选项图片描述:循环得到选项 点击选中的样式 选中数量达到最大值 代码设计:<template> <div> <div class="interest-home flex"> <p ...原创 2020-11-23 15:20:14 · 296 阅读 · 0 评论 -
css - 水平居中,垂直居中,水平垂直居中的样式
1.水平定位(1)行内元素:text-align: center(2)块级元素:margin: 0 auto(3) 子: position:absolute left:50% transform:translateX(-50%) 父: position:relative(4) 父: display: flex;justify-content: center;2.垂直定位(1) 父: display: table-cell;vertical-align: mid...原创 2020-11-09 17:36:16 · 165 阅读 · 0 评论 -
vue element 前端的分页
前提:一般的列表分页,都是通过后台返回的数据进行分页的,但是有的表格数据需要先在前端处理,在保存之前不经过后台接口存储,这是就需要前端进行分页处理代码:用slice截取const from = (this.currentPage - 1) * this.pageSize 拿到开始截取的下标const to = this.currentPage * this.pageSize 拿到停止截取的下标this.tableData = [] //tableData 是展示的数组 totalLis原创 2020-08-14 10:08:58 · 214 阅读 · 0 评论 -
vue elementUI 关于表格的多选总结
前提:在做后台管理系统时,有好多有关表格的操作都需要用到多选框,经常用的时elementUi,现在进行总结示例图:总结:1.在列表第一列添加多选框,按照组件一步步来,multipleSelection中就是选中状态的数据2.如果表格中有分页,需要在翻页的时候记住上一页面选中的数据3.取消选中状态(1)需要去掉某些行的选中状态(不是全部)前提:使用方法:this.$refs.multipleTable.toggleRowSelection(th原创 2020-08-13 15:02:28 · 5280 阅读 · 0 评论 -
element的表格单选设置
element的表格单选设置代码:<el-table ref="singleTable" :data="tableData" border highlight-current-row @current-change="handleCurrentChange" > <...原创 2020-04-13 15:36:50 · 2728 阅读 · 2 评论 -
手机app---样式调整总结
1.封装公用的样式例如:直接定以/*颜色*/.c000{color:#000000}.cFFF{color:#FFFFFF;}.cBBB{color:#BBBBBB;}通过方法解析/*字体*/@for$ifrom8through40{.fs#{$i}{font-size:#{$i/20}rem;}...原创 2020-07-13 18:50:33 · 902 阅读 · 0 评论