element-ui checkbox 组件源码分享

这篇具有很好参考价值的文章主要介绍了element-ui checkbox 组件源码分享。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简单分享 checkbox 组件,主要从以下三个方面来分享:

1、组件的页面结构

2、组件的属性

3、组件的方法

一、组件的页面结构

二、组件的属性

2.1 value / v-model 属性,绑定的值,类型 string / number / boolean,无默认值。

首先讨论单个 checkbox,通过 props 接收 父组件传递过来的 value,在组件内部通过计算属性 model 监听 value 的变化,并将最新值双向绑定到页面当中进行渲染,具体如下:

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.2 label 属性,选中状态的值,类型 string / number / boolean,无默认值。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.3 true-label、false-label 属性,选中的值,类型 string / number,无默认值。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

属性的使用及实现效果如下:

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.4 disabled 属性,是否禁用,类型 boolean,默认 false。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.5 border 属性,是否有边框,类型 boolean,默认 false。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.6 size 属性,尺寸大小,类型 medium / small / mini,无默认值。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.7 name 属性,原生 name 属性,类型 string,无默认值。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.8 checked 属性,是否勾选,类型 boolean,默认 false。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

2.9 indeterminate 属性,设置 indeterminate 状态,只负责样式控制,类型 boolean,默认 false。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

属性的使用及实现效果如下:

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript

通过上面效果知,此属性的主要作用是设置 checkbox 的全选、半选状态。

三、组件的方法

3.1 change 方法。

element-ui checkbox 组件源码分享,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-843048.html

到了这里,关于element-ui checkbox 组件源码分享的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui el-tree 设置指定级别节点显示复选框el-checkbox

            /deep/ .el-tree {         padding-top: 15px;         padding-left: 10px;         // 不可全选样式         .el-tree-node {           .is-leaf + .el-checkbox .el-checkbox__inner {             display: inline-block;           }           .el-checkbox .el-checkbox__inner {             display: none;    

    2023年04月08日
    浏览(63)
  • 【element-ui】使用el-checkbox完成el-table表格数据的全选操作

    需求:表格有一列为勾选框列,表格下面有单独的按钮本页勾选和全部勾选,跨页状态可以保存回显,如下图所示: 思路:使用一个数组[]存储每一页是否全选的状态,再使用{}来存储数据的所有选中状态,其中key为对应的页码,value为每一页的选中数据【核心❗】 1、el-tab

    2024年02月11日
    浏览(51)
  • element-ui组件

    一、图像组件 el-image:保留了原生的img的属性 二、导航菜单(NavMenu) 1、导航方向:通过mode属性设置 2、菜单项: 三、上传组件:Upload 示例: (1)使用elementUI的上传组件将图片上传到服务器并保存到数据库中 (2)在el-table控件中将上传的图片显示出来 实现过程: (1)给

    2024年02月02日
    浏览(42)
  • element-ui消息组件

    目录 一、elementUI的消息组件 1、MessageBox 弹框:是模态框 2、Message 消息提示:非模态框,常用于主动操作后的反馈提示。 3、Notification 通知 二、Form表单: 1、基本结构  2、表单控件 三、Dialog组件 1、使用方法 1、MessageBox 弹框:是模态框 ​ (1)消息提示:当用户进行操作时

    2024年02月02日
    浏览(93)
  • element-ui图像组件、上传组件、分页组件

    el-image:保留了原生的img的属性 1、导航方向:通过mode属性设置 2、菜单项 示例: (1)使用elementUI的上传组件将图片上传到服务器并保存到数据库中 (2)在el-table控件中将上传的图片显示出来 实现过程: (1)给数据库中的数据表增加一列(image_url):保存图片在服务器中

    2024年02月07日
    浏览(43)
  • Element-UI组件使用 --踩坑篇

    问题描述 : Element ui 中的 el-input ,当 input 仅有一项时,使用 @keyup.enter.native 事件绑定回车事 件,点击回车之后浏览器会刷新页面 问题原因 :由于当表单只有一个文本框时,按下回车将会触发表单的提交事件,导致页面的刷新 解决方法1 :在 el-form 加上 @submit.native.prevent ,

    2024年02月04日
    浏览(37)
  • 【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例

    element-ui 提供了大量的组件,如:布局组件、表单组件、JS组件等等。 Element-ui官网: https://element.eleme.cn/#/zh-CN 安装 Element-ui: npm i element-ui -S 1.1.1 引入组件 引入 Element 完整引入(在 main.js 中写入以下内容): 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到

    2024年02月07日
    浏览(58)
  • 修改element-ui源码

    element-ui修改源码 1.首先,从git上拉取element的源码 2.安装依赖 npm install 3.修改 packages 中的源码,然后进行打包 npm run dist 4.找到你的项目中的 node_modules 包下的 element-ui 文件夹下的 lib 包,用你修改好后打包生成的 lib 包进行替换即可生效 下载链接在官网底部

    2024年02月11日
    浏览(46)
  • element-ui upload图片上传组件使用

    图片上传前端收集 数据 再调用接口发送到后端 组件标签内的参数: 参数 说明 类型 可选值 默认值 action 必选参数,上传的地址 string — — headers 设置上传的请求头部 object — — multiple 是否支持多选文件 boolean — — data 上传时附带的额外参数 object — — name 上传的文件字段

    2023年04月19日
    浏览(43)
  • 解决idea无法识别element-ui组件

    现象: 在创建一个新的web项目时,引入了element-ui组件, package.json中相关配置如图 然而在vue的开发中,却无法识别element-ui的组件,具体表现为:无法自动补全,黄色warning提示,未知HTML标记。 不过,虽然这么标记了但是页面运行没有任何问题。功能也都正常。 解决方法:

    2024年02月02日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包