106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
<template>
|
||
<view class="item-doc" :style="{ height: headHeight + 'px' }">
|
||
<view class="item" :style="{ height: headHeight + 'px' }">
|
||
<view class="left">
|
||
<image v-if="options.icon.indexOf('http') != -1" :src="options.icon" mode="aspectFit" class="icon"></image>
|
||
<image v-else :src="`/static/applocation/${options.icon}.png`" mode="aspectFit" class="icon"></image>
|
||
|
||
<view class="info">
|
||
<view class="title">
|
||
<text class="t">{{ options.name }}</text>
|
||
</view>
|
||
<view class="intro">
|
||
<text class="t">{{ options.intro }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right" v-if="showSwitch">
|
||
<!-- 关键修复：删掉错误的 @change 绑定，defineModel 已自动处理双向绑定 -->
|
||
<u-switch :active-value="1" :inactive-value="0" v-model="isOpen"></u-switch>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, nextTick } from 'vue';
|
||
|
||
const props = defineProps({
|
||
options: {
|
||
type: Object,
|
||
default: () => ({
|
||
// 注意：对象/数组默认值推荐用函数，避免引用共享
|
||
name: '标题',
|
||
intro: '说明',
|
||
icon: 'xszk'
|
||
})
|
||
},
|
||
showSwitch: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
});
|
||
|
||
const headHeight = ref(70);
|
||
|
||
// defineModel 是 Vue3.4+ 语法糖，自动实现 v-model:isOpen 的双向绑定
|
||
const isOpen = defineModel('isOpen', {
|
||
type: [Boolean, String, Number],
|
||
default: 0
|
||
});
|
||
|
||
// 声明自定义 emit 事件（仅在 script setup 内使用）
|
||
const emits = defineEmits(['load']);
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
emits('load', { height: headHeight.value });
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.item-doc {
|
||
width: 100%;
|
||
}
|
||
.item {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
padding: 20upx 28upx;
|
||
.left {
|
||
display: flex;
|
||
.icon {
|
||
$size: 80upx;
|
||
width: $size;
|
||
height: $size;
|
||
flex-shrink: 0;
|
||
}
|
||
.info {
|
||
display: flex;
|
||
padding-left: 20upx;
|
||
flex-direction: column;
|
||
.title {
|
||
margin-top: -4upx;
|
||
.t {
|
||
font-size: 28upx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.intro {
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|