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.
70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
6 months ago
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="g_border_e g_w_all" v-for="(item, index) in list" :key="item.id">
|
||
|
|
<view class="g_bg_f_5 g_p_12 g_flex_row_between flex_center" :class="item.open ? '' : ''" @click="triggerCollapse(index, item.id)">
|
||
|
|
<text class="">{{ item.name }}</text>
|
||
|
|
<i class="iconfont icon-zhankai" :style="{ transform: item.open ? 'rotate(180deg)' : '' }"></i>
|
||
|
|
</view>
|
||
|
|
<view class="" v-if="item.open">
|
||
|
|
<view class="g_border_e_b g_p_12 g_flex_row_between flex_center" v-for="(item2, key) in item.pages" :key="key" @click="goDetailPage(item.id, item2)">
|
||
|
|
<text class="">{{ item2.name ? item2.name : item2 }}</text>
|
||
|
|
<i class="iconfont icon-gengduo11"></i>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
id: "form",
|
||
|
|
name: "表单组件",
|
||
|
|
open: false,
|
||
|
|
pages: ["button"],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
uni.navigateTo({
|
||
|
|
url: url,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: e.url,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.content {
|
||
|
|
padding: 10px 0;
|
||
|
|
width: calc(100vw - 20px);
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
</style>
|