新增文本框（颜色选择器）插件

src/app-register.ts

@@ -106,6 +106,7 @@ import AppAfterTime from './components/app-after-time/app-after-time.vue';
 import AppInputIp from './components/app-input-ip/app-input-ip.vue';
 import Loadding  from  './directive/loadding/loadding';
 import AppColorSpan  from  './components/app-color-span/app-color-span.vue';
+import AppColorPicker from  './components/app-color-picker/app-color-picker.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -227,6 +228,6 @@ export const AppComponents = {
         v.component('app-input-ip', AppInputIp);
         v.directive('loading',Loadding);
         v.component('app-color-span', AppColorSpan);
-
+        v.component('app-color-picker', AppColorPicker);
     },
 };
\ No newline at end of file

src/components/app-color-picker/app-color-picker.less

+.app-color-picker {
+    .el-color-picker__trigger {
+        border: none;
+        left: 6px;
+        .el-color-picker__color {
+            border: 0.5px solid #dcdee2;
+            cursor: pointer;
+            top: 20px;
+            width: 77%;
+            height: 5px;
+            left: 3px;
+            .el-icon-close {
+                display: none;
+            }
+        }
+    }
+    .ivu-icon {
+        font-size: 22px;
+        position: absolute;
+        top: 2px;
+        right: -1px;
+        cursor: pointer;
+    }
+}
\ No newline at end of file

src/components/app-color-picker/app-color-picker.vue

+<template>
+    <div class="app-color-picker">
+        <el-input
+            v-model="curVal"
+            size="small"
+            ref="colorPicker"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            >
+            <template slot="suffix">
+                <el-color-picker ref="picker" v-model="colorValue" @change="colorChange" size="small">
+                </el-color-picker>
+                <Icon type="md-color-palette" @click="iconClick" />
+            </template>
+        </el-input>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';
+import CodeListService from '@codelist/codelist-service';
+import { Subject, Subscription } from 'rxjs';
+
+@Component({})
+export default class AppColorPicker extends Vue {
+
+    /**
+     * 双向绑定表单项数据
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Model('change') public value: any;
+
+    /**
+     * 表单数据
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Prop() public data: any;
+
+    /**
+     * 表单通讯对象
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Prop() public formState?: Subject<any>;
+
+    /**
+     * 禁用状态
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Prop({default: false}) public disabled?: boolean;
+
+    /**
+     * 占位提示
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Prop() public placeholder?: string;
+
+    /**
+     * 上下文
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Prop() public context: any;
+
+    /**
+     * 视图参数
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Prop() public viewparam: any;
+
+    /**
+     * 颜色对应字段值
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    @Prop() public color: any;
+
+    /**
+     * 双向绑定颜色
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    public colorValue: any = null;
+
+    /**
+     * 获取输入框值
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    get curVal() {
+        return this.value;
+    }
+
+    /**
+     * 设置值
+     * 
+     * @type {*}
+     * @memberof AppColorPicker
+     */
+    set curVal(val: any) {
+        this.$emit('change', val);
+    }
+
+    /**
+     * Vue生命周期
+     * 
+     * @memberof AppColorPicker
+     */
+    public created() {
+        this.handleData();
+    }
+
+    /**
+     * 数据处理
+     * 
+     * @memberof AppColorPicker
+     */
+    @Watch('value')
+    public handleData() {
+        if(!this.value && !this.color) {
+            return;
+        }
+        this.colorValue = this.data[this.color];
+        this.curVal = this.value;
+        this.handleInputColor(this.colorValue);
+    }
+
+    /**
+     * 数据处理
+     * 
+     * @memberof AppColorPicker
+     */
+    public colorChange(color: any) {
+        this.handleInputColor(color);
+        this.$emit('colorChange', { name: this.color, value: color });
+    }
+
+    /**
+     * 设置输入框字体颜色
+     * 
+     * @memberof AppColorPicker
+     */
+    public handleInputColor(color: any) {
+        let picker: any = this.$refs.colorPicker;
+        if(picker) {
+            let child: any = picker.$el.children[0];
+            child.style.color = color;
+        }
+    }
+
+    /**
+     * 模拟点击事件
+     * 
+     * @memberof AppColorPicker
+     */
+    public iconClick() {
+        let picker: any = this.$refs.picker;
+        let e: any = document.createEvent('MouseEvent');
+        e.initEvent('click', true, true);
+        if(picker) {
+            picker.$el.children[0].dispatchEvent(e);
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import './app-color-picker.less';
+</style>