You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.9 KiB
Vue
100 lines
1.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="" v-for="(item, index) in list" :key="item.id">
|
|
<view class="g_bg_ed" :class="item.open ? '' : ''" @click="triggerCollapse(index, item.id)">
|
|
<text class="">{{ item.name }}</text>
|
|
</view>
|
|
<view class="" v-if="item.open">
|
|
<view :class="{ 'left-win-active': leftWinActive === (item2.url ? item2.url.split('/')[3] : item2) && hasLeftWin }" class="" v-for="(item2, key) in item.pages" :key="key" @click="goDetailPage(item.id, item2)">
|
|
<text class="">{{ item2.name ? item2.name : item2 }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [
|
|
{
|
|
id: "form",
|
|
name: "表单组件",
|
|
open: false,
|
|
pages: ["button", "checkbox", "form", "input", "label", "picker", "picker-view", "radio", "slider", "switch", "textarea"],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
triggerCollapse(e, id) {
|
|
if (!this.list[e].pages) {
|
|
this.goDetailPage("", this.list[e].url);
|
|
return;
|
|
}
|
|
for (var i = 0; i < this.list.length; ++i) {
|
|
if (e === i) {
|
|
this.list[i].open = !this.list[i].open;
|
|
} else {
|
|
this.list[i].open = false;
|
|
}
|
|
}
|
|
},
|
|
goDetailPage(panel, e) {
|
|
if (typeof e === "string") {
|
|
const url = "/pages/component/" + e + "/" + e;
|
|
if (this.hasLeftWin) {
|
|
uni.reLaunch({
|
|
url: url,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: url,
|
|
});
|
|
}
|
|
} else {
|
|
if (this.hasLeftWin) {
|
|
uni.reLaunch({
|
|
url: e.url,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: e.url,
|
|
});
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo {
|
|
height: 200rpx;
|
|
width: 200rpx;
|
|
margin-top: 200rpx;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
.text-area {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: #8f8f94;
|
|
}
|
|
</style>
|