一、参考链接
https://www.jianshu.com/p/f4668a0da259
二、代码实现
1.引入库
代码如下(示例)以颜色选择器组件为例:
<template>
<div>
<a-input
style="display: inline-block; width: 60%; position: relative; top: -5px"
ref="input"
:value="innerValue"
v-bind="cellProps"
@blur="handleBlur"
@change="handleChange"
/>
<colorPicker
style="display: inline-block; width: 10%"
v-model="colorValue"
@change="selectColorPicker"
:size="'small'"
show-alpha
:color-format="'rgb'"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
import { colorPicker } from '/@/components/colorPicker';
const colorValue = ref();
export default defineComponent({
name: 'JVxeColorCell',
components: { colorPicker },
props: useJVxeCompProps(),
setup(props: JVxeComponent.Props) {
const { innerValue, cellProps, handleChangeCommon } = useJVxeComponent(props);
function selectColorPicker(event) {
console.log('event', event);
innerValue.value = event;
handleChangeCommon(event, true);
}
/** 处理change事件 */
function handleChange(event) {
let { target } = event;
let { value, selectionStart } = target;
let change = true;
// 触发事件,存储输入的值
if (change) {
handleChangeCommon(value);
}
}
/** 处理blur失去焦点事件 */
function handleBlur(event) {
let { target } = event;
handleChangeCommon(target.value, true);
}
return {
innerValue,
cellProps,
colorValue,
selectColorPicker,
handleChange,
handleBlur,
};
},
enhanced: {
installOptions: {
autofocus: '.ant-input',
},
getValue(value, ctx) {
colorValue.value = value;
return value;
},
} as JVxeComponent.EnhancedPartial,
});
</script>
<style lang="less" scoped>
/deep/ .ant3-color-picker--small {
width: 32px;
height: 32px;
/* padding-top: 3px; */
top: 5px;
left: 5px;
padding: 0;
}
</style>