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

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Form 数据录入

Data: 2020-01-06 05:59:08Form: JournalClick: 6

# Form 数据录入

# 一、Input 输入框

# 1、组件

  • <el-input />
参数说明类型可选值默认值
type类型stringtext textarea 和其他原生 input 的 type 值text
modelValue、v-model绑定值string、number——
size输入框尺寸，只在 type 不为textarea时有效stringlarge、default、small—
name等价于原生 input name 属性string——
readonly原生 readonly 属性，是否只读boolean—false
placeholder输入框占位文本string——
clearable是否可清空boolean—false
prefix-icon自定义前缀图标string、Component——
suffix-icon自定义后缀图标string、Component——
minlength原生属性，最小输入长度number——
maxlength最大输入长度string、number——
show-word-limit是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效boolean—false
show-passwordt是否显示切换密码图标boolean—false
<template>
    <div>
        <!-- 1、type 默认为text -->
        <!-- 类型：textarea、radio、checkbox、date、email、tel、time、url、color、password、file、image、button -->
        <el-input />
        <el-input type="textarea" />
        <!-- 2、v-model 绑定值 -->
        <el-input v-model="input" />
        <!-- 3、size 输入框尺寸：large、default、small -->
        <el-input v-model="input" size="large" />
        <el-input v-model="input" size="small" />
        <!-- 4、name 等价于原生 `input name` 属性 -->
        <el-input v-model="input" name="input" />
        <!-- 5、readonly 原生 `readonly` 属性，是否只读 -->
        <el-input v-model="input" readonly />
        <!-- 6、placeholder 输入框占位文本 -->
        <el-input v-model="input" placeholder="请输入" />
        <!-- 7、clearable 是否可清空 -->
        <el-input v-model="input" clearable />
        <!-- 8、prefix-icon 自定义前缀图标 -->
        <!-- 9、suffix-icon 自定义后缀图标 -->
        <el-input v-model="input" prefix-icon="House" suffix-icon="Bell" />
        <!-- 10、maxlength 最大输入长度 -->
        <!-- 11、show-word-limit 显示输入字数统计 -->
        <el-input v-model="input" maxlength="10" show-word-limit />
        <!-- 12、show-passwordt 密码图标 -->
        <el-input v-model="input" maxlength="10" show-passwordt />
    </div>
</template>
<script>
    import { reactive, toRefs } from "vue";
    export default({
        setup() {
            const data = reactive({
                input : ''
            })
            return {
                ...toRefs(data)
            }
        }
    })
</script>

# 2、事件

事件名说明参数
blur在 Input 失去焦点时触发(event: Event)
focus在 Input 获得焦点时触发(event: Event)
change在输入框失去焦点或用户按下回车时触发(value: string、number)
input在 Input 值改变时触发(value: string、number)
clear在点击由 clearable 属性生成的清空按钮时触发—
<template>
    <div>
        <!-- 1、blur 在 Input 失去焦点时触发 -->
        <el-input v-model="input" @blur="event('失去焦点')" />
        <!-- 2、focus 在 Input 获得焦点时触发 -->
        <el-input v-model="input" @focus="event('获得焦点')" />
        <!-- 3、change 在输入框失去焦点或用户按下回车时触发 -->
        <el-input v-model="input" @change="event('在输入框失去焦点或用户按下回车时触发')" />
        <!-- 4、input 在 Input 值改变时触发 -->
        <el-input v-model="input" @input="event('值改变时')" />
        <!-- 5、clear 在点击由 clearable 属性生成的清空按钮时触发 -->
        <el-input v-model="input" clearable @clear="event('清空按钮时')" />
    </div>
</template>
<script>
    import { reactive, toRefs } from "vue";
    export default({
        setup() {
            const data = reactive({
                input : ''
            })
            const event = (e) => {
                console.log(e);
            }
            return {
                ...toRefs(data),
                event
            }
        }
    })
</script>

# 二、Input Number 数字输入框

# 1、数字输入框组件

  • <el-input-number />
参数说明类型可选值默认值
v-model选中项绑定值number、undefined——
min设置计数器允许的最小值number—-Infinity
max设置计数器允许的最大值number—Infinity
step计数器步长number—1
size计数器尺寸stringlarge、smalldefault
disabled是否禁用计数器boolean—false
name原生 name 属性string——
label输入框关联的 label 文字string——
placeholder输入框默认 placeholderstring--
<template>
    <div>
        <!-- 1、v-model 选中项绑定值 -->
        <el-input-number v-model="input"/>
        <!-- 2、min 设置计数器允许的最小值，处理的不是太好 -->
        <!-- 3、max 设置计数器允许的最大值 -->
        <el-input-number v-model="input" min="10" max="20" />
        <!-- 4、step 计数器步长 -->
        <el-input-number v-model="input" step="2" />
        <!-- 5、size 计数器尺寸 -->
        <el-input-number v-model="input" size="large" />
        <el-input-number v-model="input" />
        <el-input-number v-model="input" size="small" />
        <!-- 6、disabled 禁用计数器 -->
        <el-input-number v-model="input" disabled />
        <!-- 7、name 原生 name 属性 -->
        <!-- 8、label 输入框关联的 label 文字 -->
        <!-- 9、placeholder 输入框默认 -->
        <el-input-number v-model="input" name="input" label="input" placeholder="请输入" />
    </div>
</template>
<script>
    import { reactive, toRefs } from "vue";
    export default({
        setup() {
            const data = reactive({
                input : ''
            })
            return {
                ...toRefs(data),
            }
        }
    })
</script>

# 2、数字输入框事件

事件名说明参数
change绑定值被改变时触发(currentValue: number、NaN，oldValue: number、NaN)
blur在 Input 失去焦点时触发(event: Event)
focus在 Input 获得焦点时触发(event: Event)
<template>
    <div>
        <el-input-number v-model="input" @change="event('绑定值被改变时触发')" />
        <el-input-number v-model="input" @blur="event('失去焦点时触发')" />
        <el-input-number v-model="input" @focus="event('获得焦点时触发')" />
    </div>
</template>
<script>
    import { reactive, toRefs } from "vue";
    export default({
        setup() {
            const data = reactive({
                input : ''
            })
            const event = (e) => {
                console.log(e);
            }
            return {
                ...toRefs(data),
                event
            }
        }
    })
</script>

# 三、Radio 单选框

# 1、单选框组件

  • <el-radio></el-radio>
参数说明类型可选值默认值
v-model选中项绑定值string、number、boolean——
label单选框对应的值string、number、boolean——
disabled是否禁用单选框boolean—false
border是否显示边框boolean—false
size尺寸stringlarge、default、small—
name原生 name 属性string——
<template>
    <div>
        <!-- 1、v-model 选中项绑定值 -->
        <!-- 2、label 单选框对应的值 -->
        <el-radio label="1" v-model="radio">欧阳克</el-radio>
        <el-radio label="2" v-model="radio">朱天蓬</el-radio>
        <el-radio label="3" v-model="radio">灭绝师太</el-radio>
        <!-- 3、disabled 禁用单选框 -->
        <el-radio label="1" v-model="radio" disabled>欧阳克</el-radio>
        <!-- 4、border 显示边框 -->
        <el-radio label="1" v-model="radio" border>欧阳克</el-radio>
        <!-- 5、size 尺寸 -->
        <el-radio label="1" v-model="radio" size="large">欧阳克</el-radio>
        <el-radio label="2" v-model="radio" size="default">朱天蓬</el-radio>
        <el-radio label="3" v-model="radio" size="small">灭绝师太</el-radio>
    </div>
</template>
<script>
    import { reactive, toRefs } from "vue";
    export default({
        setup() {
            const data = reactive({
                radio : ''
            })
            return {
                ...toRefs(data)
            }
        }
    })
</script>

# 2、单选框组件

  • <el-radio-button></el-radio-button>
参数说明类型可选值默认值
label单选框对应的值string、number、boolean——
disabled是否禁用单选框boolean—false
size尺寸stringlarge、default、small—
name原生 name 属性string——
<template>
    <div>
        <!-- 1、label 单选框对应的值 -->
        <el-radio-button label="1">欧阳克</el-radio-button>
        <el-radio-button label="2">朱天蓬</el-radio-button>
        <el-radio-button label="3">灭绝师太</el-radio-button>
        <!-- 2、disabled 禁用单选框 -->
        <el-radio-button label="1" disabled>欧阳克</el-radio-button>
        <!-- 3、size 尺寸 -->
        <el-radio-button label="1" size="large">欧阳克</el-radio-button>
        <el-radio-button label="2" size="default">朱天蓬</el-radio-button>
        <el-radio-button label="3" size="small">灭绝师太</el-radio-button>
    </div>
</template>
<script>
    import { reactive, toRefs } from "vue";
    export default({
        setup() {
            const data = reactive({
                radio : ''
            })
            return {
                ...toRefs(data)
            }
        }
    })
</script>

# 3、单选框组件

  • <el-radio-group><el-radio></el-radio></el-radio-group>
参数说明类型可选值默认值
v-model选中项绑定值string、number、boolean——
size单选框组尺寸stringlarge、default、smalldefault
disabled是否禁用boolean—false
text-color按钮形式的 Radio 激活时的文本颜色string—#ffffff
fill按钮形式的 Radio 激活时的填充色和边框色string—#409EFF
<template>
    <div>
        <!-- 1、v-model 选中项绑定值 -->
        <el-radio-group v-model="radio">
            <el-radio label="1">欧阳克</el-radio>
            <el-radio label="2">朱天蓬</el-radio>
            <el-radio label="3">灭绝师太</el-radio>
        </el-radio-group>
        <!-- 2、size 尺寸 -->
        <el-radio-group v-model="radio" size="large">
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:
<提交>