提交 c4b89419 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

refactor(directive): v-bind

上级 71a9a210
......@@ -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-class",
"path": "pages/directive/v-bind/v-bind-composition",
"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": {
......
<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>
<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
<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
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
<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
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
<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>
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
<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>
<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>
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
<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
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
<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
<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
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
<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
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
<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
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
<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>
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
<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>
......@@ -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',
},
]
},
]
},
{
......
......@@ -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
......
......@@ -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.
先完成此消息的编辑!
想要评论请 注册