vue自己封装组件 vue项目中,vue封装组件思路
这篇文章主要介绍了某视频剪辑软件全选组件封装，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
效果
封装的组件
模板
el-form-item :label=label
El-checkbox:indeterminate=是不确定的工具 v-model= check all
@change=handleCheckAllChange 全选
/El-复选框
El-checkbox-group v-model= check list @ change= handleCheckedCitiesChange
El-checkbox:label= key v-for=(item，key) in this.channelList
:key=key{{ item }}
/El-复选框
/el-checkbox-group
/El-表单-项目
/模板
脚本
从" @/实用工具/应用程序频道"导入{频道列表}；
导出默认值{
名称："索引",
data() {
返回{
//渠道列表全部渠道
通灵者：通灵者，
//复选框的不确定状态，一般用于实现全选的效果
isinnectiontepool:true，
//全选默认不勾选
错误，
数据：这个清单，
}
},
计算值：{
清单：{
get: function () {
返回(这个。项【这个。表单数据库名] ).拆分("")。过滤器(str=(！str))；
},
set: function (newValue) {
这个。项【这个。form dbname]=新值。join( )；
}
道具：{
//表单名称
标签:{
类型：字符串，
必填：真
},
//当前选中项
项目：{
类型：对象，
formDBName: {
方法：{
getArrayCheckList() {
返回(这个。项【这个。表单数据库名] ).拆分("")。过滤器(str=(！str))；
//将数据返回给父组件
setChooseData(data) {
这个. emit(choose-data ，this.formDBName，data)
//值代表选中还是未选中真假两个取值
handleCheckAllChange(值){
const选择通道=对象。钥匙(这个。频道列表)
this.checkList=value？选择频道：[];
this.isIndeterminateBool=false
this.checkAll=value
const formData=this。检查表。join( )；
this.setChooseData(formData)
//选中后计算全选
handleCheckedCitiesChange(值){
const选择通道=对象。钥匙(这个。频道列表)；
let checkedCount=value.length
这个。全部检查=检查次数===选择频道。长度；
这个。is inertitepool=检查计数0检查计数选择通道。长度；
const formData=value。join( )；
已安装(){
//.拆分("")。过滤器(str=(！str typeof (str)==string ))
}
}
/脚本
样式范围
/风格
渠道列表
//
导出常量渠道列表={
"安国":安果，
百度":"百度，
华为: 华为，
三星: 三星，
“OPPO”:“OPPO”，
三六零: 360 ,
魅族: 魅族，
vivo: VIVO ，
"碗豆架":豌豆荚，
小米: 小米，
yyb :应用宝，
yyh :应用汇，
};
父组件使用
埃尔卡阴影=盘旋
多项选择：item=item label=渠道/广告开关
form-d-b-name= channel @ choose-data= onCheckResult /多项选择
/电子名片
项目[频道]是存入字符串的以分割的数据
比如
百度安国yyb
这样
onCheckResult
onCheckResult(数据库名，资源){
这个。项目[数据库名]=RES；
}
到此这篇关于某视频剪辑软件全选组件封装的文章就介绍到这了，更多相关某视频剪辑软件全选组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。