uniapp-uview-plus
·
uview-plus使用难免存在问题,以下出现的可能情况,以及解决方案
-
up-image的使用
图片地址问题:官网强烈建议使用绝对或者网络路径
//方式一:绝对路径
<up-image src="/assets/item0.png">
<template #error>
<image src="@/static/images/404.png"/>
</template>
</up-image>
//方式二:无法@直接使用相对路径,需要动态绑定转换为绝对路径
<up-image :src="bgImg">
<template #error>
<image src="@/static/images/404.png"/>
</template>
</up-image>
//方式三:网络路径
<up-image src="www.com/images.png">
<template #error>
<image src="@/static/images/404.png"/>
</template>
</up-image>
<script setup>
import bgImg from '@/assets/images.png';
</script>
-
up-picker的使用
在 up-picker 组件中,先关闭再重新打开并设置 defaultIndex 时,初始状态没有生效。这通常是由于 Vue 的响应式更新延迟 或 组件内部状态未正确重置 导致的。以下是详细分析和解决方案
可以通过修改 key 强制重新渲染组件:
<up-picker
:closeOnClickOverlay="true"
@close="close('lay')"
:key="pickerKey"
:show="showRegion"
ref="uPickerRef"
:columns="columns"
:defaultIndex="defaultIndex"
keyName="name"
valueName="id"
@change="changeHandler"
@confirm="confirm"
@cancel="close"
></up-picker>
JS
准备
- 资源china_city_data
- import { chinaMap } from '@Sub/address';
import area from './china_city_data';
// 列表
export const chinaMap = () => {
return area;
};
<script setup>
// 地区
const pickerKey = ref(0);
const showRegion = ref(false);
const uPickerRef = ref(null);
const columns = ref([]);
const defaultIndex = ref([0, 0, 0]);
let lay = null;
import { chinaMap } from '@Sub/address';
const { chinaMapData } = chinaMap();
/** 关闭方法 */
const close = (e) => {
lay = e;
if (lay) return; //点击遮罩关闭功能
showRegion.value = false;
};
/** 确认方法 */
const confirm = (e) => {
form.value.region = e.value.join(' ');
close();
};
/**
* 地区选择器列改变事件
* @param {Object} e 事件对象
*/
const changeHandler = (e) => {
const { columnIndex, index, indexs } = e;
if (columnIndex === 0) {
const children1 = chinaMapData[index].children.map((e) => {
return e.name;
});
uPickerRef.value.setColumnValues(1, children1);
const children2 = chinaMapData[index].children[0].children.map((e) => {
return e.name;
});
uPickerRef.value.setColumnValues(2, children2);
}
if (columnIndex === 1) {
// 更新县列
const children3 = chinaMapData[indexs[0]].children[indexs[1]].children.map(
(e) => {
return e.name;
}
);
uPickerRef.value.setColumnValues(2, children3);
}
};
</script>
更多推荐
所有评论(0)