组件按钮

陈威
1 parent 5cffb57c
Showing 3 changed files with 73 additions and 0 deletions Show diff stats
frontend/front/src/components/tableSlot/test/Test.vue
frontend/front/src/main.js
frontend/front/src/plugs/tableSlot.js
@@ -0,0 +1,42 @@
+<template>
+  <el-button @click="onClick">{{desc || '-'}}</el-button>
+</template>
+<script>
+
+export default {
+  props: {
+    row: {
+      type: Object
+    },
+    column: {
+      type: Object
+    },
+    index: {
+      type: String
+    },
+    desc: {
+      type: String
+    }
+  },
+
+  data: () => ({
+
+  }),
+
+  created() {
+
+  },
+  methods: {
+    onClick(){
+      console.log('row',this.row);
+      console.log('column',this.column);
+      console.log('index',this.index);
+      console.log('desc',this.desc);
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+
+</style>
@@ -12,6 +12,7 @@ import &#39;moment/locale/zh-cn&#39;
 import '@/assets/iconfont/iconfont.css'
 import htProcessForecast from '@/views/matter/processForecast/processForecastPage.vue'
 import HtKanban from '@/components/layouts/HtKanban/index.vue'
+import './plugs/tableSlot'
  
 Vue.component('HtProcessForecast', htProcessForecast)
 Vue.component('HtKanban', HtKanban)
@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import upperFirst from 'lodash/upperFirst'
+import camelCase from 'lodash/camelCase'
+
+function setComponent(requireComponent) {
+  requireComponent.keys().forEach(fileName => {
+    console.log('----------------->fileName',fileName);
+    const componentConfig = requireComponent(fileName)
+
+    const componentName = upperFirst(
+      camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')),
+    )
+    console.log('----------------->componentName',componentName);
+    const name = `${componentName}`
+    Vue.component(name, componentConfig.default || componentConfig)
+    console.log(name)
+  })
+}
+
+
+// 第一个参数表示检索的目录
+// 第二个参数表示是否检索子文件夹
+// 第三个参数匹配文件的正则表达式,一般是文件名
+const requireComponent = require.context(
+  '@/components/tableSlot',true, /\.vue$/,
+)
+
+setComponent(requireComponent)
+
+
...	...	@@ -0,0 +1,42 @@
	1	+<template>
	2	+ <el-button @click="onClick">{{desc \|\| '-'}}</el-button>
	3	+</template>
	4	+<script>
	5	+
	6	+export default {
	7	+ props: {
	8	+ row: {
	9	+ type: Object
	10	+ },
	11	+ column: {
	12	+ type: Object
	13	+ },
	14	+ index: {
	15	+ type: String
	16	+ },
	17	+ desc: {
	18	+ type: String
	19	+ }
	20	+ },
	21	+
	22	+ data: () => ({
	23	+
	24	+ }),
	25	+
	26	+ created() {
	27	+
	28	+ },
	29	+ methods: {
	30	+ onClick(){
	31	+ console.log('row',this.row);
	32	+ console.log('column',this.column);
	33	+ console.log('index',this.index);
	34	+ console.log('desc',this.desc);
	35	+ }
	36	+ }
	37	+}
	38	+</script>
	39	+
	40	+<style scoped lang='scss'>
	41	+
	42	+</style>
...	...
...	...	@@ -12,6 +12,7 @@ import 'moment/locale/zh-cn'
12	12	import '@/assets/iconfont/iconfont.css'
13	13	import htProcessForecast from '@/views/matter/processForecast/processForecastPage.vue'
14	14	import HtKanban from '@/components/layouts/HtKanban/index.vue'
	15	+import './plugs/tableSlot'
15	16
16	17	Vue.component('HtProcessForecast', htProcessForecast)
17	18	Vue.component('HtKanban', HtKanban)
...	...
...	...	@@ -0,0 +1,30 @@
	1	+import Vue from 'vue'
	2	+import upperFirst from 'lodash/upperFirst'
	3	+import camelCase from 'lodash/camelCase'
	4	+
	5	+function setComponent(requireComponent) {
	6	+ requireComponent.keys().forEach(fileName => {
	7	+ console.log('----------------->fileName',fileName);
	8	+ const componentConfig = requireComponent(fileName)
	9	+
	10	+ const componentName = upperFirst(
	11	+ camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')),
	12	+ )
	13	+ console.log('----------------->componentName',componentName);
	14	+ const name = `${componentName}`
	15	+ Vue.component(name, componentConfig.default \|\| componentConfig)
	16	+ console.log(name)
	17	+ })
	18	+}
	19	+
	20	+
	21	+// 第一个参数表示检索的目录
	22	+// 第二个参数表示是否检索子文件夹
	23	+// 第三个参数匹配文件的正则表达式,一般是文件名
	24	+const requireComponent = require.context(
	25	+ '@/components/tableSlot',true, /\.vue$/,
	26	+)
	27	+
	28	+setComponent(requireComponent)
	29	+
	30	+
...	...