Commit ff0bd3bf262bc9f5df2c904febfdbde53803515d
1 parent
5cffb57c
Exists in
master
组件按钮
Showing
3 changed files
with
73 additions
and
0 deletions
Show diff stats
@@ -0,0 +1,42 @@ | @@ -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> |
frontend/front/src/main.js
@@ -12,6 +12,7 @@ import 'moment/locale/zh-cn' | @@ -12,6 +12,7 @@ import 'moment/locale/zh-cn' | ||
12 | import '@/assets/iconfont/iconfont.css' | 12 | import '@/assets/iconfont/iconfont.css' |
13 | import htProcessForecast from '@/views/matter/processForecast/processForecastPage.vue' | 13 | import htProcessForecast from '@/views/matter/processForecast/processForecastPage.vue' |
14 | import HtKanban from '@/components/layouts/HtKanban/index.vue' | 14 | import HtKanban from '@/components/layouts/HtKanban/index.vue' |
15 | +import './plugs/tableSlot' | ||
15 | 16 | ||
16 | Vue.component('HtProcessForecast', htProcessForecast) | 17 | Vue.component('HtProcessForecast', htProcessForecast) |
17 | Vue.component('HtKanban', HtKanban) | 18 | Vue.component('HtKanban', HtKanban) |
@@ -0,0 +1,30 @@ | @@ -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 | + |