123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <template>
- <view class="uni-collapse"><slot /></view>
- </template>
- <script>
- export default {
- name: 'UniCollapse',
- props: {
- accordion: {
- // 是否开启手风琴效果
- type: [Boolean, String],
- default: false
- }
- },
- data () {
- return {}
- },
- provide () {
- return {
- collapse: this
- }
- },
- created () {
- this.childrens = []
- },
- methods: {
- onChange () {
- let activeItem = []
- this.childrens.forEach((vm, index) => {
- if (vm.isOpen) {
- activeItem.push(vm.nameSync)
- }
- })
- this.$emit('change', activeItem)
- }
- }
- }
- </script>
- <style lang="scss">
- .uni-collapse {
- background-color: $uni-bg-color;
- position: relative;
- width: 100%;
- display: flex;
- flex-direction: column;
- &:after {
- position: absolute;
- z-index: 10;
- right: 0;
- bottom: 0;
- left: 0;
- height: 0px;
- content: '';
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- background-color: $uni-border-color;
- }
- &:before {
- position: absolute;
- z-index: 10;
- right: 0;
- top: 0;
- left: 0;
- height: 0px;
- content: '';
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- background-color: $uni-border-color;
- }
- }
- </style>
|