• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

AntDesignVue3 数据录入

Data: 2020-10-03 16:10:30Form: JournalClick: 0

# 数据录入

# 一、表单模块

# 1、Input 输入框

参数描述类型默认值
size输入框大小large、default、smalldefault
value(v-model)输入框内容string
type输入框类型，同原生 input 标签的 type 属性stringtext
maxlength最大长度number​
allowClear可以点击清除图标删除内容booleanfalse
disabled禁用状态booleanfalse
prefix带有前缀图标的输入框string、slot
addonBefore带标签的输入框，设置前置标签string、slot
addonAfter带标签的输入框，设置后置标签string、slot
事件名称描述回调参数
change输入框内容变化时的回调function(e)
pressEnter按下回车的回调function(e)
<template>
    <div style="margin: 50px">
        # 1、输入框
        <a-input placeholder="请输入文字" />

        # 2、size 输入框大小：大尺寸large  小尺寸small
        <a-input size="large" placeholder="大尺寸" />
        <a-input placeholder="默认尺寸" />
        <a-input size="small" placeholder="小尺寸" />

        # 3、value(v-model) 输入框内容，defaultValue 默认内容
        // value 不能输入文字
        <a-input placeholder="请输入文字" value="欧阳克" />
        <a-input placeholder="请输入文字" defaultValue="欧阳克" />
        <a-input placeholder="请输入文字" v-model:value="name" />
    </div>
</template>
<script>
import { ref } from "vue";
export default {
    setup() {
        return {
            name: "欧阳克"
        }
    }
};
</script>

<template>
    <div style="margin: 50px">
        # 4、type 输入框类型：text、password、number
        <a-input placeholder="请输入文字" type="" />

        # 5、maxlength 最大长度
        <a-input placeholder="请输入文字" maxlength="5" />

        # 6、allowClear 可以点击清除图标删除内容
        <a-input placeholder="请输入文字" allowClear="true" />

        # 7、disabled 禁用
        <a-input placeholder="请输入文字" disabled="true" />

        # 8、prefix 带有前缀图标的 input，suffix 带有后缀图标的 input
        <a-input placeholder="请输入文字" prefix="￥" suffix="RMB" />
        # 9、addonBefore 带标签的 input，设置前置标签，addonAfter 带标签的 input，设置后置标签
        <a-input placeholder="请输入文字" maxlength="5" addonBefore="￥" addonAfter="RMB" />
        
        # 10、change 点击事件 pressEnter 回车按键事件
        <a-input placeholder="请输入文字" @change="onChange" @pressEnter="onChange" />
    </div>
</template>
<script>
export default {
    setup() {
        const onChange = (e) => {
            console.log("输入框事件");
            console.log(e);
        };
        return {
            onChange
        };
    }
};
</script>

# 2、TextArea 富文本框

参数描述类型默认值
value(v-model)输入框当前值string
defaultValue输入框默认内容string
showCount展示字数booleanfalse
allowClear可以点击清除图标删除内容booleanfalse
autoSize自适应内容高度，可设置为 true、false 或对象：{ minRows: 2, maxRows: 6 }boolean、object​
事件名称描述回调参数
pressEnter按下回车的回调function(e)
<template>
    <div style="margin: 50px">
        # 1、value(v-model) 输入框内容，defaultValue 默认内容
        // value 不能输入文字
        <a-textarea placeholder="请输入文字" value="富文本输入框" />
        <a-textarea placeholder="请输入文字" v-model:value="textarea" />
        <a-textarea placeholder="请输入文字" defaultValue="富文本输入框" />
          
        # 2、showCount 展示字数
        <a-textarea placeholder="请输入文字" v-model:value="textarea" showCount />
        # 3、allowClear 可以点击清除图标删除内容
        <a-textarea placeholder="请输入文字" v-model:value="textarea" allowClear />
        
        # 4、autosize 自适应内容高度
        <a-textarea placeholder="请输入文字" v-model:value="textarea" autoSize />
        <a-textarea placeholder="请输入文字" v-model:value="textarea" :autoSize="{minRows:2,maxRows:4}" />
        
        # 5、pressEnter 事件：按下回车的回调
        <a-textarea placeholder="请输入文字" v-model:value="textarea" @pressEnter="onChange" />
    </div>
</template>
<script>
import { ref } from "vue";
export default {
    const onChange = (e) => {
        console.log("输入框事件");
        console.log(e);
    };
    setup() {
        return {
            textarea: ref("富文本输入框"),
            onChange
        };
    }
};
</script>

# 3、InputNumber 数字输入框

参数描述类型默认值
value(v-model)输入框当前值number
defaultValue输入框默认内容number
size输入框大小large、default、smalldefault
min最小值number​
max最大值number​
step每次改变步数，可以为小数number、string1
disabled禁用booleanfalse
事件名称描述回调参数
change数据改变回调function(e)
pressEnter按下回车的回调function(e)
<template>
    <div style="margin: 50px">
        # 1、a-input-number 数字输入框
        <a-input-number placeholder="请输入" />
  
        # 2、value(v-model) 当前值
        <a-input-number placeholder="请输入" value="5" />
        <a-input-number placeholder="请输入" v-model:value="num" />

        # 3、defaultValue 初始值
        <a-input-number placeholder="请输入" defaultValue="5" />
  
        # 4、size 输入框大小：large大(40px)  small小(24px)  默认(32px)
        <a-input-number size="large" />
        <a-input-number />
        <a-input-number size="small" />
  
        # 5、min最小值 max最大值
        <a-input-number min="1" max="10" />
  
        # 6、step 步数：可以为小数
        <a-input-number min="1" max="10" step="0.1" />

        # 7、disabled 禁用
        <a-input-number disabled />
        
        # 8、change 和 pressEnter 事件
        <a-input-number @change="onChange" />
        <a-input-number @pressEnter="onChange" />
    </div>
</template>
<script>
import { ref } from "vue";
export default {
    setup() {
        const onChange = (e) => {
            console.log("输入框事件");
            console.log(e);
        };
        return {
            num : ref(100),
            onChange
        };
    }
};
</script>

# 4、Radio 单选框​

参数描述类型默认值
checked(v-model)指定当前是否选中booleanfalse
disabled禁用 Radiobooleanfalse
value根据 value 进行比较，判断是否选中any​
<template>
    <div style="margin: 50px">
        # 1、a-radio 单选框
        <a-radio>欧阳克</a-radio>
  
        # 2、checked(v-model) 当前是否选中
        <a-radio checked>欧阳克</a-radio>
        <a-radio v-model:checked="checked">欧阳克</a-radio>
  
        # 3、disabled 禁用
        <a-radio disabled>欧阳克</a-radio>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        return {
            checked: ref(false)
        };
    }
};
</script>
参数描述类型默认值
value(v-model)用于设置当前选中的值any​
nameRadioGroup 下所有 input[type="radio"] 的 name 属性string​
size大小，只对按钮样式生效large、default、smalldefault
buttonStyle描边和填色两种风格outline、solidoutline
disabled禁选所有子单选器booleanfalse
options以配置形式设置子元素string[]、Array
optionType用于设置 options 类型default、buttondefault
事件名称描述回调参数
change选项变化时的回调函数Function(e:Event)
<template>
    <div style="margin: 50px">
        # 1、a-radio-group 单选框组
        <a-radio-group name="radioGroup">
            <a-radio value="1">A</a-radio>
            <a-radio value="2">B</a-radio>
            <a-radio value="3">C</a-radio>
            <a-radio value="4">D</a-radio>
        </a-radio-group>

        # 2、value(v-model)  当前选中的值
        <a-radio-group name="radioGroup" v-model:value="radio">
            <a-radio :value="1">A</a-radio>
            <a-radio :value="2">B</a-radio>
            <a-radio :value="3">C</a-radio>
            <a-radio :value="4">D</a-radio>
        </a-radio-group>
            
        # 3、a-radio-button  按钮样式
        # 3.1、size 尺寸：large、default、small
        <a-radio-group name="radioGroup" v-model:value="radio" size="large">
            <a-radio-button :value="1">A</a-radio-button>
            <a-radio-button :value="2">B</a-radio-button>
            <a-radio-button :value="3">C</a-radio-button>
            <a-radio-button :value="4">D</a-radio-button>
        </a-radio-group>
            
        # 4、buttonStyle 风格样式：描边(outline)、填色(solid)
        <a-radio-group name="radioGroup" v-model:value="radio" size="large" buttonStyle="solid">
            <a-radio-button :value="1">A</a-radio-button>
            <a-radio-button :value="2">B</a-radio-button>
            <a-radio-button :value="3">C</a-radio-button>
            <a-radio-button :value="4">D</a-radio-button>
        </a-radio-group>

        # 5、disabled 整组禁用
        <a-radio-group name="radioGroup" v-model:value="radio" size="large" disabled>
            <a-radio-button :value="1">A</a-radio-button>
            <a-radio-button :value="2">B</a-radio-button>
            <a-radio-button :value="3">C</a-radio-button>
            <a-radio-button :value="4">D</a-radio-button>
        </a-radio-group>
        
        # 6、options 配置形式设置子元素
        <a-radio-group v-model:value="value" :options="Options" />
        # 6.1、optionType 用于设置 options 类型
        <a-radio-group v-model:value="value" :options="Options" optionType="button" />
          
        # 7、change 单选框事件
        <a-radio-group v-model:value="value" :options="Options" optionType="button" @change="onChange" />
    </div>
</template>
<script>
import { ref } from "vue";
export default {
    setup() {
        const onChange = (e) => {
            console.log("单选框事件");
            console.log(e);
        };
        return {
            radio: 2,
            Options: ["A", "B", "C", "D"],
            value: "A",
            onChange,
        };
    }
};
</script>

# 5、checkbox 多选框

参数描述类型默认值
checked(v-model)指定当前是否选中booleanfalse
disabled禁用 Radiobooleanfalse
value根据 value 进行比较，判断是否选中any​
<template>
    # 1、a-checkbox标签 多选框
    <a-checkbox>多选框</a-checkbox>

    # 2、checked(v-model)参数  当前是否选中
    <a-checkbox v-model:checked="checked">多选框</a-checkbox>
        
    # 3、disabled参数 禁用
    <a-checkbox v-model:checked="checked" disabled>多选框</a-checkbox>
</template>
<script>
export default {
    data() {
        return {
            checked: true
        };
    }
};
<
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>