chore: add component basic layout & basic props
This commit is contained in:
parent
1264559d7a
commit
feeffc32b1
|
@ -1,15 +1,42 @@
|
|||
import { defineComponent, SetupContext } from 'vue';
|
||||
import { defineComponent, ref, SetupContext } from 'vue';
|
||||
import { comboListProps, ComboListProps } from './combo-list.props';
|
||||
import { ButtonEdit } from '../../button-edit';
|
||||
import { ViewType } from './types';
|
||||
export default defineComponent({
|
||||
name: 'FComboList',
|
||||
props: comboListProps,
|
||||
emits: [],
|
||||
setup(props: ComboListProps, context: SetupContext) {
|
||||
const modelValue = ref(props.modelValue);
|
||||
return () => {
|
||||
return (
|
||||
<>
|
||||
<ButtonEdit id={props.id} />
|
||||
<ButtonEdit v-if={!props.viewType || props.viewType === ViewType.Text} id={props.id} disable={props.disabled} readonly={props.readonly} />
|
||||
{/** Tag展示 */}
|
||||
<div class="f-cmp-inputgroup" v-if={props.viewType === ViewType.Tag}>
|
||||
<div class="input-group">
|
||||
<div class="form-control f-cmp-inputgroup--multi-wrapper multi-more">
|
||||
<div class="multi--content">
|
||||
<span class="multi--item">
|
||||
<i class="f-icon multi--close"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="multi--more">
|
||||
<i class="f-icon multi--more-icon"></i><span class="multi--more-text"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text input-group-clear ng-star-inserted" style="display: none;">
|
||||
<i class="f-icon modal_close"></i>
|
||||
</span>
|
||||
<span class="input-group-text ng-star-inserted">
|
||||
<span class="f-icon f-icon-arrow-60-down"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/** 下拉面板区域 */}
|
||||
<div v-if={false} class="comboPanel f-area-hide" style="z-index: 99999"></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -94,6 +94,15 @@ export const comboListProps = {
|
|||
* 默认`,`
|
||||
*/
|
||||
separator: Type({ default: ',', type: String }),
|
||||
/**
|
||||
* 可选,展示文本
|
||||
* 默认为空字符串
|
||||
*/
|
||||
displayText: Type({ type: String, default: '' }),
|
||||
/**
|
||||
* 绑定值
|
||||
*/
|
||||
modelValue: Type(String)
|
||||
|
||||
};
|
||||
export type ComboListProps = ExtractPropTypes<typeof comboListProps>;
|
Loading…
Reference in New Issue