vue中form表单禁用专用组件介绍
作者:是文静的
这篇文章主要介绍了vue中form表单禁用专用组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
form表单禁用专用组件
JFormContainer.vue
<template> <div :class="disabled?'jeecg-form-container-disabled':''"> <fieldset :disabled="disabled"> <slot name="detail"></slot> </fieldset> <slot name="edit"></slot> <fieldset disabled> <slot></slot> </fieldset> </div> </template>
<script> /** * 使用方法 * 在form下直接写这个组件就行了, *<a-form layout="inline" :form="form" > * <j-form-container :disabled="true"> * <!-- 表单内容省略..... --> * </j-form-container> *</a-form> */ export default { name: 'JFormContainer', props: { disabled: { type: Boolean, default: false, required: false } }, mounted () { console.log('我是表单禁用专用组件,但是我并不支持表单中iframe的内容禁用') } } </script>
<style> .jeecg-form-container-disabled{ cursor: not-allowed; } .jeecg-form-container-disabled fieldset[disabled] { -ms-pointer-events: none; pointer-events: none; } .jeecg-form-container-disabled .ant-select{ -ms-pointer-events: none; pointer-events: none; } .jeecg-form-container-disabled .ant-upload-select{display:none} .jeecg-form-container-disabled .ant-upload-list{cursor:grabbing} .jeecg-form-container-disabled fieldset[disabled] .ant-upload-list{ -ms-pointer-events: auto !important; pointer-events: auto !important; } .jeecg-form-container-disabled .ant-upload-list-item-actions .anticon-delete, .jeecg-form-container-disabled .ant-upload-list-item .anticon-close{ display: none; } </style>
<template> <a-form layout="inline" :form="form" > <j-form-container :disabled="true"> <!-- 表单内容省略..... --> <a-row class="form-row" :gutter="16"> <a-col :lg="10" :md="10" :sm="20"> <a-form-item label="文件"> <a-button> <a-icon type="upload" /> 上传 </a-button> </a-form-item> </a-col> </a-row> <a-row class="form-row" :gutter="16"> <a-col :lg="10" :md="10" :sm="20"> <a-form-item label="文件"> <a-button> <a-icon type="upload" /> 上传 </a-button> </a-form-item> </a-col> </a-row> </j-form-container> </a-form> </template>
<script> import JFormContainer from '@/components/jeecg/JFormContainer' export default { components: { JFormContainer }, data () { return { form: this.$form.createForm(this) } }, methods: {} } </script> <style scoped> </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。