From 1de8d16cd0d1bf7fe2554be44cfc948d804d4c4e Mon Sep 17 00:00:00 2001 From: xpz2018 <107107461@qq.com> Date: Thu, 21 Jan 2021 10:30:47 +0800 Subject: [PATCH] no message --- components/accordion-group/index.js | 112 ++++++++++++++++++++++++++ components/accordion-group/index.json | 6 ++ components/accordion-group/index.wxml | 3 + components/accordion-group/index.wxss | 4 + components/accordion/index.js | 84 +++++++++++++++++++ components/accordion/index.json | 3 + components/accordion/index.wxml | 18 +++++ components/accordion/index.wxss | 76 +++++++++++++++++ 8 files changed, 306 insertions(+) create mode 100644 components/accordion-group/index.js create mode 100644 components/accordion-group/index.json create mode 100644 components/accordion-group/index.wxml create mode 100644 components/accordion-group/index.wxss create mode 100644 components/accordion/index.js create mode 100644 components/accordion/index.json create mode 100644 components/accordion/index.wxml create mode 100644 components/accordion/index.wxss diff --git a/components/accordion-group/index.js b/components/accordion-group/index.js new file mode 100644 index 0000000..60eae4f --- /dev/null +++ b/components/accordion-group/index.js @@ -0,0 +1,112 @@ +import baseComponent from '../helpers/baseComponent' + +baseComponent({ + relations: { + '../accordion/index': { + type: 'child', + observer() { + this.debounce(this.updated) + }, + }, + }, + properties: { + prefixCls: { + type: String, + value: 'wux-accordion-group', + }, + cellGroupPrefixCls: { + type: String, + value: 'wux-cell-group', + }, + defaultCurrent: { + type: Array, + value: [], + }, + current: { + type: Array, + value: [], + observer(newVal) { + if (this.data.controlled) { + this.updated(newVal) + } + }, + }, + controlled: { + type: Boolean, + value: false, + }, + accordion: { + type: Boolean, + value: false, + }, + title: { + type: String, + value: '', + }, + label: { + type: String, + value: '', + }, + }, + data: { + activeKey: '', + keys: [], + }, + methods: { + updated(activeKey = this.data.activeKey) { + if (this.data.activeKey !== activeKey) { + this.setData({ activeKey }) + } + + this.changeCurrent(activeKey) + }, + changeCurrent(activeKey) { + const elements = this.getRelationNodes('../accordion/index') + + if (elements.length > 0) { + elements.forEach((element, index) => { + const key = element.data.key || String(index) + const current = this.data.accordion ? activeKey[0] === key : activeKey.indexOf(key) !== -1 + + element.changeCurrent(current, key) + }) + } + + if (this.data.keys.length !== elements.length) { + this.setData({ + keys: elements.map((element) => element.data), + }) + } + }, + emitEvent(key) { + this.triggerEvent('change', { + key, + keys: this.data.keys, + }) + }, + setActiveKey(activeKey) { + if (!this.data.controlled) { + this.updated(activeKey) + } + + this.emitEvent(this.data.accordion ? activeKey[0] : activeKey) + }, + onClickItem(key) { + let activeKey = [...this.data.activeKey] + + if (this.data.accordion) { + activeKey = activeKey[0] === key ? [] : [key] + } else { + activeKey = activeKey.indexOf(key) !== -1 ? activeKey.filter((n) => n !== key) : [...activeKey, key] + } + + this.setActiveKey(activeKey) + }, + }, + ready() { + const { defaultCurrent, current, controlled } = this.data + const activeKey = controlled ? current : defaultCurrent + + this.updated(activeKey) + }, +}) diff --git a/components/accordion-group/index.json b/components/accordion-group/index.json new file mode 100644 index 0000000..d83e2e6 --- /dev/null +++ b/components/accordion-group/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "wux-cell-group": "../cell-group/index" + } +} \ No newline at end of file diff --git a/components/accordion-group/index.wxml b/components/accordion-group/index.wxml new file mode 100644 index 0000000..6c845d0 --- /dev/null +++ b/components/accordion-group/index.wxml @@ -0,0 +1,3 @@ + + + diff --git a/components/accordion-group/index.wxss b/components/accordion-group/index.wxss new file mode 100644 index 0000000..f8a19e0 --- /dev/null +++ b/components/accordion-group/index.wxss @@ -0,0 +1,4 @@ +.wux-accordion-group { + position: relative; + border: none +} \ No newline at end of file diff --git a/components/accordion/index.js b/components/accordion/index.js new file mode 100644 index 0000000..aa792ed --- /dev/null +++ b/components/accordion/index.js @@ -0,0 +1,84 @@ +import baseComponent from '../helpers/baseComponent' +import classNames from '../helpers/classNames' + +baseComponent({ + relations: { + '../accordion-group/index': { + type: 'parent', + }, + }, + properties: { + prefixCls: { + type: String, + value: 'wux-accordion', + }, + key: { + type: String, + value: '', + }, + thumb: { + type: String, + value: '', + }, + title: { + type: String, + value: '', + }, + content: { + type: String, + value: '', + }, + disabled: { + type: Boolean, + value: false, + }, + showArrow: { + type: Boolean, + value: true, + }, + }, + data: { + current: false, + index: '0', + }, + computed: { + classes: ['prefixCls, current, disabled', function(prefixCls, current, disabled) { + const wrap = classNames(prefixCls, { + [`${prefixCls}--current`]: current, + [`${prefixCls}--disabled`]: disabled, + }) + const hd = `${prefixCls}__hd` + const thumb = `${prefixCls}__thumb` + const title = `${prefixCls}__title` + const arrow = `${prefixCls}__arrow` + const bd = `${prefixCls}__bd` + const content = `${prefixCls}__content` + + return { + wrap, + hd, + thumb, + title, + arrow, + bd, + content, + } + }], + }, + methods: { + changeCurrent(current, index) { + this.setData({ + current, + index, + }) + }, + onTap() { + const { index, disabled } = this.data + const parent = this.getRelationNodes('../accordion-group/index')[0] + + if (disabled || !parent) return + + parent.onClickItem(index) + }, + }, +}) diff --git a/components/accordion/index.json b/components/accordion/index.json new file mode 100644 index 0000000..fba482a --- /dev/null +++ b/components/accordion/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/components/accordion/index.wxml b/components/accordion/index.wxml new file mode 100644 index 0000000..8810ea1 --- /dev/null +++ b/components/accordion/index.wxml @@ -0,0 +1,18 @@ + + + + + + + {{ title }} + + + + + + + + {{ content }} + + + diff --git a/components/accordion/index.wxss b/components/accordion/index.wxss new file mode 100644 index 0000000..3aa6965 --- /dev/null +++ b/components/accordion/index.wxss @@ -0,0 +1,76 @@ +.wux-accordion__hd { + position: relative; + padding: 20rpx 30rpx; + color: #000; + background-color: #fff; + box-sizing: border-box; + padding-right: 60rpx; + width: auto; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center +} +.wux-accordion__hd::after { + content: " "; + position: absolute; + bottom: 0; + right: 0; + height: 1PX; + border-bottom: 1PX solid #d9d9d9; + color: #d9d9d9; + transform-origin: 0 100%; + transform: scaleY(.5); + left: 0 +} +.wux-accordion__thumb { + width: 40rpx; + height: 40rpx; + display: block; + margin-right: 10rpx +} +.wux-accordion__arrow { + display: inline-block; + width: 30rpx; + height: 30rpx; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%200L0%202l11.5%2011L0%2024l2%202%2014-13z%22%20fill%3D%22%23c7c7cc%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: 50% 50%; + transform: rotate(90deg); + transition: transform .2s ease; + position: absolute; + display: block; + top: 30rpx; + right: 30rpx +} +.wux-accordion--current > .wux-accordion__hd > .wux-accordion__arrow { + transform: rotate(270deg) +} +.wux-accordion__bd { + display: none; + overflow: hidden; + background: #fff; + font-size: 30rpx; + color: rgba(0,0,0,.85); + position: relative; + padding: 30rpx +} +.wux-accordion__bd::after { + content: " "; + position: absolute; + bottom: 0; + right: 0; + height: 1PX; + border-bottom: 1PX solid #d9d9d9; + color: #d9d9d9; + transform-origin: 0 100%; + transform: scaleY(.5); + left: 0 +} +.wux-accordion--current > .wux-accordion__bd { + display: block +} \ No newline at end of file