Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
3ffcbe59
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3ffcbe59
编写于
3月 24, 2021
作者:
S
suzigang
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'next' of
https://github.com/jdf2e/nutui
into next
上级
e4565b3a
39cdfebb
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
130 addition
and
85 deletion
+130
-85
src/packages/shortpassword/demo.vue
src/packages/shortpassword/demo.vue
+0
-1
src/packages/switch/demo.vue
src/packages/switch/demo.vue
+41
-44
src/packages/switch/doc.md
src/packages/switch/doc.md
+61
-20
src/packages/switch/index.scss
src/packages/switch/index.scss
+3
-2
src/packages/switch/index.vue
src/packages/switch/index.vue
+25
-18
未找到文件。
src/packages/shortpassword/demo.vue
浏览文件 @
3ffcbe59
...
...
@@ -74,7 +74,6 @@ const { createDemo } = createComponent('shortpassword');
export
default
createDemo
({
setup
()
{
let
{
ctx
}
=
getCurrentInstance
()
as
any
;
console
.
log
(
ctx
);
const
state
=
reactive
({
visible
:
false
,
...
...
src/packages/switch/demo.vue
浏览文件 @
3ffcbe59
<
template
>
<div
class=
"demo"
>
<h2>
基础用法
</h2>
<nut-cell
class=
"switch-adjust"
>
{{
text
}}
<nut-switch
@
switch-change=
"switchChange"
class=
"switch-decoration"
></nut-switch>
<nut-cell>
<nut-switch
v-model=
"checked"
/>
</nut-cell>
<h2>
禁用状态
</h2>
<nut-cell
class=
"switch-adjust"
>
{{
text
}}
<nut-switch
class=
"switch-decoration"
disable
></nut-switch>
<nut-cell>
<nut-switch
v-model=
"checked"
disable
/>
</nut-cell>
<h2>
change事件
</h2>
<nut-cell
class=
"switch-adjust"
>
chane
<nut-switch
@
switch-change=
"change"
class=
"switch-decoration"
></nut-switch>
<nut-cell>
<nut-switch
v-model=
"checked"
@
change=
"change"
/>
</nut-cell>
<h2>
异步控制
</h2>
<nut-cell>
<nut-switch
:model-value=
"checkedAsync"
@
change=
"changeAsync"
/>
</nut-cell>
<h2>
自定义颜色
</h2>
<nut-cell
class=
"switch-adjust"
>
color
<nut-switch
active-color=
"blue"
class=
"switch-decoration"
></nut-switch>
<nut-cell>
<nut-switch
v-model=
"checked"
@
change=
"switchChange"
active-color=
"blue"
/>
</nut-cell>
<h2>
支持文字
</h2>
<nut-cell
class=
"switch-adjust"
>
text
<nut-switch
class=
"switch-decoration"
label=
"开 关"
></nut-switch>
<nut-cell>
<nut-switch
v-model=
"checked"
@
change=
"switchChange"
active-text=
"开"
inactive-text=
"关"
/>
</nut-cell>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
toRefs
,
reactiv
e
}
from
'
vue
'
;
import
{
ref
,
getCurrentInstanc
e
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
createDemo
}
=
createComponent
(
'
switch
'
);
export
default
createDemo
({
props
:
{},
setup
()
{
const
response
=
reactive
({
text
:
'
开
'
});
const
switchChange
=
(
event
:
Event
,
isOpen
:
boolean
)
=>
{
response
.
text
=
isOpen
?
'
开
'
:
'
关
'
;
let
{
ctx
}
=
getCurrentInstance
()
as
any
;
const
checked
=
ref
(
true
);
const
checkedAsync
=
ref
(
true
);
const
change
=
(
value
:
boolean
,
event
:
Event
)
=>
{
ctx
.
$toast
.
text
(
`触发了change事件,开关状态:
${
value
}
`
);
};
const
change
=
(
event
:
Event
,
isOpen
:
boolean
)
=>
{
alert
(
`触发了change事件,开关状态:
${
isOpen
}
`
);
const
changeAsync
=
(
value
:
boolean
,
event
:
Event
)
=>
{
ctx
.
$toast
.
text
(
`2秒后异步触发
${
value
}
`
);
setTimeout
(()
=>
{
checkedAsync
.
value
=
value
;
},
2000
);
};
return
{
...
toRefs
(
response
),
switchChange
,
change
checked
,
checkedAsync
,
change
,
changeAsync
};
}
});
</
script
>
<
style
lang=
"scss"
scoped
>
.switch-adjust
{
color
:
rgba
(
102
,
102
,
102
,
1
);
justify-content
:
space-between
;
align-items
:
center
;
}
.switch-decoration
{
cursor
:
pointer
;
}
</
style
>
<
style
lang=
"scss"
scoped
></
style
>
src/packages/switch/doc.md
浏览文件 @
3ffcbe59
#
s
witch组件
#
S
witch组件
### 介绍
...
...
@@ -9,7 +9,6 @@
```
javascript
import
{
createApp
}
from
'
vue
'
;
import
{
Switch
}
from
'
@nutui/nutui
'
;
const
app
=
createApp
();
app
.
use
(
Switch
);
...
...
@@ -20,39 +19,80 @@ app.use(Switch);
### 基础用法
```
html
<nut-switch></nut-switch>
<nut-switch
v-model=
"checked"
/>
```
```
javascript
import
{
ref
}
from
'
vue
'
;
export
default
{
setup
()
{
const
checked
=
ref
(
true
);
return
{
checked
};
},
};
```
### 禁用状态
```
html
<nut-switch
disable
></nut-switch
>
<nut-switch
v-model=
"checked"
disable
/
>
```
### change事件
```
html
<nut-switch
@
switch-change=
"change"
></nut-switch
>
<nut-switch
v-model=
"checked"
@
change=
"change"
/
>
```
```
javascript
import
{
ref
,
getCurrentInstance
}
from
'
vue
'
;
export
default
{
setup
()
{
const
change
=
(
event
:
Event
,
isOpen
:
boolean
)
=>
{
console
.
log
(
'
触发了change事件,开关状态:
'
,
isOpen
);
let
{
ctx
}
=
getCurrentInstance
()
as
any
;
const
checked
=
ref
(
true
);
const
change
=
(
value
:
boolean
,
event
:
Event
)
=>
{
ctx
.
$toast
.
text
(
`触发了change事件,开关状态:
${
value
}
`
);
};
return
{
checked
,
change
};
}
};
```
### 异步控制
```
html
<nut-switch
:model-value=
"checkedAsync"
@
change=
"changeAsync"
/>
```
```
javascript
import
{
ref
,
getCurrentInstance
}
from
'
vue
'
;
export
default
{
setup
()
{
let
{
ctx
}
=
getCurrentInstance
()
as
any
;
const
checkedAsync
=
ref
(
true
);
const
changeAsync
=
(
value
:
boolean
,
event
:
Event
)
=>
{
ctx
.
$toast
.
text
(
`2秒后异步触发
${
value
}
`
);
setTimeout
(()
=>
{
checkedAsync
.
value
=
value
;
},
2000
);
};
return
{
checkedAsync
,
changeAsync
};
}
};
```
### 自定义颜色
```
html
<nut-switch
active-color=
"blue"
></nut-switch>
<nut-switch
v-model=
"checked"
@
change=
"switchChange"
active-color=
"blue"
/>
```
### 支持文字
```
html
<nut-switch
v-model=
"checked"
@
change=
"switchChange"
active-text=
"开"
inactive-text=
"关"
/>
```
## API
...
...
@@ -60,17 +100,18 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|--------------
|----------------------------------|--------|
------------------|
|
status | 开关状态 | Boolean |
`true`
|
|--------------
--|------------------|---------|-----
------------------|
|
v-model | 开关状态 | Boolean |
`false`
|
| disable | 禁用状态 | Boolean |
`false`
|
| active-color | 开关打开时的背景颜色 | String |
`rgb(250,63,25,1)`
|
| inactive-color | 开关关闭时的背景颜色 | String |
`rgba(235,235,235,1)`
|
| label | 支持内嵌文字,两种状态使用空格隔开 | String | - |
| active-color | 打开时的背景颜色 | String |
`#fa2c19`
|
| inactive-color | 关闭时的背景颜色 | String |
`#ebebeb`
|
| active-text | 打开时文字描述 | String | - |
| inactive-text | 关闭时文字描述 | String | - |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
|
switch-change | 切换开关时触发 | (event: Event, isOpen: boolean
) |
|--------|----------------|--------------
-----------------
|
|
change | 切换开关时触发 | (value: boolean,event: Event
) |
\ No newline at end of file
src/packages/switch/index.scss
浏览文件 @
3ffcbe59
.nut-switch
{
cursor
:
pointer
;
display
:
flex
;
align-items
:
center
;
background-color
:
$primary-color
;
...
...
@@ -25,10 +26,10 @@
color
:
$white
;
font-size
:
$font-size-1
;
&
.open
{
transform
:
translateX
(
-1
4
px
);
transform
:
translateX
(
-1
6
px
);
}
&
.close
{
transform
:
translateX
(
1
4
px
);
transform
:
translateX
(
1
6
px
);
}
}
}
...
...
src/packages/switch/index.vue
浏览文件 @
3ffcbe59
...
...
@@ -2,13 +2,13 @@
<view
:class=
"classes"
@
click=
"onClick"
:style=
"style"
>
<view
class=
"switch-button"
>
<view
v-show=
"!isOpen"
class=
"close-line"
></view>
<template
v-if=
"
label
"
>
<template
v-if=
"
activeText
"
>
<view
class=
"nut-switch-label open"
v-show=
"isOpen"
>
{{
label
.
split
(
/
\s
+/
)[
0
]
activeText
}}
</view>
<view
class=
"nut-switch-label close"
v-show=
"!isOpen"
>
{{
inactiveText
}}
</view>
<div
class=
"nut-switch-label close"
v-show=
"!isOpen"
>
{{
label
.
split
(
/
\s
+/
)[
1
]
}}
</div>
</
template
>
</view>
</view>
...
...
@@ -21,7 +21,11 @@ const { componentName, create } = createComponent('switch');
export
default
create
({
props
:
{
status
:
{
modelValue
:
{
type
:
Boolean
,
default
:
false
},
checked
:
{
type
:
Boolean
,
default
:
true
},
...
...
@@ -31,26 +35,28 @@ export default create({
},
activeColor
:
{
type
:
String
,
default
:
'
rgba(250,63,25,1)
'
default
:
''
},
inactiveColor
:
{
type
:
String
,
default
:
'
rgba(235,235,235,1)
'
default
:
''
},
label
:
{
activeText
:
{
type
:
String
,
default
:
''
},
inactiveText
:
{
type
:
String
,
default
:
''
}
},
emits
:
[
'
change
'
,
'
update:modelValue
'
],
setup
(
props
,
{
emit
})
{
let
isOpen
=
ref
(
props
.
status
?
props
.
status
:
true
);
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
,
[
isOpen
.
v
alue
?
'
switch-open
'
:
'
switch-close
'
]:
true
,
[
props
.
modelV
alue
?
'
switch-open
'
:
'
switch-close
'
]:
true
,
[
`
${
prefixCls
}
-disable`
]:
props
.
disable
,
[
`
${
prefixCls
}
-base`
]:
true
};
...
...
@@ -58,18 +64,19 @@ export default create({
const
style
=
computed
(()
=>
{
return
{
backgroundColor
:
isOpen
.
value
?
props
.
activeColor
:
props
.
inactiveColor
backgroundColor
:
props
.
modelValue
?
props
.
activeColor
:
props
.
inactiveColor
};
});
const
onClick
=
()
=>
{
const
onClick
=
(
event
:
Event
)
=>
{
if
(
props
.
disable
)
return
;
isOpen
.
value
=
!
isOpen
.
value
;
emit
(
'
switch-change
'
,
event
,
isOpen
.
value
);
emit
(
'
update:modelValue
'
,
!
props
.
modelValue
)
;
emit
(
'
change
'
,
!
props
.
modelValue
,
event
);
};
return
{
isOpen
,
classes
,
style
,
onClick
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录