Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello-uvue
提交
c4b89419
H
hello-uvue
项目概览
DCloud
/
hello-uvue
通知
402
Star
3
Fork
10
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello-uvue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
c4b89419
编写于
4月 24, 2024
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor(directive): v-bind
上级
71a9a210
变更
27
隐藏空白更改
内联
并排
Showing
27 changed file
with
338 addition
and
486 deletion
+338
-486
pages.json
pages.json
+5
-50
pages/directive/v-bind/Foo-composition.uvue
pages/directive/v-bind/Foo-composition.uvue
+38
-0
pages/directive/v-bind/Foo-options.uvue
pages/directive/v-bind/Foo-options.uvue
+40
-0
pages/directive/v-bind/counter.uvue
pages/directive/v-bind/counter.uvue
+0
-25
pages/directive/v-bind/v-bind-array-deep.test.js
pages/directive/v-bind/v-bind-array-deep.test.js
+0
-13
pages/directive/v-bind/v-bind-array-deep.uvue
pages/directive/v-bind/v-bind-array-deep.uvue
+0
-27
pages/directive/v-bind/v-bind-attribute.test.js
pages/directive/v-bind/v-bind-attribute.test.js
+0
-14
pages/directive/v-bind/v-bind-attribute.uvue
pages/directive/v-bind/v-bind-attribute.uvue
+0
-20
pages/directive/v-bind/v-bind-class.test.js
pages/directive/v-bind/v-bind-class.test.js
+0
-17
pages/directive/v-bind/v-bind-class.uvue
pages/directive/v-bind/v-bind-class.uvue
+0
-47
pages/directive/v-bind/v-bind-composition.uvue
pages/directive/v-bind/v-bind-composition.uvue
+85
-0
pages/directive/v-bind/v-bind-css.test.js
pages/directive/v-bind/v-bind-css.test.js
+0
-22
pages/directive/v-bind/v-bind-css.uvue
pages/directive/v-bind/v-bind-css.uvue
+0
-22
pages/directive/v-bind/v-bind-map.test.js
pages/directive/v-bind/v-bind-map.test.js
+0
-23
pages/directive/v-bind/v-bind-map.uvue
pages/directive/v-bind/v-bind-map.uvue
+0
-21
pages/directive/v-bind/v-bind-options.uvue
pages/directive/v-bind/v-bind-options.uvue
+82
-0
pages/directive/v-bind/v-bind-props.test.js
pages/directive/v-bind/v-bind-props.test.js
+0
-18
pages/directive/v-bind/v-bind-props.uvue
pages/directive/v-bind/v-bind-props.uvue
+0
-31
pages/directive/v-bind/v-bind-set.test.js
pages/directive/v-bind/v-bind-set.test.js
+0
-23
pages/directive/v-bind/v-bind-set.uvue
pages/directive/v-bind/v-bind-set.uvue
+0
-21
pages/directive/v-bind/v-bind-style.test.js
pages/directive/v-bind/v-bind-style.test.js
+0
-27
pages/directive/v-bind/v-bind-style.uvue
pages/directive/v-bind/v-bind-style.uvue
+0
-23
pages/directive/v-bind/v-bind.test.js
pages/directive/v-bind/v-bind.test.js
+62
-21
pages/directive/v-bind/v-bind.uvue
pages/directive/v-bind/v-bind.uvue
+0
-20
pages/index/index.uvue
pages/index/index.uvue
+16
-0
refactor_options-API-composition-API-correspondence.md
refactor_options-API-composition-API-correspondence.md
+1
-1
styles/common.css
styles/common.css
+9
-0
未找到文件。
pages.json
浏览文件 @
c4b89419
...
...
@@ -241,64 +241,19 @@
}
},
//
#endif
{
"path"
:
"pages/directive/v-bind/v-bind"
,
"path"
:
"pages/directive/v-bind/v-bind
-options
"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind"
"navigationBarTitleText"
:
"v-bind
选项式 API
"
}
},
{
"path"
:
"pages/directive/v-bind/v-bind-c
lass
"
,
"path"
:
"pages/directive/v-bind/v-bind-c
omposition
"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind
-class
"
"navigationBarTitleText"
:
"v-bind
组合式 API
"
}
},
{
"path"
:
"pages/directive/v-bind/v-bind-style"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind-style"
}
},
{
"path"
:
"pages/directive/v-bind/v-bind-props"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind-props"
}
},
{
"path"
:
"pages/directive/v-bind/v-bind-attribute"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind-attribute"
}
},
{
"path"
:
"pages/directive/v-bind/v-bind-array-deep"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind-array-deep"
}
},
{
"path"
:
"pages/directive/v-bind/v-bind-map"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind-map"
}
},
{
"path"
:
"pages/directive/v-bind/v-bind-set"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind-set"
}
},
//
#ifdef
WEB
{
"path"
:
"pages/directive/v-bind/v-bind-css"
,
"style"
:
{
"navigationBarTitleText"
:
"v-bind-css"
}
},
//
#endif
{
"path"
:
"pages/directive/v-model/v-model"
,
"style"
:
{
...
...
pages/directive/v-bind/Foo-composition.uvue
0 → 100644
浏览文件 @
c4b89419
<template>
<view>
<view class="flex justify-between flex-row mb-10">
<text>props title:</text>
<text id="foo-props-title">{{ title }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>props num:</text>
<text id="foo-props-num">{{ num }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>props obj['name']:</text>
<text id="foo-props-obj-name">{{ obj['name'] }}</text>
</view>
</view>
</template>
<script setup lang="uts">
defineProps({
title: {
type: String,
default: ''
},
num: {
type: Number,
default: 0
},
obj: {
// #ifdef APP-ANDROID
type: FooPropsObj1ReactiveObject,
// #endif
// #ifdef APP-IOS || WEB
type: Object,
// #endif
required: true
}
})
</script>
pages/directive/v-bind/Foo-options.uvue
0 → 100644
浏览文件 @
c4b89419
<template>
<view>
<view class="flex justify-between flex-row mb-10">
<text>props title:</text>
<text id='foo-props-title'>{{ title }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>props num:</text>
<text id='foo-props-num'>{{ num }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>props obj['name']:</text>
<text id='foo-props-obj-name'>{{ obj['name'] }}</text>
</view>
</view>
</template>
<script lang="uts">
export default {
props: {
title: {
type: String,
default: ''
},
num: {
type: Number,
default: 0
},
obj: {
// #ifdef APP-ANDROID
type: FooPropsObjReactiveObject,
// #endif
// #ifdef APP-IOS || WEB
type: Object,
// #endif
required: true
}
}
}
</script>
\ No newline at end of file
pages/directive/v-bind/counter.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view>
<text class="count-id">{{id}}</text>
<text class="count-title">{{title}}</text>
<text class="count-obj">{{obj!['name']}}</text>
</view>
</template>
<script>
export default {
props: {
id: {
type: Number,
default: 0
},
title: {
type: String,
default: ''
},
obj: {
type: Object as PropType<UTSJSONObject>
}
}
}
</script>
\ No newline at end of file
pages/directive/v-bind/v-bind-array-deep.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-array-deep
'
describe
(
'
v-bind-array-deep
'
,
()
=>
{
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
object-value
'
,
async
()
=>
{
const
value
=
await
page
.
$
(
'
.deep-value
'
)
expect
(
await
value
.
text
()).
toBe
(
'
3
'
)
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-array-deep.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view>
<view v-for="(item, index) in arrayList" :key="index">
<text>{{item}}</text>
<text v-if="index==1">下面应显示 3</text>
<text v-if="index==1" class="deep-value">{{item['b']}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
arrayList: [{ a: 1 }] as UTSJSONObject[],
}
},
onReady() {
const b = { b: 2 } as UTSJSONObject
this.arrayList.push(b);
this.$nextTick(() => {
this.arrayList[1]['b'] = 3
})
}
}
</script>
\ No newline at end of file
pages/directive/v-bind/v-bind-attribute.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-attribute
'
describe
(
'
v-bind-attribute
'
,
()
=>
{
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
attribute
'
,
async
()
=>
{
const
view1
=
await
page
.
$
(
'
.attribute
'
)
expect
(
await
view1
.
attribute
(
'
id1
'
)).
toBe
(
'
id1
'
)
expect
(
await
view1
.
attribute
(
'
id2
'
)).
toBe
(
'
id2
'
)
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-attribute.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view class="page">
<view class="split-title">v-bind-attribute</view>
<!-- 绑定对象形式的 attribute -->
<view class="attribute" v-bind="{ 'id1': id1, 'id2': id2 }">
<text>绑定自定义属性</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id1: 'id1',
id2: 'id2'
}
}
}
</script>
pages/directive/v-bind/v-bind-class.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-class
'
describe
(
'
v-bind-class
'
,
()
=>
{
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
rect
'
,
async
()
=>
{
const
rect1
=
await
page
.
$
(
'
.rect1
'
)
const
rect2
=
await
page
.
$
(
'
.rect2
'
)
const
rect3
=
await
page
.
$
(
'
.rect3
'
)
expect
(
await
rect1
.
attribute
(
'
class
'
)).
toBe
(
'
rect rect1 red
'
)
expect
(
await
rect2
.
attribute
(
'
class
'
)).
toBe
(
'
rect rect2 class-a class-b
'
)
expect
(
await
rect3
.
attribute
(
'
class
'
)).
toBe
(
'
rect rect3 class-a class-b class-c
'
)
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-class.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view class="page">
<view class="split-title">v-bind-class</view>
<view class="rect rect1" :class="{ red: isRed }">背景红色</view>
<view class="rect rect2" :class="[classA, classB]">背景绿色(#008000), 边框2px蓝色(#0000FF)</view>
<view class="rect rect3" :class="[classA, { [classB]: isB, [classC]: isC }]">背景绿色(#008000), 边框8px蓝色(#0000FF)</view>
</view>
</template>
<script>
export default {
data() {
return {
isRed: true,
isB: true,
isC: true,
classA: 'class-a',
classB: 'class-b',
classC: 'class-c'
}
}
}
</script>
<style>
.rect {
width: 200px;
height: 100px;
margin: 5px 0;
}
.red {
background-color: #FF0000;
}
.class-a {
background-color: #008000;
}
.class-b {
border: 2px solid #0000FF;
}
.class-c {
border-width: 4px;
}
</style>
pages/directive/v-bind/v-bind-composition.uvue
0 → 100644
浏览文件 @
c4b89419
<template>
<view class="page">
<!-- v-bind attribute -->
<button id="disabled-btn" class="mb-10" :disabled="true">
:disabled true
</button>
<button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
v-bind:disabled false
</button>
<!-- v-bind style -->
<view class="flex justify-between flex-row mb-10">
<text>bind object style fontSize:</text>
<text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
{{ dataInfo.fontSize }}
</text>
</view>
<view
id="bind-array-style"
class="mb-10 p-10"
:style="[dataInfo.backgroundColor, dataInfo.border]">
<view>bind arr style</view>
<view class="my-10">{{ dataInfo.backgroundColor }}</view>
<view>{{ dataInfo.border }}</view>
</view>
<!-- v-bind props -->
<Foo
:title="dataInfo.fooProps.title"
:num="dataInfo.fooProps.num"
:obj="dataInfo.fooProps.obj" />
<!-- v-bind in style -->
<!-- #ifdef WEB -->
<view class="mb-10 v-bind-css"></view>
<!-- #endif -->
</view>
</template>
<script setup lang="uts">
import Foo from './Foo-composition.uvue'
type FooPropsObj = {
name : string
}
type FooProps = {
title : string
num : number
obj : FooPropsObj
}
type DataInfo = {
fontSize : string
backgroundColor : string
border : string
fooProps : FooProps
vBindClassBackgroundColor : string,
}
const dataInfo = reactive({
fontSize: '20px',
backgroundColor: 'background-color: green',
border: 'border: 2px solid red',
fooProps: {
title: 'foo title',
num: 1,
obj: {
name: 'foo obj name',
}
},
vBindClassBackgroundColor: 'red',
} as DataInfo)
defineExpose({
dataInfo
})
</script>
<style>
/* #ifdef WEB */
.v-bind-css {
background-color: v-bind(dataInfo.vBindClassBackgroundColor);
height: 20px;
}
/* #endif */
</style>
pages/directive/v-bind/v-bind-css.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-css
'
describe
(
'
v-bind-css
'
,
()
=>
{
if
(
!
process
.
env
.
uniTestPlatformInfo
.
startsWith
(
'
web
'
))
{
it
(
'
not-support
'
,
async
()
=>
{
expect
(
1
).
toBe
(
1
)
})
return
}
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
screenshot
'
,
async
()
=>
{
await
page
.
waitFor
(
500
)
const
image
=
await
program
.
screenshot
({
fullPage
:
true
});
expect
(
image
).
toMatchImageSnapshot
();
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-css.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view>
<view class="rect-bind"></view>
</view>
</template>
<script>
export default {
data() {
return {
classBindColor: "#008000"
}
}
}
</script>
<style scoped>
.rect-bind {
background-color: v-bind(classBindColor);
padding: 100px;
}
</style>
\ No newline at end of file
pages/directive/v-bind/v-bind-map.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-map
'
describe
(
'
v-bind-map
'
,
()
=>
{
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
numberBool
'
,
async
()
=>
{
const
numberBoolList
=
await
page
.
$$
(
'
.numberBool-item
'
)
for
(
let
i
=
0
;
i
<
numberBoolList
.
length
;
i
++
)
{
const
item
=
numberBoolList
[
i
];
expect
(
await
item
.
text
()).
toBe
(
i
+
'
:true
'
)
}
})
it
(
'
stringBool
'
,
async
()
=>
{
const
stringBoolList
=
await
page
.
$$
(
'
.stringBool-item
'
)
for
(
let
i
=
0
;
i
<
stringBoolList
.
length
;
i
++
)
{
const
item
=
stringBoolList
[
i
];
expect
(
await
item
.
text
()).
toBe
(
i
+
'
:true
'
)
}
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-map.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view class="page">
<view v-for="(item, index) in numberBool" :key="index">
<text class="numberBool-item">{{item[0]}}:{{item[1]}}</text>
</view>
<view v-for="(item, index) in stringBool" :key="index">
<text class="stringBool-item">{{item[0]}}:{{item[1]}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
numberBool: new Map<number, boolean>([[0, true], [1, true], [2, true]]),
stringBool: new Map<string, boolean>([['0', true], ['1', true], ['2', true]])
}
}
}
</script>
\ No newline at end of file
pages/directive/v-bind/v-bind-options.uvue
0 → 100644
浏览文件 @
c4b89419
<template>
<view class="page">
<!-- v-bind attribute -->
<button id="disabled-btn" class="mb-10" :disabled="true">
:disabled true
</button>
<button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
v-bind:disabled false
</button>
<!-- v-bind style -->
<view class="flex justify-between flex-row mb-10">
<text>bind object style fontSize:</text>
<text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
{{ dataInfo.fontSize }}
</text>
</view>
<view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
<view>bind arr style</view>
<view class="my-10">{{ dataInfo.backgroundColor }}</view>
<view>{{ dataInfo.border }}</view>
</view>
<!-- v-bind props -->
<Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
<!-- v-bind in style -->
<!-- #ifdef WEB -->
<view class="mb-10 v-bind-css"></view>
<!-- #endif -->
</view>
</template>
<script lang="uts">
import Foo from './Foo-options.uvue'
type FooPropsObj = {
name : string
}
type FooProps = {
title : string
num : number
obj : FooPropsObj
}
type DataInfo = {
fontSize : string
backgroundColor : string
border : string
fooProps : FooProps
vBindClassBackgroundColor : string,
}
export default {
components: { Foo },
data() {
return {
dataInfo: {
fontSize: '20px',
backgroundColor: 'background-color: green',
border: 'border: 2px solid red',
fooProps: {
title: 'foo title',
num: 1,
obj: {
name: 'foo obj name',
}
},
vBindClassBackgroundColor: 'red',
} as DataInfo
}
},
}
</script>
<style>
/* #ifdef WEB */
.v-bind-css {
background-color: v-bind(dataInfo.vBindClassBackgroundColor);
height: 20px;
}
/* #endif */
</style>
\ No newline at end of file
pages/directive/v-bind/v-bind-props.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-props
'
describe
(
'
v-bind-props
'
,
()
=>
{
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
counter1
'
,
async
()
=>
{
const
counter
=
await
page
.
$
(
'
.counter1
'
)
const
counterID
=
await
counter
.
$
(
'
.count-id
'
)
expect
(
await
counterID
.
text
()).
toBe
(
'
1
'
)
const
counterTitle
=
await
counter
.
$
(
'
.count-title
'
)
expect
(
await
counterTitle
.
text
()).
toBe
(
'
title
'
)
const
counterObj
=
await
counter
.
$
(
'
.count-obj
'
)
expect
(
await
counterObj
.
text
()).
toBe
(
'
obj prop name
'
)
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-props.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view class="page">
<view class="split-title">v-bind-props</view>
<counter class="counter1" :id="post.id" :title="post.title" :obj="{name: 'obj prop name'}"></counter>
<!-- TODO 暂不支持 -->
<!-- <counter class="counter2" v-bind="post"></counter> -->
</view>
</template>
<script>
import counter from "./counter.uvue"
type CounterData = {
id : number,
title : string
}
export default {
components: {
counter
},
data() {
return {
post: {
id: 1,
title: 'title'
} as CounterData
}
}
}
</script>
\ No newline at end of file
pages/directive/v-bind/v-bind-set.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-set
'
describe
(
'
v-bind-set
'
,
()
=>
{
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
number
'
,
async
()
=>
{
const
list
=
await
page
.
$$
(
'
.number-item
'
)
for
(
let
i
=
0
;
i
<
list
.
length
;
i
++
)
{
const
item
=
list
[
i
];
expect
(
await
item
.
text
()).
toBe
(
i
+
''
)
}
})
it
(
'
string
'
,
async
()
=>
{
const
list
=
await
page
.
$$
(
'
.string-item
'
)
for
(
let
i
=
0
;
i
<
list
.
length
;
i
++
)
{
const
item
=
list
[
i
];
expect
(
await
item
.
text
()).
toBe
(
i
+
''
)
}
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-set.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view class="page">
<view v-for="(item, index) in setNumberValues" :key="index">
<text class="number-item">{{item}}</text>
</view>
<view v-for="(item, index) in setStringValues" :key="index">
<text class="string-item">{{item}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
setNumberValues: new Set<number>([0, 1, 2, 3]),
setStringValues: new Set<string>(['0', '1', '2', '3'])
}
}
}
</script>
\ No newline at end of file
pages/directive/v-bind/v-bind-style.test.js
已删除
100644 → 0
浏览文件 @
71a9a210
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-style
'
describe
(
'
v-bind-style
'
,
()
=>
{
const
isFirefox
=
process
.
env
.
uniTestPlatformInfo
.
indexOf
(
'
firefox
'
)
>
-
1
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
basic
'
,
async
()
=>
{
const
text
=
await
page
.
$
(
'
.text-font-size
'
)
const
view
=
await
page
.
$
(
'
.view-style
'
)
expect
(
await
text
.
style
(
'
fontSize
'
)).
toBe
(
'
14px
'
)
if
(
process
.
env
.
uniTestPlatformInfo
.
startsWith
(
'
web
'
))
{
expect
(
await
view
.
style
(
'
backgroundColor
'
)).
toBe
(
'
rgb(0, 128, 0)
'
)
}
else
{
expect
(
await
view
.
style
(
'
backgroundColor
'
)).
toBe
(
'
#008000
'
)
}
expect
(
await
view
.
style
(
isFirefox
?
'
borderTopWidth
'
:
'
borderWidth
'
)).
toBe
(
'
2px
'
)
if
(
process
.
env
.
uniTestPlatformInfo
.
startsWith
(
'
web
'
))
{
expect
(
await
view
.
style
(
isFirefox
?
'
borderTopColor
'
:
'
borderColor
'
)).
toBe
(
'
rgb(0, 0, 255)
'
)
}
else
{
expect
(
await
view
.
style
(
'
borderColor
'
)).
toBe
(
'
#0000FF
'
)
}
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind-style.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view class="page">
<view class="split-title">v-bind-style</view>
<view>
<text class="text-font-size" :style="{fontSize: size + 'px'}">14px</text>
</view>
<view class="view-style" :style="[styleObjectA, styleObjectB]">
背景绿色(#008000), 边框2px蓝色(#0000FF)
</view>
</view>
</template>
<script>
export default {
data() {
return {
size: 14,
styleObjectA: 'background-color: #008000;',
styleObjectB: 'border: 2px solid #0000FF;'
}
}
}
</script>
pages/directive/v-bind/v-bind.test.js
浏览文件 @
c4b89419
const
PAGE_PATH
=
'
/pages/directive/v-bind/v-bind
'
describe
(
'
v-bind
'
,
()
=>
{
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
500
)
})
it
(
'
button-disabled
'
,
async
()
=>
{
const
button
=
await
page
.
$
(
'
.button-disabled
'
)
// TODO
const
disabled
=
await
button
.
property
(
'
disabled
'
)
expect
(
disabled
.
toString
()).
toBe
(
true
+
''
)
})
it
(
'
button-v-bind:disabled
'
,
async
()
=>
{
const
button
=
await
page
.
$
(
'
.button-v-bind-disabled
'
)
// TODO
const
disabled
=
await
button
.
property
(
'
disabled
'
)
expect
(
disabled
.
toString
()).
toBe
(
true
+
''
)
})
})
const
OPTIONS_PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-options
'
const
COMPOSITION_PAGE_PATH
=
'
/pages/directive/v-bind/v-bind-composition
'
describe
(
'
v-bind
'
,
()
=>
{
let
page
const
platformInfo
=
process
.
env
.
uniTestPlatformInfo
.
toLocaleLowerCase
()
const
isWeb
=
platformInfo
.
startsWith
(
'
web
'
)
const
isFirefox
=
platformInfo
.
indexOf
(
'
firefox
'
)
>
-
1
const
test
=
async
(
pagePath
)
=>
{
page
=
await
program
.
reLaunch
(
pagePath
)
await
page
.
waitFor
(
'
view
'
)
await
page
.
waitFor
(
1000
)
const
disabledBtn
=
await
page
.
$
(
'
#disabled-btn
'
)
expect
((
await
disabledBtn
.
property
(
'
disabled
'
)).
toString
()).
toBe
(
'
true
'
)
const
vBindDisabledBtn
=
await
page
.
$
(
'
#v-bind-disabled-btn
'
)
expect
((
await
vBindDisabledBtn
.
property
(
'
disabled
'
)).
toString
()).
toBe
(
'
false
'
)
const
dataInfo
=
await
page
.
data
(
'
dataInfo
'
)
const
bindObjectStyle
=
await
page
.
$
(
'
#bind-object-style
'
)
expect
(
await
bindObjectStyle
.
style
(
'
fontSize
'
)).
toBe
(
dataInfo
.
fontSize
)
const
bindArrayStyle
=
await
page
.
$
(
'
#bind-array-style
'
)
if
(
isWeb
)
{
expect
(
await
bindArrayStyle
.
style
(
'
backgroundColor
'
)).
toBe
(
'
rgb(0, 128, 0)
'
)
}
else
{
expect
(
await
bindArrayStyle
.
style
(
'
backgroundColor
'
)).
toBe
(
dataInfo
.
backgroundColor
.
replace
(
'
background-color:
'
,
''
).
trim
())
}
const
borderStyles
=
dataInfo
.
border
.
replace
(
'
border:
'
,
''
).
trim
().
split
(
'
'
)
expect
(
await
bindArrayStyle
.
style
(
isFirefox
?
'
borderTopWidth
'
:
'
borderWidth
'
)).
toBe
(
borderStyles
[
0
])
expect
(
await
bindArrayStyle
.
style
(
isFirefox
?
'
borderTopStyle
'
:
'
borderStyle
'
)).
toBe
(
borderStyles
[
1
])
if
(
isWeb
)
{
expect
(
await
bindArrayStyle
.
style
(
isFirefox
?
'
borderTopColor
'
:
'
borderColor
'
)).
toBe
(
'
rgb(255, 0, 0)
'
)
}
else
{
expect
(
await
bindArrayStyle
.
style
(
isFirefox
?
'
borderTopColor
'
:
'
borderColor
'
)).
toBe
(
borderStyles
[
2
])
}
const
fooPropsTitle
=
await
page
.
$
(
'
#foo-props-title
'
)
expect
(
await
fooPropsTitle
.
text
()).
toBe
(
dataInfo
.
fooProps
.
title
)
const
fooPropsNum
=
await
page
.
$
(
'
#foo-props-num
'
)
expect
(
await
fooPropsNum
.
text
()).
toBe
(
dataInfo
.
fooProps
.
num
.
toString
())
const
fooPropsObjName
=
await
page
.
$
(
'
#foo-props-obj-name
'
)
expect
(
await
fooPropsObjName
.
text
()).
toBe
(
dataInfo
.
fooProps
.
obj
.
name
)
if
(
isWeb
)
{
const
vBindCss
=
await
page
.
$
(
'
.v-bind-css
'
)
expect
(
await
vBindCss
.
style
(
'
backgroundColor
'
)).
toBe
(
'
rgb(255, 0, 0)
'
)
}
}
it
(
'
v-bind options API
'
,
async
()
=>
{
await
test
(
OPTIONS_PAGE_PATH
)
})
it
(
'
v-bind composition API
'
,
async
()
=>
{
await
test
(
COMPOSITION_PAGE_PATH
)
})
})
\ No newline at end of file
pages/directive/v-bind/v-bind.uvue
已删除
100644 → 0
浏览文件 @
71a9a210
<template>
<view class="page">
<view class="split-title">v-bind</view>
<button class="button-disabled" :disabled="isButtonDisabled">Button</button>
<button class="button-v-bind-disabled" v-bind:disabled="isButtonDisabled">Button</button>
</view>
</template>
<script>
export default {
data() {
return {
isButtonDisabled: true
}
}
}
</script>
<style>
</style>
pages/index/index.uvue
浏览文件 @
c4b89419
...
...
@@ -790,6 +790,22 @@ export default {
},
]
},
{
id: 'v-bind',
name: 'v-bind',
children: [
{
id: 'v-bind-options',
name: 'v-bind 选项式 API',
url: 'v-bind-options',
},
{
id: 'v-bind-composition',
name: 'v-bind 组合式 API',
url: 'v-bind-composition',
},
]
},
]
},
{
...
...
refactor_options-API-composition-API-correspondence.md
浏览文件 @
c4b89419
...
...
@@ -158,7 +158,7 @@ function transform(fileInfo, api) {
-
[x] v-if v-else-if v-else
-
[x] v-for
-
[x] v-on
-
[
] v-bind
-
[
x
] v-bind
-
[ ] v-model
-
[ ] v-slot
-
[x] v-pre
...
...
styles/common.css
浏览文件 @
c4b89419
...
...
@@ -30,12 +30,21 @@
align-items
:
center
;
}
.my-10
{
margin-top
:
10px
;
margin-bottom
:
10px
;
}
.mt-10
{
margin-top
:
10px
;
}
.mb-10
{
margin-bottom
:
10px
;
}
.p-10
{
padding
:
10px
;
}
.bold
{
font-weight
:
bold
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录