vue2-client 0.1.0 → 1.1.0

package/src/components/MetaAnalysis/MetaAnalysis.vue

@@ -1,183 +0,0 @@
-<style>
-#metaAnalysisTagOuter {
-  width: 100%;
-  height: 40px;
-  position: relative;
-  overflow: hidden;
-}
-
-#metaAnalysisTag {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: -17px;
-}
-</style>
-<template>
-  <div>
-    <a-button v-if="button" type="primary" @click="showDrawer">{{ label }}</a-button>
-    <a v-if="!button" @click="showDrawer">{{ label }}</a>
-    <a-drawer
-      :title="title"
-      :width="width"
-      :visible="visible"
-      :body-style="bodyStyle"
-      @close="onClose"
-      :closable="closable"
-    >
-      <div id="metaAnalysisTagOuter" v-show="showTags">
-        <a-space id="metaAnalysisTag">
-          <template v-for="tag in tags">
-            <a-tooltip :key="tag" :title="tag">
-              <a-button
-                :key="tag"
-                :style="{backgroundColor:color[Math.floor((Math.random()*color.length))],color:'#fff',borderRadius: '4px'}">
-                {{ tag }}
-              </a-button>
-            </a-tooltip>
-          </template>
-        </a-space>
-      </div>
-      <a-tabs
-        :default-active-key="slotName[0]"
-        :tab-position="mode"
-        :style="tabsStyle"
-        @prevClick="prevClick"
-        @nextClick="nextClick"
-      >
-        <a-tab-pane v-for="n in slotName" :key="n" :tab="n">
-          <slot :name="n" v-bind="{tags}">没有配置页面组件</slot>
-        </a-tab-pane>
-      </a-tabs>
-    </a-drawer>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    // 控制抽屉宽度
-    width: {
-      type: String,
-      default: '720'
-    },
-    // tab 位置
-    mode: {
-      type: String,
-      default: 'top'
-    },
-    // 设置 Drawer 内容部分的样式
-    bodyStyle: {
-      type: Object,
-      default: () => {
-        return { paddingBottom: '80px' }
-      }
-    },
-    // 设置 tabs 内容部分的样式
-    tabsStyle: {
-      type: Object,
-      default: () => {
-        return { /* height: '200px' */ }
-      }
-    },
-    // 设置按钮文字
-    label: {
-      type: String,
-      default: '详情'
-    },
-    // 组件是否显示按钮  否则显示a标签
-    button: {
-      type: Boolean,
-      default: false
-    },
-    // 抽屉是否显示X
-    closable: {
-      type: Boolean,
-      default: false
-    },
-    // 是否显示Tag标签
-    showTags: {
-      type: Boolean,
-      default: true
-    },
-    // 抽屉是否显示标题
-    title: {
-      type: String,
-      default: null
-    },
-    // slot名字  用来插入各个标签页
-    slotName: {
-      type: Array,
-      default: () => ['暂时没有内容']
-    },
-    // tags 颜色集合
-    color: {
-      type: Array,
-      default: () => ['#f50', '#2db7f5', '#87d068', '#108ee9', '#379392', '#C84B31', '#D83A56']
-    },
-    // 点击按钮时默认tag
-    defaultTag: {
-      type: Object,
-      default: () => {
-      }
-    }
-  },
-  data () {
-    return {
-      form: this.$form.createForm(this),
-      visible: false,
-      tags: { a: '一个标签', b: '2020-01-01 <> 2020-01-01', c: '附加内容', d: '新的条件', e: '又是一个新的条件' }
-    }
-  },
-  mounted () {
-    this.tags = this.defaultTag
-  },
-  methods: {
-    prevClick (val) {
-      this.$emit('prevClick', val)
-    },
-    nextClick (val) {
-      this.$emit('nextClick', val)
-    },
-    addTags (val) {
-      this.tags = Object.assign({}, this.tags, val)
-    },
-    scrollInit () {
-      // 获取要绑定事件的元素
-      const scrollDiv = document.getElementById('metaAnalysisTag')
-      // document.addEventListener('DOMMouseScroll', handler, false)
-      // 添加滚轮滚动监听事件，一般是用下面的方法，上面的是火狐的写法
-      scrollDiv.addEventListener('mousewheel', handler, false)
-
-      function handler (event) {
-        // 获取滚动方向
-        const detail = event.wheelDelta || event.detail
-        // 定义滚动方向，其实也可以在赋值的时候写
-        const moveForwardStep = 1
-        const moveBackStep = -1
-        // 定义滚动距离
-        let step = 0
-        // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
-        if (detail < 0) {
-          step = moveForwardStep * 100
-        } else {
-          step = moveBackStep * 100
-        }
-        // 对需要滚动的元素进行滚动操作
-        scrollDiv.scrollLeft += step
-      }
-    },
-    showDrawer () {
-      this.visible = true
-      // 因为抽屉使用了v-if(visible)属性 所以在showDrawer为tags添加横向滚动方法
-      setTimeout(
-        h => this.scrollInit(), 200
-      )
-    },
-    onClose () {
-      this.visible = false
-    }
-  }
-}
-</script>

package/src/components/MetaAnalysis/demo/A.vue

@@ -1,31 +0,0 @@
-<template>
-  <div style="height: 100%;">
-    <h1>AAAAAAAAAAAAAA</h1>
-    <h4>{{ tags }}</h4>
-    <a-input v-model="context" style="width: 40%;margin-right: 20px"/>
-    <a-button type="primary" @click="submit()">提交</a-button>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    tags: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data () {
-    return {
-      context: ''
-    }
-  },
-  methods: {
-    submit () {
-      const context = this.context
-      // this.tags = Object.assign(this.tags, { context })
-      // console.log(this.tags)
-      this.$emit('add-tag', { context })
-    }
-  }
-}
-</script>

package/src/components/MetaAnalysis/demo/B.vue

@@ -1,31 +0,0 @@
-<template>
-  <div style="height: 100%;">
-    <h1>BBBBBBBBBB</h1>
-    <h4>{{ tags }}</h4>
-    <a-input v-model="context" style="width: 40%;margin-right: 20px"/>
-    <a-button type="primary" @click="submit()">提交</a-button>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    tags: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data () {
-    return {
-      context: ''
-    }
-  },
-  methods: {
-    submit () {
-      const tests = this.context
-      // this.tags = Object.assign(this.tags, { context })
-      // console.log(this.tags)
-      this.$emit('add-tag', { tests })
-    }
-  }
-}
-</script>

package/src/components/MetaAnalysis/demo/C.vue

@@ -1,31 +0,0 @@
-<template>
-  <div style="height: 100%;">
-    <h1>CCCCCCCCC</h1>
-    <h4>{{ tags }}</h4>
-    <a-input v-model="context" style="width: 40%;margin-right: 20px"/>
-    <a-button type="primary" @click="submit()">提交</a-button>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    tags: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data () {
-    return {
-      context: ''
-    }
-  },
-  methods: {
-    submit () {
-      const context = this.context
-      // this.tags = Object.assign(this.tags, { context })
-      // console.log(this.tags)
-      this.$emit('addtag', { context })
-    }
-  }
-}
-</script>

package/src/components/MetaAnalysis/demo/MetaTest.vue

@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <meta-analysis :slot-name="slot" ref="analysis" :default-tag="defaultTag">
-      <template v-slot:测试中文="{tags}">
-        <a-tab-test :tags="tags" @add-tag="addtag"></a-tab-test>
-      </template>
-      <template v-slot:b-tab="{tags}">
-        <b-tab-test :tags="tags" @add-tag="addtag"></b-tab-test>
-      </template>
-      <!--   这种写法接收不到  analysis的传值  -->
-      <c-tab-test slot="c-tab"></c-tab-test>
-    </meta-analysis>
-  </div>
-</template>
-<script>
-import ATabTest from '@/vue2-client/components/MetaAnalysis/demo/A'
-import BTabTest from '@/vue2-client/components/MetaAnalysis/demo/B'
-import CTabTest from '@/vue2-client/components/MetaAnalysis/demo/C'
-
-export default {
-  props: {
-    defaultTag: {
-      type: Object,
-      default: () => {
-      }
-    }
-  },
-  components: {
-    ATabTest,
-    BTabTest,
-    CTabTest
-  },
-  data () {
-    return {
-      slot: ['测试中文', 'b-tab', 'c-tab']
-    }
-  },
-  methods: {
-    addtag (val) {
-      this.$refs.analysis.addTags(val)
-    }
-  }
-}
-</script>

package/src/components/MetaAnalysis/index.js

@@ -1,3 +0,0 @@
-import MetaAnalysis from './MetaAnalysis'
-
-export default MetaAnalysis

package/src/components/MetaAnalysis/index.md

@@ -1,255 +0,0 @@
-# metaAnalysis 汇总分析组件
-
-## 组件性质
-
-为复杂的各种信息提供一个汇总分析框架
-
-## 参数
-
-```js
-props: {
-  // 控制抽屉宽度
-  width: {
-    type: String,
-  default:
-    '720'
-  }
-,
-  // tab 位置
-  mode: {
-    type: String,
-  default:
-    'top'
-  }
-,
-  // 设置 Drawer 内容部分的样式
-  bodyStyle: {
-    type: Object,
-  default:
-    () => {
-      return { paddingBottom: '80px' }
-    }
-  }
-,
-  // 设置 tabs 内容部分的样式
-  tabsStyle: {
-    type: Object,
-  default:
-    () => {
-      return { /* height: '200px' */ }
-    }
-  }
-,
-  // 设置按钮文字
-  label: {
-    type: String,
-  default:
-    '详情'
-  }
-,
-  // 组件是否显示按钮  否则显示a标签
-  button: {
-    type: Boolean,
-  default:
-    false
-  }
-,
-  // 抽屉是否显示X
-  closable: {
-    type: Boolean,
-  default:
-    false
-  }
-,
-  // 是否显示Tag标签
-  showTags: {
-    type: Boolean,
-  default:
-    true
-  }
-,
-  // 抽屉是否显示标题
-  title: {
-    type: String,
-  default:
-    null
-  }
-,
-  // slot名字  用来插入各个标签页
-  slotName: {
-    type: Array,
-  default:
-    () => ['暂时没有内容']
-  }
-,
-  // tags 颜色集合
-  color: {
-    type: Array,
-  default:
-    () => ['#f50', '#2db7f5', '#87d068', '#108ee9', '#379392', '#C84B31', '#D83A56']
-  }
-,
-  // 点击按钮时默认tag
-  defaultTag: {
-    type: Object,
-  default:
-    () => {
-    }
-  }
-}
-```
-
-## 使用方式
-
-### A tag页面
-
-```html
-
-<template>
-  <div style='height: 100%;'>
-    <h1>AAAAAAAAAAAAAA</h1>
-    <h4>{{ tags }}</h4>
-    <a-input v-model='context' style='width: 40%;margin-right: 20px' />
-    <a-button type='primary' @click='submit()'>提交</a-button>
-  </div>
-</template>
-<script>
-  export default {
-    props: {
-      tags: {
-        type: Object,
-        default: () => {
-        }
-        // 获取metaAnalysis 组件中的tag属性
-      }
-    },
-    data() {
-      return {
-        context: ''
-      }
-    },
-    methods: {
-      submit() {
-        //向外层自定义的组件发送添加tag标签事件
-        // 传值为json  写法一
-        const context = this.context
-        this.$emit('add-tag', { context })
-        // 写法二
-        this.$emit('add-tag', { context: this.context })
-      }
-    }
-  }
-</script>
-```
-
-### 使用metaAnalysis组件的自定义组件
-
-```html
-
-<template>
-  <div>
-    <meta-analysis :slot-name='slot' ref='analysis' :default-tag='defaultTag'>
-      <!--      插槽名字为自己用数组传给 slotName的值 每个属性值同时是插槽名字和tab标签名字 可以是中文名字 -->
-      <template v-slot:a-tab='{tags}'>
-        <a-tab-test :tags='tags' @add-tag='addtag'></a-tab-test>
-      </template>
-      <template v-slot:测试中文='{tags}'>
-        <b-tab-test :tags='tags' @add-tag='addtag'></b-tab-test>
-      </template>
-      <!--   这种写法接收不到  analysis的传值  -->
-      <c-tab-test slot='c-table'></c-tab-test>
-    </meta-analysis>
-  </div>
-</template>
-<script>
-  // 引用各个标签页
-  import ATabTest from '@/vue2-client/components/MetaAnalysis/demo/A'
-  import BTabTest from '@/vue2-client/components/MetaAnalysis/demo/B'
-  import CTabTest from '@/vue2-client/components/MetaAnalysis/demo/C'
-
-  export default {
-    props: {
-      defaultTag: {
-        type: Object,
-        default: () => {
-        }
-      }
-    },
-    components: {
-      ATabTest,
-      BTabTest,
-      CTabTest
-    },
-    data() {
-      return {
-        // 插槽名字 需要传到meta-analysis组件中
-        slot: ['a-tab', '测试中文', 'c-table']
-      }
-    },
-    methods: {
-      // 此处是各个标签页调用的添加tag标签的方法 方法名字随意  meta-analysis组件要指定 ref名字来通过this.$refs获取对象 并且调用方法
-      addtag(val) {
-        this.$refs.analysis.addTags(val)
-      }
-    }
-  }
-</script>
-```
-
-### 使用自定义组件
-
-```html
-
-<template>
-  <a-table :columns='columns' :data-source='data'>
-<!--  此处引用  自定义的组件  此处默认显示为一个a 标签 默认值为 '详情' 可以从自定义组件配置-->
-    <meta-test slot="action" :default-tag="{ceshi:1111,ceshi2:222}"/>>
-  </a-table>
-</template>
-<script>
-  const columns = [
-    {
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: 'Action',
-      key: 'action',
-      scopedSlots: { customRender: 'action' },
-    },
-  ];
-
-  const data = [
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      address: 'New York No. 1 Lake Park',
-      tags: ['nice', 'developer'],
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park',
-      tags: ['loser'],
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sidney No. 1 Lake Park',
-      tags: ['cool', 'teacher'],
-    },
-  ];
-
-  export default {
-    data() {
-      return {
-        data,
-        columns,
-      };
-    },
-  };
-</script>
-```