标签：vue return pageSize value ant callback let file design
1、form组件 自定义校验
template:
<a-form-item
fieldDecoratorId="articleNumber"
label='编码:'
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入编码！'},
{max: 60, message: '编码不能超过60个字符!'},{validator: validateCode}]}"
>
<a-input class="with-count" placeholder="请输入相关内容" autocomplete="off"
v-model="addOptions.productMainVo.articleNumber">
<template slot="addonAfter">{{addOptions.productMainVo.articleNumber.length}}/60</template>
</a-input>
</a-form-item>
methods:
（1）校验不含中文字符
validateCode (rule, value, callback) {
let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
if (value && reg.test(value)) {
/* eslint-disable-next-line */
callback('您输入的格式有误！')
return
}
callback()
}
（2）校验金额
validateMoney (rule, value, callback) {
if (value) {
if (!isNaN(value)) {
if (Number(value) > 10000000) {
/* eslint-disable-next-line */
callback('您输入的格式有误，金额最大值为10,000,000！')
return
} else if (isNaN((value + '').charAt(0))) {
/* eslint-disable-next-line */
callback('您输入的格式有误，金额首位请替换为数字！')
return
} else if (isNaN((value + '').charAt(value.length - 1))) {
/* eslint-disable-next-line */
callback('您输入的格式有误，金额末位请替换为数字！')
return
} else if ((value + '').indexOf('.') > -1 && (value + '').length - 1 - (value + '').indexOf('.') > 2) {
/* eslint-disable-next-line */
callback('您输入的格式有误，小数点后最多两位小数！')
return
} else {
callback()
}
} else {
/* eslint-disable-next-line */
callback('您输入的格式有误，金额为数字！')
return
}
}
callback()
}
2、解决带有下拉框的组件在滚动时 下拉框不跟随滚动的问题
api中有getPopupContainer
使用如下：
template:
<a-select :getPopupContainer="getPopupContainer">
<a-select-option v-for="d in brandData" :key="d.id">{{d.brandName}}</a-select-option>
</a-select>
methods:
getPopupContainer (trigger) {
return trigger.parentElement
}
但是级联选择组件 需要升级组件库版本到1.19不然此属性不生效
3、上传图片组件 ， 一次上传一张，照片墙模式，可删除预览，限制图片格式和大小
template:
<div class="upload-wrapper">
<div class="upload-tip">建议尺寸：800 x 800 像素。仅支持 gif、 jpeg、 png、 bmp 4种格式, 大小不超过3.0 MB。</div>
<div class="clearfix">
<a-upload
action="//qqq.com/upload/file"
name="file"
:data="{fileType: 'pic'}"
listType="picture-card"
:fileList="fileList"
:withCredentials="true"
@preview="handleUploadPreview"
@change="handleUploadChange"
>
<div>
<a-icon type="plus" />
<div class="ant-upload-text">添加图片</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleUploadCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</div>
data:
// 上传图片
previewVisible: false, // 是否可预览图片
previewImage: '', // 预览图片
fileList: [], // 上传图片数据列表
methods:
handleUploadCancel () {
this.previewVisible = false
},
handleUploadPreview (file) {
this.previewImage = file.url || file.thumbUrl
this.previewVisible = true
},
handleUploadChange ({file, fileList}) {
let pos = file.name.lastIndexOf('.')
let lastName = file.name.substring(pos, file.name.length)
let supportTypes = ['.gif', '.jpeg', '.png', '.bmp', '.jpg'] // gif、 jpeg、 png、 bmp
if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
this.$message.error('商品图片仅支持 gif、 jpeg、 png、 bmp 4种格式！')
return
}
if (file.size / (1024 * 1024) > 3) {
this.$message.error('上传商品图片大小应小于3Mb！')
return
}
this.fileList = fileList
// 根据服务端返回数据筛选上传成功的文件
let imgUrls = []
fileList.forEach((file) => {
if (file.response && file.response.code === '0') {
imgUrls.push(file.response.data.fileInfo.url)
}
})
},
4、自己写的popover弹框 ，组件自己的弹框在页面宽高变化的时候不好控制位置，会有错位，弹框跟不上触发弹框的按钮
template:
<div class="add-btn-wrapper">
<a-button @click="" class="add-btn">
<a-icon type="plus" /> 添加
</a-button>
<div class="select-spec-val" v-show="ifCanAdd">
<div class="ant-popover-arrow"></div>
</div>
</div>
css:
.add-btn-wrapper {
position: relative;
.ant-btn {
min-width: 96px;
}
.add-btn {
border: none;
color: #40a9ff;
min-width: 96px;
}
.select-spec-val {
position: absolute;
top: 45px;
left: -92px;
z-index: 3;
padding: 12px 16px;
color: rgba(0,0,0,.65);
background-color: #fff;
background-clip: padding-box;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
.ant-popover-arrow {
position: absolute;
top: -5px;
left: 135px;
box-shadow: -3px -3px 7px rgba(0,0,0,.07);
}
}
}
5、合并table组件单元格 ，根据不同数据动态合并行
配置的列属性信息如下：
columns: [
{
title: 'www',
dataIndex: 'we',
scopedSlots: {customRender: 'we'}
},
{
title: 'bbbb',
dataIndex: 'er',
scopedSlots: {customRender: 'er'},
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
// m为要合并的单元格数，自己定
if (index % m === 0) {
obj.attrs.rowSpan = m
} else {
obj.attrs.rowSpan = 0
}
return obj
}
}
]
6、table 组件 选择本页 和 选择全部, 以及处理禁用选择项
computed: {
rowSelection () {
const { selectedRowKeys } = this
return {
selectedRowKeys,
onChange: this.onSelectChange,
// 处理禁用选择项
getCheckboxProps: record => {
return {
props: {
disabled: this.disabledRowKeys.indexOf(record.key) > -1
}
}
},
hideDefaultSelections: true,
selections: [
{
key: 'page-data',
text: '本页全选',
onSelect: (changableRowKeys) => {
this.selectedRowKeys = changableRowKeys
this.selectWholePages = false
}
},
{
key: 'all-data',
text: '全部选择',
onSelect: (changableRowKeys) => {
this.selectedRowKeys = [...Array(this.pagination.totalCount).keys()]
}
}],
onSelection: this.onSelection
}
},
},
data:
selectedRowKeys: []
methods:
// 这个方法中只监听选择框的选中和取消， 不监听自定义的选择本页和选择全部
onSelectChange (selectedRowKeys) {
// 里面的处理逻辑 按自己需求写即可
this.selectedRowKeys = selectedRowKeys
},
7、自己再封装的分页组件
<template>
<div class="page-wrapper text-right">
<a-pagination
class="page-content"
:pageSizeOptions="['10', '20', '30', '40', '50']"
showSizeChanger
:total="total"
:pageSize="pageSize"
:current="current"
@change="onChange"
@showSizeChange="onShowSizeChange"
>
<template slot='buildOptionText' slot-scope='props'>
<span v-if="props.value!=='50'">{{props.value}}条/页</span>
<span v-if="props.value==='50'">50条/页</span>
</template>
</a-pagination>
<span class="total">共 {{total}} 条</span>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: {
total: {
require: true,
type: Number
},
pageSize: {
require: true,
type: Number
},
current: {
require: true,
type: Number
}
},
methods: {
onChange (current, pageSize) {
this.$emit('onChange', current, pageSize)
},
onShowSizeChange (current, pageSize) {
this.$emit('onShowSizeChange', current, pageSize)
}
}
}
</script>
<style lang='scss' rel="stylesheet/scss" type="text/scss">
</style>
使用如下：
template:
<custom-pagination
:total="pagination.totalCount"
:pageSize="pagination.pageSize"
:current="pagination.pageNo"
@onChange="onChangePage"
@onShowSizeChange="onShowSizeChangePage"
></custom-pagination>
script:
import CustomPagination from 'components/pagination/index.vue'
data:
pagination: {
pageNo: 1,
pageSize: 10,
totalCount: 0
},
methods:
onChangePage (pageNo, pageSize) {
this.pagination.pageNo = pageNo
// 重新请求数据
},
onShowSizeChangePage (pageNo, pageSize) {
this.pagination.pageSize = pageSize
// 重新请求数据
},
8、上传压缩包， 校验只能上传zip压缩包
template:
<a-upload :multiple="false" :fileList="fileList"
name="file"
:data="{fileType: 'zip'}"
accept="*.zip"
:withCredentials="true"
action="//qqq.com/file" @change="uploadZip">
<a-button>
<a-icon type="upload" />
</a-button>
</a-upload>
data:
fileList: [],
methods:
uploadZip (info) {
let pos = info.file.name.lastIndexOf('.')
let lastName = info.file.name.substring(pos, info.file.name.length)
if (lastName.toLowerCase() === '.zip') {
this.fileList = info.fileList.slice(-1)
this.loadedFile = info.file
let res = info.file.response
if (res) {
if (res.code === '0') {
this.$message.success('文件上传成功')
} else {
this.$message.error(res.message)
}
}
} else {
this.$message.error('只能上传zip压缩包')
}
},
9、格式化金额数字为小数点后两位，没有就补0
filters: {
money (num) {
if (!/^(\d+)(\.\d*)?$/.test(num)) {
return ''
}
let strNum = num + ''
let number = num
if (strNum.indexOf('.') > -1) {
number = num.toFixed(2)
} else {
number = num + '.00'
}
strNum = number + ''
let font = strNum.substring(0, strNum.indexOf('.'))
let back = strNum.substring(strNum.indexOf('.'))
let mod = font.length % 3
let output = (mod === 0 ? '' : (font.substring(0, mod)))
for (let i = 0; i < Math.floor(font.length / 3); i++) {
if ((mod === 0) && (i === 0)) {
output += font.substring(mod + 3 * i, mod + 3 * i + 3)
} else {
output += ',' + font.substring(mod + 3 * i, mod + 3 * i + 3)
}
}
return output + back
}
},
10、文字两端对齐，pc端
css:
.item-title {
background-color: transparent;
border: none;
font-family: PingFang-SC-Medium;
font-size: 14px;
color: #666;
padding: 0 11px;
line-height: 32px;
width: 126px;
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
11、model组件 确认弹框中内容使用自定义的标签
let self = this
this.$confirm({
centered: true,
maskClosable: true,
title: '确认吗？',
// 注意此处写法 JSX support
content: (
<div>
<p>信息1：{row.msg1}</p>
<p>信息2：{row.msg2}</p>
</div>
),
onOk () {
let params = {}
}
self.request(params)
},
onCancel() {}
})标签：vue,return,pageSize,value,ant,callback,let,file,design 来源： https://blog.csdn.net/u012732909/article/details/119317938
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。