Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 349
Star 2
Fork 7
H
hello-uvue
提交 2a022b47 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

refactor: 首页优化样式

上级 02343201
隐藏空白更改
内联 并排
Showing with 256 addition and 63 deletion
components/uni-collapse-item/uni-collapse-item.vue 0 → 100644
浏览文件 @ 2a022b47
<template>
<view class="uni-collapse-item">
<view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
</view>
<view ref="boxRef" class="uni-collapse-item__content">
<view ref="contentRef" class="uni-collapse-item__content-box">
<slot></slot>
</view>
</view>
</view>
</template>
<script lang="uts">
import { $dispatch } from './util.uts'
export default {
name: "UniCollapseItem",
props: {
// 列表标题
title: {
type: String,
default: ''
},
open: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
height: 0,
is_open: this.open as boolean,
boxNode: null as Element | null,
contentNode: null as Element | null,
};
},
watch: {
open(value: boolean) {
// this.is_open = value
if (this.boxNode != null) {
this.openCollapse(value)
}
}
},
created() {
$dispatch(this, 'UniCollapse', 'init', this)
},
mounted() {
this.boxNode = this.$refs['boxRef'] as Element;
this.contentNode = this.$refs['contentRef'] as Element;
// this.openCollapse(this.open)
},
methods: {
// 开启或关闭折叠面板
openCollapse(open: boolean) {
if (this.disabled) return
// 关闭其他已打开
$dispatch(this, 'UniCollapse', 'cloceAll')
this.is_open = open
this.openOrClose(open)
},
openOrClose(open: boolean) {
const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none';
const opacity = open ? 1 : 0
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide);
this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('opacity', opacity);
})
}
}
}
</script>
<style scoped>
.uni-collapse-item {
background-color: #fff;
}
.uni-collapse-item__title {
flex-direction: row;
align-items: center;
padding: 12px;
background-color: #fff;
}
.down_arrow {
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
margin-top: -3px;
transition-property: transform;
transition-duration: 0.2s;
}
.down_arrow--active {
transform: rotate(-135deg);
margin-top: 0px;
}
.uni-collapse-item__title-text {
flex: 1;
color: #000;
font-size: 14px;
font-weight: 400;
}
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.is-disabled {
color: #999;
}
.uni-collapse-item__content {
display: none;
position: relative;
}
.uni-collapse-item__content-box {
width: 100%;
/* transition-property: transform , opacity;
transition-duration: 0.2s; */
transform: translateY(-100%);
opacity: 0;
}
</style>
components/uni-collapse-item/util.uts 0 → 100644
浏览文件 @ 2a022b47
// 查找父组件实例
export function $dispatch(
context : ComponentPublicInstance,
componentName : string,
eventName : string,
...params : any[]
) {
let parent = context.$parent
let name = parent?.$options?.name
while (parent != null && (name == null || componentName != name)) {
parent = parent.$parent
if (parent != null) {
name = parent.$options.name
}
}
if (parent != null) {
parent.$callMethod(eventName, ...params)
}
}
components/uni-collapse/uni-collapse.vue 0 → 100644
浏览文件 @ 2a022b47
<template>
<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
<view>
<slot></slot>
</view>
</template>
<script lang="uts">
export default {
name: "UniCollapse",
props: {
// 是否开启手风琴效果
accordion: {
type: Boolean,
default: true
}
},
data() {
return {
child_nodes: [] as Array<ComponentPublicInstance>
};
},
methods: {
init(child: ComponentPublicInstance) {
this.child_nodes.push(child)
},
// 关闭所有
cloceAll() {
// 开启手风琴效果才回关闭其他
if (this.accordion && this.child_nodes.length > 0) {
this.child_nodes.forEach((item) => {
const is_open = item.$data['is_open'] as boolean
// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
if (is_open) {
item.$data['is_open'] = false
item.$callMethod('openOrClose', false)
}
})
}
}
}
}
</script>
<style>
</style>
pages/index.uvue
浏览文件 @ 2a022b47
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<!-- #endif -->
<view class="uni-container">
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" @click="triggerCollapse(item, index)">
<text class="uni-panel-text">{{ item.name }}</text>
<!-- <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.open ? '&#xe581;' : '&#xe470;'}}</text> -->
</view>
<view class="uni-panel-c" v-if="item.open">
<view
class="uni-navigate-item"
v-for="page in item.pages"
:key="page.name"
@click="goDetailPage(item.id, page)">
<text
class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> -->
</view>
</view>
</view>
<uni-collapse>
<template v-for="item in list" :key="item.id">
<uni-collapse-item :title="item.name" class="item">
<view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(item.id, page)">
<text class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<view class="down_arrow"></view>
</view>
</uni-collapse-item>
</template>
</uni-collapse>
</view>
<!-- #ifdef APP -->
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
......@@ -61,25 +53,25 @@
url: 'index',
enable: true,
},
{
name: 'globalProperties',
url: 'globalProperties',
enable: true,
},
{
name: 'globalProperties',
url: 'globalProperties',
enable: true,
},
] as PageItem[],
},
{
id: 'built-in-component',
name: '内置组件',
open: false,
pages: [
{
name: 'keepAlive',
url: 'keep-alive',
enable: true,
},
] as PageItem[],
},
{
id: 'built-in-component',
name: '内置组件',
open: false,
pages: [
{
name: 'keepAlive',
url: 'keep-alive',
enable: true,
},
] as PageItem[],
},
{
id: 'lifecycle',
name: '生命周期',
......@@ -425,11 +417,11 @@
url: 'extends',
enable: false,
},
{
name: 'setup',
url: 'setup',
enable: true,
}
{
name: 'setup',
url: 'setup',
enable: true,
}
] as PageItem[],
},
{
......@@ -441,7 +433,7 @@
name: '嵌套组件通信',
url: 'nested-component-communication',
enable: true,
},{
}, {
name: '自定义组件中使用 class 定制另一个自定义组件根节点样式',
url: 'set-custom-child-component-root-node-class',
enable: true,
......@@ -487,22 +479,18 @@
</script>
<style>
.arrow {
width: 8px;
height: 8px;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-up {
transform: rotate(45deg);
}
.item {
margin-bottom: 12px;
}
.arrow-down {
transform: rotate(-135deg);
}
</style>
.down_arrow {
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
margin-top: -3px;
transition-property: transform;
transition-duration: 0.2s;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或