106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<docs>
|
||
---
|
||
order: 4
|
||
title:
|
||
zh-CN: 表单禁用
|
||
en-US: Form disabled
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
设置表单组件禁用，仅对 antd 组件有效。
|
||
|
||
## en-US
|
||
|
||
Set component disabled, only works for antd components.
|
||
</docs>
|
||
|
||
<template>
|
||
<a-checkbox :checked="componentDisabled" @change="e => (componentDisabled = e.target.checked)">
|
||
Form disabled
|
||
</a-checkbox>
|
||
<a-form
|
||
:label-col="labelCol"
|
||
:wrapper-col="wrapperCol"
|
||
layout="horizontal"
|
||
:disabled="componentDisabled"
|
||
style="max-width: 600px"
|
||
>
|
||
<a-form-item label="Checkbox">
|
||
<a-checkbox>checkbox</a-checkbox>
|
||
</a-form-item>
|
||
<a-form-item label="Radio">
|
||
<a-radio-group v-model:value="radioValue">
|
||
<a-radio value="apple">Apple</a-radio>
|
||
<a-radio value="pear">Pear</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
<a-form-item label="Input">
|
||
<a-input />
|
||
</a-form-item>
|
||
<a-form-item label="Select">
|
||
<a-select>
|
||
<a-select-option value="demo">Demo</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item label="TreeSelect">
|
||
<a-tree-select :tree-data="treeData" />
|
||
</a-form-item>
|
||
<a-form-item label="Cascader">
|
||
<a-cascader :options="options" />
|
||
</a-form-item>
|
||
<a-form-item label="DatePicker">
|
||
<a-date-picker />
|
||
</a-form-item>
|
||
<a-form-item label="RangePicker">
|
||
<a-range-picker />
|
||
</a-form-item>
|
||
<a-form-item label="InputNumber">
|
||
<a-input-number />
|
||
</a-form-item>
|
||
<a-form-item label="TextArea">
|
||
<a-textarea :rows="4" />
|
||
</a-form-item>
|
||
<a-form-item label="Switch">
|
||
<a-switch v-model:checked="checked" />
|
||
</a-form-item>
|
||
<a-form-item label="Upload">
|
||
<a-upload action="/upload.do" list-type="picture-card">
|
||
<div>
|
||
<PlusOutlined />
|
||
<div style="margin-top: 8px">Upload</div>
|
||
</div>
|
||
</a-upload>
|
||
</a-form-item>
|
||
<a-form-item label="Button">
|
||
<a-button>Button</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, reactive } from 'vue';
|
||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||
import type { TreeSelectProps, CascaderProps } from 'ant-design-vue';
|
||
|
||
const componentDisabled = ref(true);
|
||
const labelCol = { style: { width: '150px' } };
|
||
const wrapperCol = { span: 14 };
|
||
const radioValue = ref('apple');
|
||
const treeData = reactive<TreeSelectProps['treeData']>([
|
||
{ title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] },
|
||
]);
|
||
const options = reactive<CascaderProps['options']>([
|
||
{
|
||
value: 'zhejiang',
|
||
label: 'Zhejiang',
|
||
children: [
|
||
{
|
||
value: 'hangzhou',
|
||
label: 'Hangzhou',
|
||
},
|
||
],
|
||
},
|
||
]);
|
||
const checked = ref(false);
|
||
</script>
|