Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
444ec976
U
uni-app
项目概览
Velpro187
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
444ec976
编写于
4月 29, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: swtich
上级
48235ef3
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
175 addition
and
118 deletion
+175
-118
packages/uni-components/src/components/index.ts
packages/uni-components/src/components/index.ts
+1
-1
packages/uni-components/src/components/switch/index.tsx
packages/uni-components/src/components/switch/index.tsx
+155
-0
packages/uni-components/src/components/switch/index.vue
packages/uni-components/src/components/switch/index.vue
+0
-107
packages/uni-components/style/switch.css
packages/uni-components/style/switch.css
+19
-10
未找到文件。
packages/uni-components/src/components/index.ts
浏览文件 @
444ec976
...
...
@@ -23,7 +23,7 @@ import ScrollView from './scroll-view/index.vue'
import
Slider
from
'
./slider/index
'
// import Swiper from './swiper/index.vue'
import
SwiperItem
from
'
./swiper-item/index.vue
'
import
Switch
from
'
./switch/index
.vue
'
import
Switch
from
'
./switch/index
'
import
Text
from
'
./text/index
'
import
Textarea
from
'
./textarea/index
'
import
View
from
'
./view/index
'
...
...
packages/uni-components/src/components/switch/index.tsx
0 → 100644
浏览文件 @
444ec976
import
{
defineComponent
,
ref
,
onBeforeUnmount
,
watch
,
inject
,
onUnmounted
,
ExtractPropTypes
,
Ref
,
}
from
'
vue
'
import
{
useCustomEvent
,
EmitEvent
}
from
'
@dcloudio/uni-components
'
import
{
UniFormCtx
,
uniFormKey
}
from
'
../form
'
import
{
UniLabelCtx
,
uniLabelKey
}
from
'
../label
'
import
{
useListeners
}
from
'
../../helpers/useListeners
'
import
{
useBooleanAttr
}
from
'
../../helpers/useBooleanAttr
'
import
{
createSvgIconVNode
,
ICON_PATH_SUCCESS_NO_CIRCLE
,
}
from
'
@dcloudio/uni-core
'
const
props
=
{
name
:
{
type
:
String
,
default
:
''
,
},
checked
:
{
type
:
[
Boolean
,
String
],
default
:
false
,
},
type
:
{
type
:
String
,
default
:
'
switch
'
,
},
id
:
{
type
:
String
,
default
:
''
,
},
disabled
:
{
type
:
[
Boolean
,
String
],
default
:
false
,
},
color
:
{
type
:
String
,
default
:
'
#007aff
'
,
},
}
type
SwitchProps
=
ExtractPropTypes
<
typeof
props
>
export
default
/*#__PURE__*/
defineComponent
({
name
:
'
Switch
'
,
props
,
emits
:
[
'
change
'
],
setup
(
props
,
{
emit
})
{
const
rootRef
=
ref
<
HTMLElement
|
null
>
(
null
)
const
switchChecked
=
ref
(
props
.
checked
)
const
uniLabel
=
useSwitchInject
(
props
,
switchChecked
)
const
trigger
=
useCustomEvent
<
EmitEvent
<
typeof
emit
>>
(
rootRef
,
emit
)
watch
(
()
=>
props
.
checked
,
(
val
)
=>
{
switchChecked
.
value
=
val
}
)
const
_onClick
=
(
$event
:
Event
)
=>
{
if
(
props
.
disabled
)
{
return
}
switchChecked
.
value
=
!
switchChecked
.
value
trigger
(
'
change
'
,
$event
,
{
value
:
switchChecked
.
value
,
})
}
if
(
!!
uniLabel
)
{
uniLabel
.
addHandler
(
_onClick
)
onBeforeUnmount
(()
=>
{
uniLabel
.
removeHandler
(
_onClick
)
})
}
useListeners
(
props
,
{
'
label-click
'
:
_onClick
})
return
()
=>
{
const
{
color
,
type
}
=
props
const
{
booleanAttrs
}
=
useBooleanAttr
(
props
,
'
disabled
'
)
return
(
<
uni
-
switch
ref
=
{
rootRef
}
{
...
booleanAttrs
}
onClick
=
{
_onClick
}
>
<
div
class
=
"uni-switch-wrapper"
>
<
div
v
-
show
=
{
type
===
'
switch
'
}
class
=
"uni-switch-input"
class
=
{
[
switchChecked
.
value
?
'
uni-switch-input-checked
'
:
''
]
}
style
=
{
{
backgroundColor
:
switchChecked
.
value
?
color
:
'
#DFDFDF
'
,
borderColor
:
switchChecked
.
value
?
color
:
'
#DFDFDF
'
,
}
}
/>
<
div
v
-
show
=
{
type
===
'
checkbox
'
}
class
=
"uni-checkbox-input"
>
{
switchChecked
.
value
?
createSvgIconVNode
(
ICON_PATH_SUCCESS_NO_CIRCLE
,
props
.
color
,
22
)
:
''
}
</
div
>
</
div
>
</
uni
-
switch
>
)
}
},
})
function
useSwitchInject
(
props
:
SwitchProps
,
switchChecked
:
Ref
<
string
|
boolean
>
)
{
const
uniForm
=
inject
<
UniFormCtx
>
(
uniFormKey
,
(
false
as
unknown
)
as
UniFormCtx
)
const
uniLabel
=
inject
<
UniLabelCtx
>
(
uniLabelKey
,
(
false
as
unknown
)
as
UniLabelCtx
)
const
formField
=
{
submit
:
()
=>
{
const
data
:
[
string
,
any
]
=
[
''
,
null
]
if
(
props
.
name
)
{
data
[
0
]
=
props
.
name
data
[
1
]
=
switchChecked
.
value
}
return
data
},
reset
:
()
=>
{
switchChecked
.
value
=
false
},
}
if
(
!!
uniForm
)
{
uniForm
.
addField
(
formField
)
onUnmounted
(()
=>
{
uniForm
.
removeField
(
formField
)
})
}
return
uniLabel
}
packages/uni-components/src/components/switch/index.vue
已删除
100644 → 0
浏览文件 @
48235ef3
<
template
>
<uni-switch
:disabled=
"disabled"
v-bind=
"$attrs"
@
click=
"_onClick"
>
<div
class=
"uni-switch-wrapper"
>
<div
v-show=
"type === 'switch'"
:class=
"[switchChecked ? 'uni-switch-input-checked' : '']"
:style=
"
{backgroundColor: switchChecked ? color : '#DFDFDF',borderColor:switchChecked ? color : '#DFDFDF'}"
class="uni-switch-input"
/>
<div
v-show=
"type === 'checkbox'"
:class=
"[switchChecked ? 'uni-checkbox-input-checked' : '']"
:style=
"
{color: color}"
class="uni-checkbox-input"
/>
</div>
</uni-switch>
</
template
>
<
script
>
import
{
emitter
,
listeners
}
from
'
../../mixins
'
export
default
{
name
:
'
Switch
'
,
mixins
:
[
emitter
,
listeners
],
props
:
{
name
:
{
type
:
String
,
default
:
''
},
checked
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
type
:
{
type
:
String
,
default
:
'
switch
'
},
id
:
{
type
:
String
,
default
:
''
},
disabled
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
color
:
{
type
:
String
,
default
:
'
#007aff
'
}
},
data
()
{
return
{
switchChecked
:
this
.
checked
}
},
watch
:
{
checked
(
val
)
{
this
.
switchChecked
=
val
}
},
created
()
{
this
.
$dispatch
(
'
Form
'
,
'
uni-form-group-update
'
,
{
type
:
'
add
'
,
vm
:
this
})
},
beforeDestroy
()
{
this
.
$dispatch
(
'
Form
'
,
'
uni-form-group-update
'
,
{
type
:
'
remove
'
,
vm
:
this
})
},
listeners
:
{
'
label-click
'
:
'
_onClick
'
,
'
@label-click
'
:
'
_onClick
'
},
methods
:
{
_onClick
(
$event
)
{
if
(
this
.
disabled
)
{
return
}
this
.
switchChecked
=
!
this
.
switchChecked
this
.
$trigger
(
'
change
'
,
$event
,
{
value
:
this
.
switchChecked
})
},
_resetFormData
()
{
this
.
switchChecked
=
false
},
_getFormData
()
{
const
data
=
{}
if
(
this
.
name
!==
''
)
{
data
.
value
=
this
.
switchChecked
data
.
key
=
this
.
name
}
return
data
}
}
}
</
script
>
\ No newline at end of file
packages/uni-components/style/switch.css
浏览文件 @
444ec976
...
...
@@ -12,13 +12,16 @@ uni-switch[disabled] {
cursor
:
not-allowed
;
}
.uni-switch-wrapper
{
uni-switch
.uni-switch-wrapper
{
display
:
-webkit-inline-flex
;
display
:
inline-flex
;
-webkit-align-items
:
center
;
align-items
:
center
;
vertical-align
:
middle
;
}
.uni-switch-input
{
uni-switch
.uni-switch-input
{
-webkit-appearance
:
none
;
appearance
:
none
;
position
:
relative
;
width
:
52px
;
...
...
@@ -36,7 +39,7 @@ uni-switch[disabled] .uni-switch-input {
opacity
:
0.7
;
}
.uni-switch-input
:before
{
uni-switch
.uni-switch-input
:before
{
content
:
' '
;
position
:
absolute
;
top
:
0
;
...
...
@@ -45,10 +48,12 @@ uni-switch[disabled] .uni-switch-input {
height
:
30px
;
border-radius
:
15px
;
background-color
:
#fdfdfd
;
transition
:
-webkit-transform
0.3s
;
transition
:
transform
0.3s
;
transition
:
transform
0.3s
,
-webkit-transform
0.3s
;
}
.uni-switch-input
:after
{
uni-switch
.uni-switch-input
:after
{
content
:
' '
;
position
:
absolute
;
top
:
0
;
...
...
@@ -58,24 +63,29 @@ uni-switch[disabled] .uni-switch-input {
border-radius
:
15px
;
background-color
:
#ffffff
;
box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
0.4
);
transition
:
-webkit-transform
0.3s
;
transition
:
transform
0.3s
;
transition
:
transform
0.3s
,
-webkit-transform
0.3s
;
}
.uni-switch-input.uni-switch-input-checked
{
uni-switch
.uni-switch-input.uni-switch-input-checked
{
border-color
:
#007aff
;
background-color
:
#007aff
;
}
.uni-switch-input.uni-switch-input-checked
:before
{
uni-switch
.uni-switch-input.uni-switch-input-checked
:before
{
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
);
}
.uni-switch-input.uni-switch-input-checked
:after
{
uni-switch
.uni-switch-input.uni-switch-input-checked
:after
{
-webkit-transform
:
translateX
(
20px
);
transform
:
translateX
(
20px
);
}
uni-switch
.uni-checkbox-input
{
margin-right
:
5px
;
-webkit-appearance
:
none
;
appearance
:
none
;
outline
:
0
;
border
:
1px
solid
#d1d1d1
;
...
...
@@ -91,15 +101,14 @@ uni-switch:not([disabled]) .uni-checkbox-input:hover {
border-color
:
#007aff
;
}
uni-switch
.uni-checkbox-input.uni-checkbox-input-checked
:before
{
font
:
normal
normal
normal
14px
/
1
'uni'
;
content
:
'\EA08'
;
.uni-checkbox-input
svg
{
color
:
inherit
;
font-size
:
22px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-48%
)
scale
(
0.73
);
-webkit-transform
:
translate
(
-50%
,
-48%
)
scale
(
0.73
);
}
uni-switch
.uni-checkbox-input.uni-checkbox-input-disabled
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录