Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
vk-uni
vk-uview-ui
提交
41bd81fd
vk-uview-ui
项目概览
vk-uni
/
vk-uview-ui
10 个月 前同步成功
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
vk-uview-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
41bd81fd
编写于
5月 04, 2023
作者:
宋
宋虹苍
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 新增 checkbox 中间态
上级
a52794a5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
15 addition
and
1 deletion
+15
-1
uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue
uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue
+15
-1
未找到文件。
uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue
浏览文件 @
41bd81fd
<
template
>
<
template
>
<view
class=
"u-checkbox"
:style=
"[checkboxStyle]"
>
<view
class=
"u-checkbox"
:style=
"[checkboxStyle]"
>
<view
class=
"u-checkbox__icon-wrap"
@
tap=
"toggle"
:class=
"[iconClass]"
:style=
"[iconStyle]"
>
<view
class=
"u-checkbox__icon-wrap"
@
tap=
"toggle"
:class=
"[iconClass]"
:style=
"[iconStyle]"
>
<u-icon
class=
"u-checkbox__icon-wrap__icon"
name=
"checkbox-mark"
:size=
"checkboxIconSize"
:color=
"iconColor"
/>
<u-icon
v-if=
"indeterminate"
class=
"u-checkbox__icon-wrap__icon"
name=
"minus"
:size=
"checkboxIconSize"
:color=
"iconColor"
/>
<u-icon
v-else
class=
"u-checkbox__icon-wrap__icon"
name=
"checkbox-mark"
:size=
"checkboxIconSize"
:color=
"iconColor"
/>
</view>
</view>
<view
<view
class=
"u-checkbox__label"
class=
"u-checkbox__label"
...
@@ -82,6 +83,11 @@ export default {
...
@@ -82,6 +83,11 @@ export default {
size
:
{
size
:
{
type
:
[
String
,
Number
],
type
:
[
String
,
Number
],
default
:
""
default
:
""
},
// 设置不确定状态,仅负责样式控制
indeterminate
:
{
type
:
Boolean
,
default
:
false
}
}
},
},
data
()
{
data
()
{
...
@@ -143,6 +149,7 @@ export default {
...
@@ -143,6 +149,7 @@ export default {
},
},
// checkbox内部的勾选图标,如果选中状态,为白色,否则为透明色即可
// checkbox内部的勾选图标,如果选中状态,为白色,否则为透明色即可
iconColor
()
{
iconColor
()
{
if
(
this
.
indeterminate
)
return
'
#ffffff
'
;
return
this
.
valueCom
?
"
#ffffff
"
:
"
transparent
"
;
return
this
.
valueCom
?
"
#ffffff
"
:
"
transparent
"
;
},
},
iconClass
()
{
iconClass
()
{
...
@@ -151,6 +158,7 @@ export default {
...
@@ -151,6 +158,7 @@ export default {
if
(
this
.
valueCom
==
true
)
classes
.
push
(
"
u-checkbox__icon-wrap--checked
"
);
if
(
this
.
valueCom
==
true
)
classes
.
push
(
"
u-checkbox__icon-wrap--checked
"
);
if
(
this
.
isDisabled
)
classes
.
push
(
"
u-checkbox__icon-wrap--disabled
"
);
if
(
this
.
isDisabled
)
classes
.
push
(
"
u-checkbox__icon-wrap--disabled
"
);
if
(
this
.
valueCom
&&
this
.
isDisabled
)
classes
.
push
(
"
u-checkbox__icon-wrap--disabled--checked
"
);
if
(
this
.
valueCom
&&
this
.
isDisabled
)
classes
.
push
(
"
u-checkbox__icon-wrap--disabled--checked
"
);
if
(
this
.
indeterminate
===
true
)
classes
.
push
(
'
u-checkbox__icon-wrap--indeterminate
'
)
// 支付宝小程序无法动态绑定一个数组类名,否则解析出来的结果会带有",",而导致失效
// 支付宝小程序无法动态绑定一个数组类名,否则解析出来的结果会带有",",而导致失效
return
classes
.
join
(
"
"
);
return
classes
.
join
(
"
"
);
},
},
...
@@ -305,6 +313,12 @@ export default {
...
@@ -305,6 +313,12 @@ export default {
&
--disabled--checked
{
&
--disabled--checked
{
color
:
#c8c9cc
!
important
;
color
:
#c8c9cc
!
important
;
}
}
&
--indeterminate
{
color
:
#fff
;
background-color
:
$u-type-primary
;
border-color
:
$u-type-primary
;
}
}
}
&
__label
{
&
__label
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录