admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 09:08:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ 兼容字节系小程序

Browse Source
This commit is contained in:
weisheng 2024-01-22 11:34:50 +08:00
parent 4b0af7a6ce
commit 0e97a1452d
23 changed files with 241 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/tabbar/Index.vue
View File

@ -3,76 +3,76 @@
<wd-toast></wd-toast>
<demo-block hor="0" title="基础用法" transparent>
<wd-tabbar bordered @change="handleChange" v-model="tabbar0">
<wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
<demo-block hor="0" title="通过名称匹配" transparent>
<wd-tabbar bordered @change="handleChange" v-model="tabbar1">
<wd-tabbar-item name="home" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="cart" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="setting" title="设置" icon="setting"></wd-tabbar-item>
<wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" name="home" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" name="cart" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" name="setting" title="设置" icon="setting"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" name="user" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
<demo-block hor="0" title="徽标提示" transparent>
<wd-tabbar v-model="tabbar2" @change="handleChange">
<wd-tabbar-item is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item :value="200" title="最大值" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="200" title="最大值" icon="user"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
<demo-block hor="0" title="悬浮标签栏" transparent>
<wd-tabbar shape="round" v-model="tabbar3" @change="handleChange">
<wd-tabbar-item title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>
<wd-tabbar-item title="分类" :value="2" icon="cart"></wd-tabbar-item>
<wd-tabbar-item title="相册" :value="30" icon="photo"></wd-tabbar-item>
<wd-tabbar-item title="我的" :value="200" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="分类" :value="2" icon="cart"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="相册" :value="30" icon="photo"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="我的" :value="200" icon="user"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
<demo-block hor="0" title="自定义图标" transparent>
<wd-tabbar v-model="tabbar4" @change="handleChange">
<wd-tabbar-item :value="2" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item :value="2" icon="cart" title="分类">
<wd-tabbar-item style="flex: 1" :value="2" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="2" icon="cart" title="分类">
<template #icon>
<wd-img round height="40rpx" width="40rpx" src="https://img.yzcdn.cn/vant/cat.jpeg"></wd-img>
</template>
</wd-tabbar-item>
<wd-tabbar-item :value="3" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="3" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
<demo-block hor="0" title="自定义颜色" transparent>
<wd-tabbar v-model="tabbar5" @change="handleChange" active-color="#ee0a24" inactive-color="#7d7e80">
<wd-tabbar-item is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item :value="200" title="最大值" icon="photo"></wd-tabbar-item>
<wd-tabbar-item :value="10" title="客服" icon="chat"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="200" title="最大值" icon="photo"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
<demo-block hor="0" title="监听切换事件" transparent>
<wd-tabbar v-model="tabbar6" @change="handleChange1" active-color="#ee0a24" inactive-color="#7d7e80">
<wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item title="客服" icon="chat"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
<demo-block hor="0" title="固定底部" transparent>
<wd-tabbar fixed v-model="tabbar7" @change="handleChange" bordered safeAreaInsetBottom placeholder>
<wd-tabbar-item :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item :value="200" title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item :value="10" title="客服" icon="chat"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="200" title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item style="flex: 1" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
</demo-block>
</page-wraper>
@ -101,4 +101,8 @@ function handleChange1({ value }: { value: string }) {
:deep(.page-wraper) {
background: #f6f6f6;
}
:deep(wd-tabbar-item) {
flex: 1;
}
</style>

2
src/uni_modules/wot-design-uni/components/composables/useCell.ts
View File

@ -6,7 +6,7 @@ export function useCell() {
const { parent: cellGroup, index } = useParent(CELL_GROUP_KEY)
const border = computed(() => {
return cellGroup && cellGroup.props.border && index.value
return cellGroup.value && cellGroup.value.props.border && index.value
})
return { border }

31
src/uni_modules/wot-design-uni/components/composables/useChildren.ts
View File

@ -6,7 +6,8 @@ import {
type InjectionKey,
type VNodeNormalizedChildren,
type ComponentPublicInstance,
type ComponentInternalInstance
type ComponentInternalInstance,
onMounted
} from 'vue'
// 小程序端不支持从vue导出的isVNode方法，参考uni-mp-vue的实现
@ -92,18 +93,24 @@ export function useChildren<
internalChildren.splice(index, 1)
}
provide(
key,
Object.assign(
{
link,
unlink,
children: publicChildren,
internalChildren
},
value
// #ifdef MP-TOUTIAO
onMounted(() => {
// #endif
provide(
key,
Object.assign(
{
link,
unlink,
children: publicChildren,
internalChildren
},
value
)
)
)
// #ifdef MP-TOUTIAO
})
// #endif
}
return {

56
src/uni_modules/wot-design-uni/components/composables/useParent.ts
View File

@ -6,7 +6,10 @@ import {
type InjectionKey,
getCurrentInstance,
type ComponentPublicInstance,
type ComponentInternalInstance
type ComponentInternalInstance,
onMounted,
type Ref,
reactive
} from 'vue'
type ParentProvide<T> = T & {
@ -16,26 +19,33 @@ type ParentProvide<T> = T & {
internalChildren: ComponentInternalInstance[]
}
export function useParent<T>(key: InjectionKey<ParentProvide<T>>) {
const parent = inject(key, null)
if (parent) {
const instance = getCurrentInstance()!
const { link, unlink, internalChildren } = parent
link(instance)
onUnmounted(() => unlink(instance))
const index = computed(() => internalChildren.indexOf(instance))
return {
parent,
index
}
}
return {
parent: null,
index: ref(-1)
}
type UseParentResult<T> = {
parent: Ref<ParentProvide<T> | null>
index: Ref<number>
}
export function useParent<T>(key: InjectionKey<ParentProvide<T>>): UseParentResult<T> {
const result: UseParentResult<T> = {
parent: ref(null),
index: ref<number>(-1)
}
// #ifdef MP-TOUTIAO
onMounted(() => {
// #endif
result.parent.value = inject(key, null)
if (result.parent.value) {
const instance = getCurrentInstance()!
const { link, unlink, internalChildren } = result.parent.value
link(instance)
onUnmounted(() => unlink(instance))
result.index.value = computed(() => internalChildren.indexOf(instance)).value
}
// #ifdef MP-TOUTIAO
})
// #endif
return result
}

8
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -343,8 +343,8 @@ const { parent: form } = useParent(FORM_KEY)
// 表单校验错误信息
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -353,8 +353,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)

8
src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue
View File

@ -110,8 +110,8 @@ const isBorder = computed(() => {
const { parent: form } = useParent(FORM_KEY)
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -120,8 +120,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)

46
src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue
View File

@ -75,8 +75,8 @@ const props = withDefaults(defineProps<Props>(), {
const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
const isChecked = computed(() => {
if (checkboxGroup) {
return checkboxGroup.props.modelValue.indexOf(props.modelValue) > -1
if (checkboxGroup.value) {
return checkboxGroup.value.props.modelValue.indexOf(props.modelValue) > -1
} else {
return props.modelValue === props.trueValue
}
@ -87,7 +87,7 @@ const isFirst = computed(() => {
})
const isLast = computed(() => {
const children = isDef(checkboxGroup) ? checkboxGroup.children : []
const children = isDef(checkboxGroup.value) ? checkboxGroup.value.children : []
return index.value === children.length - 1
})
const { proxy } = getCurrentInstance() as any
@ -96,7 +96,7 @@ watch(
() => props.modelValue,
() => {
// 组合使用走这个逻辑
if (checkboxGroup) {
if (checkboxGroup.value) {
checkName()
}
}
@ -111,16 +111,16 @@ watch(
)
const innerShape = computed(() => {
if (!props.shape && checkboxGroup && checkboxGroup.props.shape) {
return checkboxGroup.props.shape
if (!props.shape && checkboxGroup.value && checkboxGroup.value.props.shape) {
return checkboxGroup.value.props.shape
} else {
return props.shape
}
})
const innerCheckedColor = computed(() => {
if (!props.checkedColor && checkboxGroup && checkboxGroup.props.checkedColor) {
return checkboxGroup.props.checkedColor
if (!props.checkedColor && checkboxGroup.value && checkboxGroup.value.props.checkedColor) {
return checkboxGroup.value.props.checkedColor
} else {
return props.checkedColor
}
@ -128,16 +128,16 @@ const innerCheckedColor = computed(() => {
const innerDisabled = computed(() => {
let innerDisabled = props.disabled
if (checkboxGroup) {
if (checkboxGroup.value) {
if (
// max 生效时，group 已经选满，禁止其它节点再选中。
(checkboxGroup.props.max && checkboxGroup.props.modelValue.length >= checkboxGroup.props.max && !isChecked.value) ||
(checkboxGroup.value.props.max && checkboxGroup.value.props.modelValue.length >= checkboxGroup.value.props.max && !isChecked.value) ||
// min 生效时，group 选中的节点数量仅满足最小值，禁止取消已选中的节点。
(checkboxGroup.props.min && checkboxGroup.props.modelValue.length <= checkboxGroup.props.min && isChecked.value) ||
(checkboxGroup.value.props.min && checkboxGroup.value.props.modelValue.length <= checkboxGroup.value.props.min && isChecked.value) ||
// 只要子节点自己要求 disabled，那就 disabled。
props.disabled === true ||
// 父节点要求全局 disabled，子节点没吱声，那就 disabled。
(checkboxGroup.props.disabled && props.disabled === null)
(checkboxGroup.value.props.disabled && props.disabled === null)
) {
innerDisabled = true
}
@ -146,24 +146,24 @@ const innerDisabled = computed(() => {
})
const innerInline = computed(() => {
if (checkboxGroup && checkboxGroup.props.inline) {
return checkboxGroup.props.inline
if (checkboxGroup.value && checkboxGroup.value.props.inline) {
return checkboxGroup.value.props.inline
} else {
return false
}
})
const innerCell = computed(() => {
if (checkboxGroup && checkboxGroup.props.cell) {
return checkboxGroup.props.cell
if (checkboxGroup.value && checkboxGroup.value.props.cell) {
return checkboxGroup.value.props.cell
} else {
return false
}
})
const innerSize = computed(() => {
if (!props.size && checkboxGroup && checkboxGroup.props.size) {
return checkboxGroup.props.size
if (!props.size && checkboxGroup.value && checkboxGroup.value.props.size) {
return checkboxGroup.value.props.size
} else {
return props.size
}
@ -182,9 +182,9 @@ const emit = defineEmits(['change', 'update:modelValue'])
* @param myName 自己的标识符
*/
function checkName() {
checkboxGroup &&
checkboxGroup.children &&
checkboxGroup.children.forEach((child: any) => {
checkboxGroup.value &&
checkboxGroup.value.children &&
checkboxGroup.value.children.forEach((child: any) => {
if (child.$.uid !== proxy.$.uid && child.modelValue === props.modelValue) {
console.error(`The checkbox's bound value: ${props.modelValue} has been used`)
}
@ -196,11 +196,11 @@ function checkName() {
function toggle() {
if (innerDisabled.value) return
// 复选框单独使用时点击反选，并且在checkbox上触发change事件
if (checkboxGroup) {
if (checkboxGroup.value) {
emit('change', {
value: !isChecked.value
})
checkboxGroup.changeSelectState(props.modelValue)
checkboxGroup.value.changeSelectState(props.modelValue)
} else {
const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
emit('update:modelValue', newVal)

8
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
View File

@ -283,8 +283,8 @@ const { parent: form } = useParent(FORM_KEY)
// 表单校验错误信息
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -293,8 +293,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)

6
src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:34:35
* @LastEditTime: 2024-01-03 21:59:39
* @LastEditTime: 2024-01-21 20:56:59
* @LastEditors: weisheng
* @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue
@ -46,8 +46,8 @@ const style = ref<string>('')
const { parent: row } = useParent(ROW_KEY)
const gutter = computed(() => {
if (row) {
return row.props.gutter || 0
if (row.value) {
return row.value.props.gutter || 0
} else {
return 0
}

12
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
View File

@ -74,8 +74,8 @@ const contentStyle = computed(() => {
})
const selected = computed(() => {
if (collapse) {
return collapse.props.modelValue
if (collapse.value) {
return collapse.value.props.modelValue
} else {
return []
}
@ -142,16 +142,16 @@ function handleClick() {
}
if (isPromise(response)) {
response.then(() => {
collapse && collapse.toggle(name, !expanded.value)
collapse.value && collapse.value.toggle(name, !expanded.value)
})
} else {
collapse && collapse.toggle(name, !expanded.value)
collapse.value && collapse.value.toggle(name, !expanded.value)
}
} else {
collapse && collapse.toggle(name, !expanded.value)
collapse.value && collapse.value.toggle(name, !expanded.value)
}
} else {
collapse && collapse.toggle(name, !expanded.value)
collapse.value && collapse.value.toggle(name, !expanded.value)
}
}

8
src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
View File

@ -397,8 +397,8 @@ const { parent: form } = useParent(FORM_KEY)
// 表单校验错误信息
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -407,8 +407,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)

20
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
View File

@ -155,16 +155,16 @@ function choose(index: number) {
// 外部关闭弹出框
function close() {
showPop.value = false
dropMenu && dropMenu.fold()
dropMenu.value && dropMenu.value.fold()
}
const positionStyle = computed(() => {
let style: string = ''
if (showPop.value && dropMenu) {
if (showPop.value && dropMenu.value) {
style =
dropMenu.props.direction === 'down'
? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
: `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
dropMenu.value.props.direction === 'down'
? `top: calc(var(--window-top) + ${dropMenu.value.offset.value}px); bottom: 0;`
: `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.value.offset.value}px)`
} else {
style = ''
}
@ -174,11 +174,11 @@ const positionStyle = computed(() => {
function open() {
showWrapper.value = true
showPop.value = true
if (dropMenu) {
modal.value = Boolean(dropMenu.props.modal)
duration.value = Number(dropMenu.props.duration)
closeOnClickModal.value = Boolean(dropMenu.props.closeOnClickModal)
position.value = dropMenu.props.direction === 'down' ? 'top' : 'bottom'
if (dropMenu.value) {
modal.value = Boolean(dropMenu.value.props.modal)
duration.value = Number(dropMenu.value.props.duration)
closeOnClickModal.value = Boolean(dropMenu.value.props.closeOnClickModal)
position.value = dropMenu.value.props.direction === 'down' ? 'top' : 'bottom'
}
emit('open')

8
src/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: weisheng
* @Date: 2023-12-14 11:21:58
* @LastEditTime: 2024-01-03 21:50:52
* @LastEditTime: 2024-01-21 20:59:59
* @LastEditors: weisheng
* @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue
@ -61,15 +61,15 @@ const props = withDefaults(defineProps<Props>(), {
const { parent: form, index } = useParent(FORM_KEY)
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
})
const border = computed(() => {
if (index.value > 0 && form && form.props.border) {
if (index.value > 0 && form.value && form.value.props.border) {
return true
} else {
return false

40
src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue
View File

@ -90,8 +90,8 @@ const border = ref<boolean>(true)
const { parent: grid } = useParent(GRID_KEY)
const childCount = computed(() => {
if (isDef(grid) && isDef(grid.children)) {
return grid.children.length
if (isDef(grid.value) && isDef(grid.value.children)) {
return grid.value.children.length
} else {
return 0
}
@ -102,12 +102,14 @@ const emit = defineEmits(['itemclick'])
watch(
() => childCount.value,
() => {
if (!grid) return
const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / (childCount.value || 1) + '%'
if (!grid.value) return
const width = grid.value.props.column ? 100 / grid.value.props.column + '%' : 100 / (childCount.value || 1) + '%'
// 单独定义间隔
const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
const gutterStyle = grid.value.props.gutter
? `padding:${grid.value.props.gutter}px ${grid.value.props.gutter}px 0 0; background-color: transparent;`
: ''
// 单独定义正方形
const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
const squareStyle = grid.value.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
style.value = `width: ${width}; ${squareStyle || gutterStyle}`
},
{
@ -121,27 +123,29 @@ onMounted(() => {
})
function init() {
if (!grid) return
const children = grid.children
const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / children.length + '%'
if (!grid.value) return
const children = grid.value.children
const width = grid.value.props.column ? 100 / grid.value.props.column + '%' : 100 / children.length + '%'
// 单独定义间隔
const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
const gutterStyle = grid.value.props.gutter
? `padding:${grid.value.props.gutter}px ${grid.value.props.gutter}px 0 0; background-color: transparent;`
: ''
// 单独定义正方形
const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
const squareStyle = grid.value.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
// 间隔+正方形
gutterContentStyle.value =
grid.props.gutter && grid.props.square
? `right: ${grid.props.gutter}px; bottom:${grid.props.gutter}px;height: auto; background-color: ${grid.props.bgColor}`
: `background-color: ${grid.props.bgColor}`
grid.value.props.gutter && grid.value.props.square
? `right: ${grid.value.props.gutter}px; bottom:${grid.value.props.gutter}px;height: auto; background-color: ${grid.value.props.bgColor}`
: `background-color: ${grid.value.props.bgColor}`
border.value = Boolean(grid.props.border)
square.value = Boolean(grid.props.square)
gutter.value = Number(grid.props.gutter)
border.value = Boolean(grid.value.props.border)
square.value = Boolean(grid.value.props.square)
gutter.value = Number(grid.value.props.gutter)
style.value = `width: ${width}; ${squareStyle || gutterStyle}`
}
function click() {
if (grid && !grid.props.clickable) return
if (grid.value && !grid.value.props.clickable) return
const { url, linkType } = props
emit('itemclick')
if (url) {

8
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
View File

@ -206,8 +206,8 @@ watch(
const { parent: form } = useParent(FORM_KEY)
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -216,8 +216,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)

8
src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
View File

@ -288,8 +288,8 @@ const { parent: form } = useParent(FORM_KEY)
// 表单校验错误信息
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -298,8 +298,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)

32
src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue
View File

@ -58,56 +58,56 @@ const props = withDefaults(defineProps<Props>(), {
const { parent: radioGroup } = useParent(RADIO_GROUP_KEY)
const isChecked = computed(() => {
if (radioGroup) {
return props.value === radioGroup.props.modelValue
if (radioGroup.value) {
return props.value === radioGroup.value.props.modelValue
} else {
return false
}
})
const innerShape = computed(() => {
if (!props.shape && radioGroup && radioGroup.props.shape) {
return radioGroup.props.shape
if (!props.shape && radioGroup.value && radioGroup.value.props.shape) {
return radioGroup.value.props.shape
} else {
return props.shape
}
})
const innerCheckedColor = computed(() => {
if (!props.checkedColor && radioGroup && radioGroup.props.checkedColor) {
return radioGroup.props.checkedColor
if (!props.checkedColor && radioGroup.value && radioGroup.value.props.checkedColor) {
return radioGroup.value.props.checkedColor
} else {
return props.checkedColor
}
})
const innerDisabled = computed(() => {
if ((props.disabled === null || props.disabled === undefined) && radioGroup && radioGroup.props.disabled) {
return radioGroup.props.disabled
if ((props.disabled === null || props.disabled === undefined) && radioGroup.value && radioGroup.value.props.disabled) {
return radioGroup.value.props.disabled
} else {
return props.disabled
}
})
const innerInline = computed(() => {
if ((props.inline === null || props.inline === undefined) && radioGroup && radioGroup.props.inline) {
return radioGroup.props.inline
if ((props.inline === null || props.inline === undefined) && radioGroup.value && radioGroup.value.props.inline) {
return radioGroup.value.props.inline
} else {
return props.inline
}
})
const innerSize = computed(() => {
if (!props.size && radioGroup && radioGroup.props.size) {
return radioGroup.props.size
if (!props.size && radioGroup.value && radioGroup.value.props.size) {
return radioGroup.value.props.size
} else {
return props.size
}
})
const innerCell = computed(() => {
if ((props.cell === null || props.cell === undefined) && radioGroup && radioGroup.props.cell) {
return radioGroup.props.cell
if ((props.cell === null || props.cell === undefined) && radioGroup.value && radioGroup.value.props.cell) {
return radioGroup.value.props.cell
} else {
return props.cell
}
@ -126,8 +126,8 @@ watch(
*/
function handleClick() {
const { value } = props
if (!innerDisabled.value && radioGroup && value !== null && value !== undefined) {
radioGroup.updateValue(value)
if (!innerDisabled.value && radioGroup.value && value !== null && value !== undefined) {
radioGroup.value.updateValue(value)
}
}
</script>

8
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
View File

@ -264,8 +264,8 @@ const { parent: form } = useParent(FORM_KEY)
// 表单校验错误信息
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -274,8 +274,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)

20
src/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue
View File

@ -79,7 +79,7 @@ const { parent: sidebar } = useParent(SIDEBAR_KEY)
const active = computed(() => {
let active: boolean = false
if (sidebar && sidebar.props.modelValue === props.value) {
if (sidebar.value && sidebar.value.props.modelValue === props.value) {
active = true
}
return active
@ -87,12 +87,12 @@ const active = computed(() => {
const prefix = computed(() => {
let prefix: boolean = false
if (sidebar) {
let activeIndex: number = sidebar.children.findIndex((c: any) => {
return c.value === sidebar.props.modelValue
if (sidebar.value) {
let activeIndex: number = sidebar.value.children.findIndex((c: any) => {
return c.value === sidebar.value!.props.modelValue
})
let currentIndex: number = sidebar.children.findIndex((c: any) => {
let currentIndex: number = sidebar.value.children.findIndex((c: any) => {
return c.value === props.value
})
@ -105,12 +105,12 @@ const prefix = computed(() => {
const suffix = computed(() => {
let suffix: boolean = false
if (sidebar) {
let activeIndex: number = sidebar.children.findIndex((c: any) => {
return c.value === sidebar.props.modelValue
if (sidebar.value) {
let activeIndex: number = sidebar.value.children.findIndex((c: any) => {
return c.value === sidebar.value!.props.modelValue
})
let currentIndex: number = sidebar.children.findIndex((c: any) => {
let currentIndex: number = sidebar.value.children.findIndex((c: any) => {
return c.value === props.value
})
@ -125,7 +125,7 @@ function handleClick() {
if (props.disabled) {
return
}
sidebar && sidebar.setChange(props.value, props.label)
sidebar.value && sidebar.value.setChange(props.value, props.label)
}
</script>

26
src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
View File

@ -83,8 +83,8 @@ const styles = computed(() => {
})
const canAlignCenter = computed(() => {
if (isDef(steps)) {
const { vertical, alignCenter } = steps.props
if (isDef(steps.value)) {
const { vertical, alignCenter } = steps.value.props
return Boolean(!vertical && alignCenter)
} else {
return false
@ -92,35 +92,35 @@ const canAlignCenter = computed(() => {
})
const vertical = computed(() => {
if (isDef(steps)) {
return Boolean(steps.props.vertical)
if (isDef(steps.value)) {
return Boolean(steps.value.props.vertical)
} else {
return false
}
})
const dot = computed(() => {
if (isDef(steps)) {
return Boolean(steps.props.dot)
if (isDef(steps.value)) {
return Boolean(steps.value.props.dot)
} else {
return false
}
})
const childrenLength = computed(() => {
if (isDef(steps)) {
return Number(steps.children.length)
if (isDef(steps.value)) {
return Number(steps.value.children.length)
} else {
return 0
}
})
function getStyles() {
if (steps) {
const { vertical, space } = steps.props
if (steps.value) {
const { vertical, space } = steps.value.props
if (vertical) {
return space ? `height: ${space}` : ''
} else {
return `width: ${space || 100 / steps.children.length + '%'}`
return `width: ${space || 100 / steps.value.children.length + '%'}`
}
} else {
return ''
@ -131,8 +131,8 @@ function getCurrentStatus(index: number) {
return props.status
}
if (steps) {
const { active } = steps.props
if (steps.value) {
const { active } = steps.value.props
if (Number(active) > index) {
return 'finished'
} else if (Number(active) === index) {

6
src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue
View File

@ -44,7 +44,7 @@ const { parent: tabs, index } = useParent(TABS_KEY)
// 激活项下标
const activeIndex = computed(() => {
return isDef(tabs) ? tabs.state.activeIndex : 0
return isDef(tabs.value) ? tabs.value.state.activeIndex : 0
})
watch(
@ -85,8 +85,8 @@ function checkName(self) {
if (myName === undefined || myName === null || myName === '') {
return
}
tabs &&
tabs.children.forEach((child: any) => {
tabs.value &&
tabs.value.children.forEach((child: any) => {
if (child.$.uid !== self.$.uid && child.name === myName) {
console.error(`The tab's bound value: ${myName} has been used`)
}

17
src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue
View File

@ -74,12 +74,12 @@ const { parent: tabbar, index } = useParent(TABBAR_KEY)
const textStyle = computed(() => {
const style: CSSProperties = {}
if (tabbar) {
if (active.value && tabbar.props.activeColor) {
style['color'] = tabbar.props.activeColor
if (tabbar.value) {
if (active.value && tabbar.value.props.activeColor) {
style['color'] = tabbar.value.props.activeColor
}
if (!active.value && tabbar.props.inactiveColor) {
style['color'] = tabbar.props.inactiveColor
if (!active.value && tabbar.value.props.inactiveColor) {
style['color'] = tabbar.value.props.inactiveColor
}
}
@ -88,8 +88,9 @@ const textStyle = computed(() => {
const active = computed(() => {
const name = isDef(props.name) ? props.name : index.value
if (tabbar) {
if (tabbar.props.modelValue === name) {
if (tabbar.value) {
if (tabbar.value.props.modelValue === name) {
return true
} else {
return false
@ -104,7 +105,7 @@ const active = computed(() => {
*/
function handleClick() {
const name: string | number = isDef(props.name) ? props.name : index.value
tabbar && tabbar.setChange({ name })
tabbar.value && tabbar.value.setChange({ name })
}
</script>
<style lang="scss" scoped>

8
src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
View File

@ -200,8 +200,8 @@ const { parent: form } = useParent(FORM_KEY)
// 表单校验错误信息
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
return form.value.errorMessages[props.prop]
} else {
return ''
}
@ -210,8 +210,8 @@ const errorMessage = computed(() => {
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
if (form.value && form.value.props.rules) {
const rules = form.value.props.rules
for (const key in rules) {
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
formRequired = rules[key].some((rule: FormItemRule) => rule.required)