ElementUI浅尝辄止33：Form 表单

Form 表单：日常业务中很常见，由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，常见于表单请求、登录，数据校验等业务操作中

1.如何使用？

包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

/*在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker*/<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form>
<script>export default {data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},methods: {onSubmit() {console.log('submit!');}}}
</script>

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

2.行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

设置 inline 属性可以让表单域变为行内的表单域<el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
</el-form>
<script>export default {data() {return {formInline: {user: '',region: ''}}},methods: {onSubmit() {console.log('submit!');}}}
</script>

3.对齐方式

根据具体目标和制约因素，选择最佳的标签对齐方式。

//通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部<el-radio-group v-model="labelPosition" size="small"><el-radio-button label="left">左对齐</el-radio-button><el-radio-button label="right">右对齐</el-radio-button><el-radio-button label="top">顶部对齐</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"><el-form-item label="名称"><el-input v-model="formLabelAlign.name"></el-input></el-form-item><el-form-item label="活动区域"><el-input v-model="formLabelAlign.region"></el-input></el-form-item><el-form-item label="活动形式"><el-input v-model="formLabelAlign.type"></el-input></el-form-item>
</el-form>
<script>export default {data() {return {labelPosition: 'right',formLabelAlign: {name: '',region: '',type: ''}};}}
</script>

4.表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误

//Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

5.自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {callback();}}}, 1000);};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

6. 动态增减表单项

//除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"><el-form-itemprop="email"label="邮箱":rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]"><el-input v-model="dynamicValidateForm.email"></el-input></el-form-item><el-form-itemv-for="(domain, index) in dynamicValidateForm.domains":label="'域名' + index":key="domain.key":prop="'domains.' + index + '.value'":rules="{required: true, message: '域名不能为空', trigger: 'blur'}"><el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button></el-form-item><el-form-item><el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button><el-button @click="addDomain">新增域名</el-button><el-button @click="resetForm('dynamicValidateForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {dynamicValidateForm: {domains: [{value: ''}],email: ''}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},removeDomain(item) {var index = this.dynamicValidateForm.domains.indexOf(item)if (index !== -1) {this.dynamicValidateForm.domains.splice(index, 1)}},addDomain() {this.dynamicValidateForm.domains.push({value: '',key: Date.now()});}}}
</script>

7.数字类型验证

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"><el-form-itemlabel="年龄"prop="age":rules="[{ required: true, message: '年龄不能为空'},{ type: 'number', message: '年龄必须为数字值'}]"><el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button><el-button @click="resetForm('numberValidateForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {numberValidateForm: {age: ''}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零，不会继承 el-form 的 label-width。如果需要可以为其单独设置 label-width 属性。

8.表单内组件尺寸控制

通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。

//如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的size属性，直接为这个表单项或表单组件设置自己的size即可。<el-form ref="form" :model="sizeForm" label-width="80px" size="mini"><el-form-item label="活动名称"><el-input v-model="sizeForm.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="sizeForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="sizeForm.type"><el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button><el-checkbox-button label="地推活动" name="type"></el-checkbox-button><el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="sizeForm.resource" size="medium"><el-radio border label="线上品牌商赞助"></el-radio><el-radio border label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item size="large"><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form><script>export default {data() {return {sizeForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}};},methods: {onSubmit() {console.log('submit!');}}};
</script>

 Form表单组件的大致内容就是这些，若想深入浅出可以前往表单组件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/70234.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

分布式实时仿真系统-反射内存的应用

分布式实时仿真系统-反射内存的应用

为了使分布式实时仿真系统(一个典型代表就行飞行模拟器)达到逼真的仿真效果&#xff0c;在系统内部&#xff0c;往往不仅需要对各种数据模型进行实时解算&#xff0c;而且需要一个延迟时间极低的确定性网络在系统之间传递数据&#xff0c;这样才能让各个子系统之间协调一致地工…
阅读更多...
问道管理：分时高抛低吸策略？

问道管理：分时高抛低吸策略？

分时高抛低吸是股市中的一种买卖战略&#xff0c;也是投资者经常运用的一种方法。这种战略经过剖析图表、股价和时刻&#xff0c;尽可能减少危险&#xff0c;添加收益。下面从多个视点对十二种分时高抛低吸进行剖析。 视点一&#xff1a;什么是分时高抛低吸&#xff1f; 分时高…
阅读更多...
报错：为什么数组明明有内容但打印的length是0

报错：为什么数组明明有内容但打印的length是0

文章目录 一、问题二、分析三、解决1.将异步改为同步2.设置延迟 一、问题 在日常开发中&#xff0c;for 循环遍历调用接口&#xff0c;并将接口返回的值进行拼接&#xff0c;即push到一个新的数组中&#xff0c;但是在for循环内部是可以拿到这个新的数组&#xff0c;而for循环…
阅读更多...
Selenium 3和JUnit 5中的显示等待与隐式等待

Selenium 3和JUnit 5中的显示等待与隐式等待

目录 显示等待&#xff08;Explicit Wait&#xff09; 什么是显示等待&#xff1f; 如何实现显示等待&#xff1f; 显示等待条件 隐式等待&#xff08;Implicit Wait&#xff09; 什么是隐式等待&#xff1f; 如何实现隐式等待&#xff1f; 显示等待和隐式等待的区别 …
阅读更多...
mapbox 导航记录(release-v2.15分支 纯kotlin)

mapbox 导航记录(release-v2.15分支 纯kotlin)

一、简单使用示例 1. 初始化 MapboxNavigation 初始化时使用 NavigationOptions 设置一些参数&#xff0c;包括accessToken、appMetaData、LocationEngine等&#xff0c;其它还有很多&#xff0c;具体可以详看 NavigationOptions 类的内部。 下面示例中 LocationEngine 使用…
阅读更多...
C++ 多线程编程教程：使用 std::thread 和 std::future 进行并发任务管理 ，处理线程超时

C++ 多线程编程教程：使用 std::thread 和 std::future 进行并发任务管理 ，处理线程超时

C 多线程编程教程&#xff1a;使用 std::thread 和 std::future 进行并发任务管理 引言 多线程编程是一种强大的工具&#xff0c;可以加速计算密集型任务的执行&#xff0c;提高应用程序的性能。C提供了多种多线程编程工具&#xff0c;包括std::thread和std::future&#xff…
阅读更多...
【infiniband】用udaddy测试RDMA_CM API通过GID连接

【infiniband】用udaddy测试RDMA_CM API通过GID连接

1. 运行ibv_devinfo -vv 找到GID[ 0]。 2.udaddy用1.找到的GID[ 0]测试连接 服务器: rootdebian:~/infiniband/rdma-core-50mlnx1# build/bin/udaddy -f gid -b fe80:0000:0000:0000:e41d:2e03:0051:26d1 udaddy: starting server test.rai->ai_src_addr->sa_famil…
阅读更多...
IDEA版SSM入门到实战（Maven+MyBatis+Spring+SpringMVC) -Maven使用前准备

IDEA版SSM入门到实战（Maven+MyBatis+Spring+SpringMVC) -Maven使用前准备

一&#xff0e;Maven准备 注意&#xff1a;IDEA2019.1.x 最高支持Maven的3.6.0 下载地址&#xff1a;http://maven.apache.org/Maven底层使用Java语言编写的&#xff0c;所以需要配置JAVA_HOME环境变量及Path将Maven解压非中文无空格目录下配置MAVEN_HOME环境变量及Path输入【c…
阅读更多...
基于AERMOD模型在大气环境影响评价中的实践

基于AERMOD模型在大气环境影响评价中的实践

AERMOD模型是在美国EPA&#xff08;AMS/EPA&#xff09;在ISC3&#xff08;Industrial Source Complex Model&#xff09;基础上建立开发的高斯稳态扩散模型&#xff0c;是我国《环境影响评价技术导则 大气环境&#xff08;HJ 2.2-2018&#xff09;》技术导则推荐的大气污染物浓…
阅读更多...
人工智能的优势：使用 GPT 和扩散模型生成图像

人工智能的优势：使用 GPT 和扩散模型生成图像

推荐&#xff1a;使用 NSDT场景编辑器快速搭建3D应用场景 世界被人工智能 &#xff08;AI&#xff09; 所吸引&#xff0c;尤其是自然语言处理 &#xff08;NLP&#xff09; 和生成 AI 的最新进展&#xff0c;这是有充分理由的。这些突破性技术有可能提高各种任务的日常生产力。…
阅读更多...
Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测

Vue前端框架08 Vue框架简介、VueAPI风格、模板语法、事件处理、数组变化侦测

目录 一、Vue框架1.1渐进式框架1.2 Vue的版本 二、VueAPI的风格三、Vue开发准备工作四、模板语法文本插值属性绑定条件渲染列表渲染key管理状态 四、事件处理定义事件事件参数事件修饰符 五、数组变化侦测 一、Vue框架 渐进式JavaScript框架&#xff0c;易学易用&#xff0c;性…
阅读更多...
Unity的GPUSkinning进一步介绍

Unity的GPUSkinning进一步介绍

大家好&#xff0c;我是阿赵。   在几年前&#xff0c;我曾经写过一篇介绍GPUSkinning的文章&#xff0c;这么多年之后&#xff0c;还是看到不停有朋友在翻看这篇旧文章。今天上去GitHub看了一下&#xff0c;GPUSkinning这个开源的插件已经很久没有更新过了&#xff0c;还是停…
阅读更多...
SSH详解

SSH详解

文章目录 SSH简介SSH安装SSH秘钥秘钥生成公钥上传(免密登录) 基本用法命令行配置配置文件SSH代码动态转发本地转发远程转发搭建简易版的VPN SCP命令本地复制到远程远程复制到本地远程复制到远程 Rsync命令安装基本用法本地同步到远程远程同步到本地 SFTP命令 SSH简介 Secure Sh…
阅读更多...
分享一个有意思的线程相关的程序运行题

分享一个有意思的线程相关的程序运行题

翻开之前的代码&#xff0c;发现了一个有意思的代码&#xff0c;猜以下代码的运行结果&#xff1a; package thread;/*** author heyunlin* version 1.0*/ public class ThreadMethodExample {public static void main(String[] args) {Thread thread new Thread(new Runnabl…
阅读更多...
云原生Kubernetes:kubectl管理命令

云原生Kubernetes:kubectl管理命令

目录 一、理论 1.kubectl 管理命令 2.项目的生命周期 二、实验 1.kubectl 管理命令 2.项目的生命周期 三、总结 一、理论 1.kubectl 管理命令 &#xff08;1&#xff09;陈述式资源管理方法 kubernetes集群管理集群资源的唯一入口是通过相应的方法调用apiserver的接口…
阅读更多...
复旦-华盛顿EMBA：AI时代掘金，科技进化里的挑战与机遇

复旦-华盛顿EMBA：AI时代掘金，科技进化里的挑战与机遇

如果从去年年底ChatGPT3.5发布算起&#xff0c;AI赛道的热度已经持续飙升了半年有余。 　　 　　“AI的iPhone时刻”代表什么&#xff1f;AI驱动的商业时代已经到来&#xff1f; 　　 　　我们能看到担忧、恐惧、憧憬&#xff0c;但唯独不缺狂飙突进、加速进化。人类制造AI&…
阅读更多...
WordPress（4）关于网站的背景图片更换

WordPress（4）关于网站的背景图片更换

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、更改的位置1. 红色区域是要更换的随机的图片二、替换图片位置三.开启随机数量四.结束前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也…
阅读更多...
Android 10.0 Launcher3桌面显示多个相同app图标的解决办法

Android 10.0 Launcher3桌面显示多个相同app图标的解决办法

1.前言 在10.0的系统ROM定制化开发中，在Launcher3的系统原生桌面中，在显示桌面的时候，在禁用和启用app的功能测试的时候，会发现有多个相同app的图标显示在桌面 这对Launcher3的体验效果不是很好，所以为了优化产品，需要解决这个bug，然后让产品更完善 2.桌面显示多个相同…
阅读更多...
Hadoop的分布式文件存储系统HDFS组件的使用

Hadoop的分布式文件存储系统HDFS组件的使用

Hadoop的第一个核心组件&#xff1a;HDFS&#xff08;分布式文件存储系统&#xff09; 一、HDFS的组成1、NameNode2、DataNode3、SecondaryNameNode4、客户端&#xff1a;命令行/Java API 二、HDFS的基本使用1、命令行操作2、Java API操作 三、HDFS的工作流程问题&#xff08;H…
阅读更多...
Direct3D颜色

Direct3D颜色

在Direct3D中颜色用RGB三元组来表示&#xff0c;RGB数据可用俩种不同的结构来保存&#xff0c;第一种是D3DCOLOR&#xff0c;它实际上与DWORD类型完全相同&#xff0c;共有32位&#xff0c;D3DCOLOR类型种的各位被分成四个8位项&#xff0c;每项存储了一种颜色分量的亮度值。 由…
阅读更多...
最新文章

Copyright @ 2022~2023