Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 401
Star 3
Fork 10
H
hello-uvue
提交 740a387d 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

fix(v-bind): 修复类型错误

上级 a0cd00b0
隐藏空白更改
内联 并排
Showing with 177 addition and 187 deletion
pages/directive/v-bind/Foo-composition.uvue
浏览文件 @ 740a387d
...@@ -10,15 +10,13 @@ ...@@ -10,15 +10,13 @@
</view> </view>
<view class="flex justify-between flex-row mb-10"> <view class="flex justify-between flex-row mb-10">
<text>props obj['name']:</text> <text>props obj['name']:</text>
<text id="foo-props-obj-name">{{ obj['name'] }}</text> <text id="foo-props-obj-name">{{ obj.name }}</text>
</view> </view>
</view> </view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
export type FooPropsObj = { import { FooPropsObj } from './type.uts'
name : string
}
defineProps({ defineProps({
title: { title: {
...@@ -34,8 +32,8 @@ ...@@ -34,8 +32,8 @@
default: false default: false
}, },
obj: { obj: {
type: FooPropsObj, type: Object as PropType<FooPropsObj>,
required: true default: {name: 'default name'} as FooPropsObj
} }
}) })
</script> </script>
\ No newline at end of file
pages/directive/v-bind/Foo-options.uvue
浏览文件 @ 740a387d
...@@ -10,16 +10,14 @@ ...@@ -10,16 +10,14 @@
</view> </view>
<view class="flex justify-between flex-row mb-10"> <view class="flex justify-between flex-row mb-10">
<text>props obj['name']:</text> <text>props obj['name']:</text>
<text id='foo-props-obj-name'>{{ obj['name'] }}</text> <text id='foo-props-obj-name'>{{ obj.name }}</text>
</view> </view>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
export type FooPropsObj = { import { FooPropsObj } from './type.uts'
name : string
}
export default { export default {
props: { props: {
title: { title: {
...@@ -29,14 +27,14 @@ ...@@ -29,14 +27,14 @@
num: { num: {
type: Number, type: Number,
default: 0 default: 0
}, },
checked: { checked: {
type: Boolean, type: Boolean,
default: false default: false
}, },
obj: { obj: {
type: FooPropsObj, type: Object as PropType<FooPropsObj>,
required: true default: {name: 'default name'} as FooPropsObj
} }
} }
} }
......
pages/directive/v-bind/type.uts 0 → 100644
浏览文件 @ 740a387d
export type FooPropsObj = {
name : string
}
export type FooProps = {
title : string
num : number
obj : FooPropsObj
}
\ No newline at end of file
pages/directive/v-bind/v-bind-composition.uvue
浏览文件 @ 740a387d
<template> <template>
<view class="page"> <view class="page">
<!-- v-bind attribute --> <!-- v-bind attribute -->
<button id="disabled-btn" class="mb-10" :disabled="true"> <button id="disabled-btn" class="mb-10" :disabled="true">
:disabled true :disabled true
</button> </button>
<button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false"> <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
v-bind:disabled false v-bind:disabled false
</button> </button>
<!-- v-bind style --> <!-- v-bind style -->
<view class="flex justify-between flex-row mb-10"> <view class="flex justify-between flex-row mb-10">
<text>bind object style fontSize:</text> <text>bind object style fontSize:</text>
<text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }"> <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
{{ dataInfo.fontSize }} {{ dataInfo.fontSize }}
</text> </text>
</view> </view>
<view <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
id="bind-array-style" <view>bind arr style</view>
class="mb-10 p-10" <view class="my-10">{{ dataInfo.backgroundColor }}</view>
:style="[dataInfo.backgroundColor, dataInfo.border]"> <view>{{ dataInfo.border }}</view>
<view>bind arr style</view> </view>
<view class="my-10">{{ dataInfo.backgroundColor }}</view>
<view>{{ dataInfo.border }}</view> <!-- v-bind props -->
</view> <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
<!-- v-bind props --> <!-- v-bind props -->
<Foo <Foo checked />
:title="dataInfo.fooProps.title"
:num="dataInfo.fooProps.num" <!-- v-bind in style -->
:obj="dataInfo.fooProps.obj" /> <!-- #ifdef WEB -->
<view class="mb-10 v-bind-css"></view>
<!-- v-bind props --> <!-- #endif -->
<Foo checked /> </view>
</template>
<!-- v-bind in style -->
<!-- #ifdef WEB --> <script setup lang="uts">
<view class="mb-10 v-bind-css"></view> import Foo from './Foo-composition.uvue'
<!-- #endif --> import { FooProps, FooPropsObj } from './type.uts'
</view>
</template> type DataInfo = {
fontSize : string
<script setup lang="uts"> backgroundColor : string
import Foo from './Foo-composition.uvue' border : string
import {type FooPropsObj} from './Foo-composition.uvue' fooProps : FooProps
vBindClassBackgroundColor : string,
type FooProps = { vBindClassRpxHeight : string,
title : string }
num : number
obj : FooPropsObj const dataInfo = reactive({
} fontSize: '20px',
type DataInfo = { backgroundColor: 'background-color: green',
fontSize : string border: 'border: 2px solid red',
backgroundColor : string fooProps: {
border : string title: 'foo title',
fooProps : FooProps num: 1,
vBindClassBackgroundColor : string, obj: {
vBindClassRpxHeight : string, name: 'foo obj name',
} } as FooPropsObj
},
const dataInfo = reactive({ vBindClassBackgroundColor: 'red',
fontSize: '20px', vBindClassRpxHeight: '300rpx'
backgroundColor: 'background-color: green', } as DataInfo)
border: 'border: 2px solid red',
fooProps: { defineExpose({
title: 'foo title', dataInfo
num: 1, })
obj: { </script>
name: 'foo obj name',
} as FooPropsObj <style>
}, /* #ifdef WEB */
vBindClassBackgroundColor: 'red', .v-bind-css {
vBindClassRpxHeight: '300rpx' background-color: v-bind(dataInfo.vBindClassBackgroundColor);
} as DataInfo) height: v-bind(dataInfo.vBindClassRpxHeight);
}
defineExpose({
dataInfo /* #endif */
}) </style>
</script> \ No newline at end of file
<style>
/* #ifdef WEB */
.v-bind-css {
background-color: v-bind(dataInfo.vBindClassBackgroundColor);
height: v-bind(dataInfo.vBindClassRpxHeight);
}
/* #endif */
</style>
pages/directive/v-bind/v-bind-options.uvue
浏览文件 @ 740a387d
<template> <template>
<view class="page"> <view class="page">
<!-- v-bind attribute --> <!-- v-bind attribute -->
<button id="disabled-btn" class="mb-10" :disabled="true">:disabled true</button> <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> <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">v-bind:disabled false</button>
<!-- v-bind style --> <!-- v-bind style -->
<view class="flex justify-between flex-row mb-10"> <view class="flex justify-between flex-row mb-10">
<text>bind object style fontSize:</text> <text>bind object style fontSize:</text>
<text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }"> <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
{{ dataInfo.fontSize }} {{ dataInfo.fontSize }}
</text> </text>
</view> </view>
<view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]"> <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
<view>bind arr style</view> <view>bind arr style</view>
<view class="my-10">{{ dataInfo.backgroundColor }}</view> <view class="my-10">{{ dataInfo.backgroundColor }}</view>
<view>{{ dataInfo.border }}</view> <view>{{ dataInfo.border }}</view>
</view> </view>
<!-- v-bind props --> <!-- v-bind props -->
<Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" /> <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
<!-- v-bind props --> <!-- v-bind props -->
<Foo checked /> <Foo checked />
<!-- v-bind in style --> <!-- v-bind in style -->
<!-- #ifdef WEB --> <!-- #ifdef WEB -->
<view class="mb-10 v-bind-css"></view> <view class="mb-10 v-bind-css"></view>
<!-- #endif --> <!-- #endif -->
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
import Foo from './Foo-options.uvue' import Foo from './Foo-options.uvue'
import {type FooPropsObj} from './Foo-options.uvue' import { FooProps, FooPropsObj } from './type.uts'
type FooProps = { type DataInfo = {
title: string fontSize : string
num: number backgroundColor : string
obj: FooPropsObj border : string
} fooProps : FooProps
type DataInfo = { vBindClassBackgroundColor : string
fontSize: string vBindClassRpxHeight : string
backgroundColor: string }
border: string
fooProps: FooProps export default {
vBindClassBackgroundColor: string components: { Foo },
vBindClassRpxHeight: string data() {
} return {
dataInfo: {
export default { fontSize: '20px',
components: { Foo }, backgroundColor: 'background-color: green',
data() { border: 'border: 2px solid red',
return { fooProps: {
dataInfo: { title: 'foo title',
fontSize: '20px', num: 1,
backgroundColor: 'background-color: green', obj: {
border: 'border: 2px solid red', name: 'foo obj name'
fooProps: { } as FooPropsObj
title: 'foo title', },
num: 1, vBindClassBackgroundColor: 'red',
obj: { vBindClassRpxHeight: '300rpx'
name: 'foo obj name' } as DataInfo
} as FooPropsObj }
}, }
vBindClassBackgroundColor: 'red', }
vBindClassRpxHeight: '300rpx' </script>
} as DataInfo
} <style>
} /* #ifdef WEB */
} .v-bind-css {
</script> background-color: v-bind(dataInfo.vBindClassBackgroundColor);
height: v-bind(dataInfo.vBindClassRpxHeight);
<style> }
/* #ifdef WEB */
.v-bind-css { /* #endif */
background-color: v-bind(dataInfo.vBindClassBackgroundColor); </style>
height: v-bind(dataInfo.vBindClassRpxHeight); \ No newline at end of file
}
/* #endif */
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或