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

准备


 

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>

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐