demo组件

index.js

@@ -2,11 +2,13 @@
 import CyTable from './packages/table/index.js';
 import CyLayout from './packages/layout/index.js';
 import CyUpload from './packages/form/upload/index.js';
+import CyDemoBlock from './packages/other/demo-block/index.js';
 
 const components = [
   CyTable,
   CyLayout,
   CyUpload,
+  CyDemoBlock,
 ];
 
 const install = function(Vue, opts = {}) {

packages/layout/src/layout.vue

@@ -40,7 +40,7 @@
         <!-- 内容区域 -->
         <div class="content">
           <!-- 自定义table组件 -->
-          <LqLayoutTable ref="table" v-if="table.show" :primary-key="primaryKey" :list-api="api.list" :props="table" :params="tableParams" @selectRow="(e) => {$emit('selectRow', e); selection = e}">
+          <LqLayoutTable ref="table" v-if="table.show !== false" :primary-key="primaryKey" :list-api="api.list" :props="table" :params="tableParams" @selectRow="(e) => {$emit('selectRow', e); selection = e}">
             <template v-for="column in table.columns.filter(i => i.type == 'slot')" #[column.slotName]="{ data, $index }">
               <slot :name="column.slotName" :data="data" :index="$index"/>
             </template>
@@ -373,6 +373,7 @@ export default {
         }
       }
       this.$nextTick(() => {
+        console.log('搜索', this.$refs)
         this.$refs.table.network().getData()
       })
     },

packages/other/demo-block/index.js

+import Demo from './src/main';
+
+/* istanbul ignore next */
+Demo.install = function(Vue) {
+  Vue.component(Demo.name, Demo);
+};
+
+export default Demo;

packages/other/demo-block/src/main.vue

+<template>
+  <div :class="[hover ? 'hover' : '',]" class="demo-block" @mouseenter="hover = true" @mouseleave="hover = false">
+    <h2 v-if="$slots.title" >
+      <slot name="title"/>
+    </h2>
+    <p v-if="$slots.descript" >
+      <slot name="descript"/>
+    </p>
+    <div class="demo-content">
+       <slot />
+      <div v-if="showCode" class="demo-code">
+        <slot name="code" class="code" />
+      </div>
+      <div>
+        <div :class="[hoverControl ? 'hover' : '',]" class="footer" @mouseenter="hoverControl = true" @mouseleave="hoverControl = false" @click="showCode = !showCode">
+          <i :class="footerIcon"/>
+          <transition name="fade">
+            <span v-if="hover"><span class="label">{{ footerLabel }}</span></span>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'demo-block',
+  data() {
+    return {
+      hover: false, // 鼠标悬停
+      hoverControl: false, // 鼠标悬停
+      showCode: false,
+    }
+  },
+  computed: {
+    footerIcon() {
+      const { showCode } = this
+      return showCode ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
+    },
+    footerLabel() {
+      const { showCode } = this
+      return showCode ? '隐藏代码' : '显示代码'
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-block{
+  ::v-deep .el-card__body{
+    padding: 0;
+  }
+  &.hover{
+    .demo-content{
+      box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
+    }
+    .footer{
+      transform: translateX(-30px);
+    }
+  }
+  .demo-code{
+    background: #ebebeb;
+    padding: 10px;
+    xmp{
+      margin: 0;
+    }
+  }
+  .demo-content{
+    border: 1px solid #ebebeb;
+    transition: .3s;
+  }
+  .footer{
+    transition: .3s;
+    border-top: 1px solid #ebebeb;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+    color: #DCDFE6;
+    .label{
+      margin: 0 10px;
+      position: absolute;
+      font-size: 14px;
+      // transform: translateX(-30px);
+    }
+    &.hover{
+      color: #409EFF;
+      .label{
+      }
+    }
+  }
+}
+</style>

packages/table/src/main.vue

@@ -173,8 +173,8 @@ export default {
         selectionChange: (select) => {
           this.selectData = select
           if (this.init) {
-            this.$emit('selectRow', this.selectData)
             this.$emit('select-row', this.selectData)
+            this.$emit('selection-change', this.selectData)
           }
         },
         rowclass: ({ row, rowIndex }) => {