feat: layout组件开发

src/config.js

@@ -96,6 +96,24 @@ module.exports = {
           show: false,
           desc: '折叠面板-item',
           author: 'Ymm0008'
+        },
+        {
+          name: 'Layout',
+          sort: 4,
+          cName: '布局',
+          type: 'component',
+          show: true,
+          desc: '简便地创建布局',
+          author: 'undo'
+        },
+        {
+          name: 'col',
+          sort: 5,
+          cName: '布局-Col',
+          type: 'component',
+          show: false,
+          desc: '布局组件Col',
+          author: 'undo'
         }
       ]
     },

src/packages/col/index.scss

@@ -0,0 +1,15 @@
+.nut-col {
+  float: left;
+  box-sizing: border-box;
+  word-break: break-all;
+}
+
+@for $i from 1 through 24 {
+  .nut-col-offset-#{$i} {
+    margin-left: 100/24 * $i * 1%;
+  }
+
+  .nut-col-#{$i} {
+    width: 100/24 * $i * 1%;
+  }
+}

src/packages/col/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="nut-col" :class="classObject" :style="styleObj">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts">
+import { toRefs, watch, reactive, inject } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('col');
+
+export default create({
+  props: {
+    span: {
+      type: [String, Number],
+      default: '24'
+    },
+    offset: {
+      type: [String, Number],
+      default: '0'
+    }
+  },
+  setup(props, { emit, slots }) {
+    const gutter = inject('gutter');
+    const { offset, span } = toRefs(props);
+    const classObject = reactive({
+      ['nut-col-' + props.span]: true,
+      ['nut-col-offset-' + props.offset]: true
+    });
+    const styleObj = reactive({
+      'padding-left': gutter + 'px',
+      'padding-right': gutter + 'px'
+    });
+    return {
+      classObject,
+      styleObj
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/packages/layout/demo.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="demo">
+    <h2>基础布局</h2>
+    <div class="box-item">
+      <nut-row>
+        <nut-col :span="12">
+          <div class="flex-content">span:12</div>
+        </nut-col>
+        <nut-col :span="12">
+          <div class="flex-content flex-content-light">span:12</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row>
+        <nut-col :span="8">
+          <div class="flex-content">span:8</div>
+        </nut-col>
+        <nut-col :span="8">
+          <div class="flex-content flex-content-light">span:8</div>
+        </nut-col>
+        <nut-col :span="8">
+          <div class="flex-content">span:8</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row>
+        <nut-col :span="6">
+          <div class="flex-content">span:6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">span:6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">span:6</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row>
+        <nut-col :span="4">
+          <div class="flex-content">span:4</div>
+        </nut-col>
+        <nut-col :span="4">
+          <div class="flex-content flex-content-light">span:4</div>
+        </nut-col>
+        <nut-col :span="4">
+          <div class="flex-content">span:4</div>
+        </nut-col>
+        <nut-col :span="4">
+          <div class="flex-content flex-content-light">span:4</div>
+        </nut-col>
+        <nut-col :span="4">
+          <div class="flex-content">span:4</div>
+        </nut-col>
+        <nut-col :span="4">
+          <div class="flex-content flex-content-light">span:4</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <h2>设置元素间距</h2>
+    <div class="box-item">
+      <nut-row :gutter="10">
+        <nut-col :span="6">
+          <div class="flex-content">span:6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">span:6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">span:6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">span:6</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <h2>Flex布局</h2>
+    <h2>wrap（是否换行）</h2>
+    <div class="box-item">
+      <nut-row type="flex" flexWrap="nowrap" :gutter="10">
+        <nut-col :span="6">
+          <div class="flex-content">1</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">2</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">3</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">4</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">5</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">7</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" flexWrap="wrap" :gutter="10">
+        <nut-col :span="6">
+          <div class="flex-content">1</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">2</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">3</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">4</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">5</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">7</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" flexWrap="reverse" :gutter="10">
+        <nut-col :span="6">
+          <div class="flex-content">1</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">2</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">3</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">4</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">5</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">7</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <h2>justify（主轴方向）</h2>
+    <div class="box-item">
+      <nut-row type="flex">
+        <nut-col :span="6">
+          <div class="flex-content">start</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">start</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">start</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" justify="center">
+        <nut-col :span="6">
+          <div class="flex-content">center</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">center</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">center</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" justify="end">
+        <nut-col :span="6">
+          <div class="flex-content">end</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">end</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">end</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" justify="space-between">
+        <nut-col :span="6">
+          <div class="flex-content">between</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">between</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">between</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" justify="space-around">
+        <nut-col :span="6">
+          <div class="flex-content">around</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">around</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">around</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <h2>align（侧轴方向）</h2>
+    <div class="box-item">
+      <nut-row type="flex" gutter="10" align="flex-start">
+        <nut-col :span="6">
+          <div class="flex-content flex-content-height">1</div>
+        </nut-col>
+        <nut-col :span="12">
+          <div class="flex-content flex-content-light"
+            >顶部对齐 - flex-start</div
+          >
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-height">3</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" gutter="10" align="center">
+        <nut-col :span="6">
+          <div class="flex-content flex-content-height">1</div>
+        </nut-col>
+        <nut-col :span="12">
+          <div class="flex-content flex-content-light">居中对齐 - center</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-height">3</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex" gutter="10" align="flex-end">
+        <nut-col :span="6">
+          <div class="flex-content flex-content-height">1</div>
+        </nut-col>
+        <nut-col :span="12">
+          <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-height">3</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <h2>分栏偏移</h2>
+    <div class="box-item">
+      <nut-row type="flex">
+        <nut-col :offset="6" span="6">
+          <div class="flex-content">offset:6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content flex-content-light">span:6</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">span:6</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex">
+        <nut-col span="6">
+          <div class="flex-content">span:6</div>
+        </nut-col>
+        <nut-col :offset="8" :span="6">
+          <div class="flex-content flex-content-light">offset:8</div>
+        </nut-col>
+        <nut-col :span="6">
+          <div class="flex-content">span:6</div>
+        </nut-col>
+      </nut-row>
+    </div>
+    <div class="box-item">
+      <nut-row type="flex">
+        <nut-col span="6" :offset="6">
+          <div class="flex-content">offset:6</div>
+        </nut-col>
+        <nut-col :span="6" :offset="6">
+          <div class="flex-content">offset:6</div>
+        </nut-col>
+      </nut-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('layout');
+export default createDemo({});
+</script>
+
+<style lang="scss" scoped>
+.box-item {
+  background: #fff;
+  margin-bottom: 20px;
+  padding: 20px 20px 10px;
+  border: 1px solid #ddd;
+}
+.demo .nut-col {
+  margin-bottom: 10px;
+}
+.flex-content {
+  line-height: 30px;
+  color: #fff;
+  text-align: center;
+  background: #78a4f4;
+  &.flex-content-light {
+    background: #93b6f6;
+  }
+  &.flex-content-height {
+    height: 50px;
+  }
+}
+</style>

src/packages/layout/doc.md

@@ -0,0 +1,314 @@
+# Flex 布局
+
+## 基本用法
+
+```html
+<nut-row>
+    <nut-col :span="12">
+        <div class="flex-content">span:12</div>
+    </nut-col>
+    <nut-col :span="12">
+        <div class="flex-content flex-content-light">span:12</div>
+    </nut-col>
+</nut-row>
+<nut-row>
+    <nut-col :span="8">
+        <div class="flex-content">span:8</div>
+    </nut-col>
+    <nut-col :span="8">
+        <div class="flex-content flex-content-light">span:8</div>
+    </nut-col>
+    <nut-col :span="8">
+        <div class="flex-content">span:8</div>
+    </nut-col>
+</nut-row>
+<nut-row>
+    <nut-col :span="6">
+        <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">span:6</div>
+        </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+</nut-row>
+<nut-row>
+    <nut-col :span="4">
+        <div class="flex-content">span:4</div>
+    </nut-col>
+    <nut-col :span="4">
+        <div class="flex-content flex-content-light">span:4</div>
+    </nut-col>
+    <nut-col :span="4">
+        <div class="flex-content">span:4</div>
+    </nut-col>
+    <nut-col :span="4">
+        <div class="flex-content flex-content-light">span:4</div>
+    </nut-col>
+    <nut-col :span="4">
+        <div class="flex-content">span:4</div>
+    </nut-col>
+    <nut-col :span="4">
+        <div class="flex-content flex-content-light">span:4</div>
+    </nut-col>
+</nut-row>
+
+```
+
+## 设置元素间距
+
+```html
+<nut-row :gutter="10">
+    <nut-col :span="6">
+        <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+</nut-row>
+            
+```
+
+## Flex布局
+
+### wrap（是否换行）
+
+```html
+<nut-row type="flex" flexWrap="nowrap" :gutter="10">
+    <nut-col :span="6">
+        <div class="flex-content">1</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">2</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" flexWrap="wrap" :gutter="10">
+    <nut-col :span="6">
+        <div class="flex-content">1</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">2</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" flexWrap="reverse" :gutter="10">
+    <nut-col :span="6">
+        <div class="flex-content">1</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">2</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
+</nut-row>
+
+```
+
+### justify（主轴方向）
+
+```html
+<nut-row type="flex">
+    <nut-col :span="6">
+        <div class="flex-content">start</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">start</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">start</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" justify="center">
+    <nut-col :span="6">
+        <div class="flex-content">center</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">center</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">center</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" justify="end">
+    <nut-col :span="6">
+        <div class="flex-content">end</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">end</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">end</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" justify="space-between">
+    <nut-col :span="6">
+        <div class="flex-content">between</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">between</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">between</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" justify="space-around">
+    <nut-col :span="6">
+        <div class="flex-content">around</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">around</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">around</div>
+    </nut-col>
+</nut-row>
+
+```
+
+### align（侧轴方向）
+
+```html
+<nut-row type="flex" gutter="10" align="flex-start">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
+    <nut-col :span="12">
+        <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" gutter="10" align="center">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
+    <nut-col :span="12">
+        <div class="flex-content flex-content-light">居中对齐 - center</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex" gutter="10" align="flex-end">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
+    <nut-col :span="12">
+        <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
+</nut-row>
+
+```
+
+## 分栏偏移
+
+```html
+<nut-row type="flex">
+    <nut-col :offset="6" span="6">
+        <div class="flex-content">offset:6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">span:6</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex">
+    <nut-col span="6">
+        <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :offset="8" :span="6">
+        <div class="flex-content flex-content-light">offset:8</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">span:6</div>
+    </nut-col>
+</nut-row>
+<nut-row type="flex">
+    <nut-col span="6" :offset="6">
+        <div class="flex-content">offset:6</div>
+    </nut-col>
+    <nut-col :span="6" :offset="6">
+        <div class="flex-content">offset:6</div>
+    </nut-col>
+</nut-row>
+
+```
+
+## Prop
+
+### row
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| type | 布局方式，可选值为flex | String | -
+| gutter | 列元素之间的间距（单位为px） | String/Number | -
+| tag | 自定义元素标签 | String | div
+| justify | Flex 主轴对齐方式，可选值为 start end center space-around space-between | String | start
+| align | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | String | flex-start
+| flex-wrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap
+
+### col
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String/Number | -
+| offset | 列元素偏移距离 | String/Number | - 
+

src/packages/row/index.scss

@@ -0,0 +1,49 @@
+.nut-row {
+  &:after {
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+    content: '';
+  }
+}
+.nut-row-flex {
+  display: flex;
+  &:after {
+    display: none;
+  }
+  .nut-col {
+    float: none;
+  }
+}
+.nut-row-justify-center {
+  justify-content: center;
+}
+.nut-row-justify-end {
+  justify-content: flex-end;
+}
+.nut-row-justify-space-between {
+  justify-content: space-between;
+  align-items: center;
+}
+.nut-row-justify-space-around {
+  justify-content: space-around;
+}
+.nut-row-align-flex-start {
+  align-items: flex-start;
+}
+.nut-row-align-center {
+  align-items: center;
+}
+.nut-row-align-flex-end {
+  align-items: flex-end;
+}
+.nut-row-flex-wrap {
+  flex-wrap: wrap;
+}
+.nut-row-flex-nowrap {
+  flex-wrap: nowrap;
+}
+.nut-row-flex-reverse {
+  flex-wrap: wrap-reverse;
+}

src/packages/row/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="nut-row" :class="getClassObject()">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts">
+import { computed, provide } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('row');
+
+export default create({
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    gutter: {
+      type: [String, Number],
+      default: ''
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    justify: {
+      type: String,
+      default: 'start'
+    },
+    align: {
+      type: String,
+      default: 'flex-start'
+    },
+    flexWrap: {
+      type: String,
+      default: 'nowrap'
+    }
+  },
+  setup(props, { slots }) {
+    provide('gutter', props.gutter);
+    const getClass = (prefix, type) => {
+      return prefix
+        ? type
+          ? `nut-row-${prefix}-${type}`
+          : ''
+        : `nut-row-${type}`;
+    };
+    const getClassObject = () => {
+      return `
+              ${getClass('', props.type)}
+              ${getClass('justify', props.justify)}
+              ${getClass('align', props.align)}
+              ${getClass('flex', props.flexWrap)}
+              `;
+    };
+
+    return {
+      getClassObject
+    };
+  }
+});
+</script>
+<style lang="scss">
+@import 'index.scss';
+</style>