Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
小浣熊撸代码
uni-app
提交
a4398787
U
uni-app
项目概览
小浣熊撸代码
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a4398787
编写于
10月 20, 2021
作者:
fxy060608
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
wip(mp): v-model (input/textarea)
上级
9c0077d7
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
114 addition
and
29 deletion
+114
-29
packages/uni-mp-compiler/__tests__/vModel.spec.ts
packages/uni-mp-compiler/__tests__/vModel.spec.ts
+25
-9
packages/uni-mp-compiler/src/transforms/vModel.ts
packages/uni-mp-compiler/src/transforms/vModel.ts
+89
-20
未找到文件。
packages/uni-mp-compiler/__tests__/vModel.spec.ts
浏览文件 @
a4398787
...
...
@@ -22,13 +22,29 @@ describe('compiler: transform v-model', () => {
}
)
})
// test(`input,textarea v-model`, () => {
// assert(
// `<input v-model="model" />`,
// `<input value="{{a}}" bindinput="{{b}}" />`,
// `(_ctx, _cache) => {
// return { a: _ctx.model, b: _vOn(($event)=>_ctx.model = $event.detail.value) }
// }`
// )
// })
test
(
`input,textarea v-model`
,
()
=>
{
assert
(
`<input v-model="model" />`
,
`<input value="{{a}}" bindinput="{{b}}"/>`
,
`(_ctx, _cache) => {
return { a: _ctx.model, b: _vOn($event => _ctx.model = $event.detail.value) }
}`
)
assert
(
`<textarea v-model="model" />`
,
`<textarea value="{{a}}" bindinput="{{b}}"/>`
,
`(_ctx, _cache) => {
return { a: _ctx.model, b: _vOn($event => _ctx.model = $event.detail.value) }
}`
)
})
test
(
`input v-model + v-on`
,
()
=>
{
assert
(
`<input @input="input" v-model="model" />`
,
`<input bindinput="{{a}}" value="{{b}}"/>`
,
`(_ctx, _cache) => {
return { a: _vOn([$event => _ctx.model = $event.detail.value, _ctx.input]), b: _ctx.model }
}`
)
})
})
packages/uni-mp-compiler/src/transforms/vModel.ts
浏览文件 @
a4398787
...
...
@@ -7,9 +7,12 @@ import {
DirectiveNode
,
ElementNode
,
ExpressionNode
,
AttributeNode
,
createCompoundExpression
,
}
from
'
@vue/compiler-core
'
import
{
DOMErrorCodes
,
createDOMCompilerError
}
from
'
@vue/compiler-dom
'
import
{
camelize
}
from
'
@vue/shared
'
import
{
V_ON
}
from
'
..
'
import
{
createBindDirectiveNode
,
createOnDirectiveNode
}
from
'
../ast
'
import
{
genExpr
}
from
'
../codegen
'
import
{
TransformContext
}
from
'
../transform
'
...
...
@@ -59,23 +62,87 @@ export const transformModel = (
)
}
// native vmodel doesn't need the `modelValue` props since they are also
// passed to the runtime as `binding.value`. removing it reduces code size.
baseResult
.
props
=
baseResult
.
props
.
filter
(
(
p
)
=>
!
(
p
.
key
.
type
===
NodeTypes
.
SIMPLE_EXPRESSION
&&
p
.
key
.
content
===
'
modelValue
'
)
)
return
transformElementVModel
(
baseResult
.
props
,
node
,
context
)
}
return
[]
function
findInputDirectiveNode
(
props
:
(
AttributeNode
|
DirectiveNode
)[])
{
return
props
.
find
(
(
prop
)
=>
prop
.
type
===
NodeTypes
.
DIRECTIVE
&&
prop
.
name
===
'
on
'
&&
prop
.
arg
?.
type
===
NodeTypes
.
SIMPLE_EXPRESSION
&&
prop
.
arg
.
content
===
'
input
'
)
as
DirectiveNode
|
undefined
}
function
transformElementVModel
(
props
:
Property
[],
node
:
ElementNode
,
context
:
TransformContext
):
DirectiveNode
[]
{
const
dirs
=
transformVModel
(
props
,
context
,
{
binding
:
'
value
'
,
event
:
'
input
'
,
formatEventCode
(
code
)
{
return
code
.
replace
(
`= $event`
,
`= $event.detail.value`
)
},
})
if
(
dirs
.
length
===
2
)
{
const
inputDir
=
findInputDirectiveNode
(
node
.
props
)
if
(
inputDir
&&
inputDir
.
exp
)
{
// 合并到已有的 input 事件中
inputDir
.
exp
=
combineVOn
(
dirs
[
1
].
exp
!
,
inputDir
.
exp
,
context
)
dirs
.
length
=
1
}
}
return
dirs
}
function
parseVOn
(
exp
:
ExpressionNode
,
context
:
TransformContext
)
{
return
genExpr
(
exp
).
slice
(
context
.
helperString
(
V_ON
).
length
+
1
,
-
1
)
}
function
combineVOn
(
exp1
:
ExpressionNode
,
exp2
:
ExpressionNode
,
context
:
TransformContext
)
{
return
wrapperVOn
(
createCompoundExpression
([
`[`
,
parseVOn
(
exp1
,
context
),
'
,
'
,
parseVOn
(
exp2
,
context
),
`]`
,
]),
context
)
}
function
transformComponentVModel
(
props
:
Property
[],
context
:
TransformContext
):
DirectiveNode
[]
{
return
transformVModel
(
props
,
context
,
{
formatEventCode
(
code
)
{
return
code
.
replace
(
`= $event`
,
`= $event.detail.__args__[0]`
)
},
})
}
function
transformVModel
(
props
:
Property
[],
context
:
TransformContext
,
{
binding
,
event
,
formatEventCode
,
}:
{
binding
?:
string
event
?:
string
formatEventCode
:
(
code
:
string
)
=>
string
}
)
{
if
(
props
.
length
!==
2
)
{
return
[]
}
...
...
@@ -92,20 +159,22 @@ function transformComponentVModel(
return
[]
}
const
vBindModelValue
=
createBindDirectiveNode
(
modelValueArg
.
content
,
binding
||
modelValueArg
.
content
,
genExpr
(
modelValeExpr
as
ExpressionNode
)
)
const
vOnUpdate
=
createOnDirectiveNode
(
camelize
(
onUpdateArg
.
content
.
replace
(
'
onUpdate:
'
,
'
update-
'
)),
genExpr
(
wrapperVOn
(
// onUpdateExpr 通常是 ExpressionNode 或者被 cache 的 ExpressionNode
(
onUpdateExpr
.
type
===
NodeTypes
.
JS_CACHE_EXPRESSION
?
onUpdateExpr
.
value
:
onUpdateExpr
)
as
ExpressionNode
,
context
event
||
camelize
(
onUpdateArg
.
content
.
replace
(
'
onUpdate:
'
,
'
update-
'
)),
formatEventCode
(
genExpr
(
wrapperVOn
(
// onUpdateExpr 通常是 ExpressionNode 或者被 cache 的 ExpressionNode
(
onUpdateExpr
.
type
===
NodeTypes
.
JS_CACHE_EXPRESSION
?
onUpdateExpr
.
value
:
onUpdateExpr
)
as
ExpressionNode
,
context
)
)
)
.
replace
(
`= $event`
,
`= $event.detail.__args__[0]`
)
)
)
return
[
vBindModelValue
,
vOnUpdate
]
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录