提交 734e8aed 编写于 作者: RedPig97's avatar RedPig97

update: 登录输入框

上级 7f33efc5
.app-login-input {
.ivu-input-wrapper {
width: 100%;
height: 100%;
}
.ivu-input {
height: 100%;
width: 100%;
}
.ivu-input-prefix {
display: flex;
align-items: center;
justify-content: center;
}
}
\ No newline at end of file
<template> <template>
<div class="app-user-input"> <div :class="[model.sysCss, 'app-login-input']" :style="containerStyle">
<i-input <i-input
size='large' size='large'
:prefix='icon' :prefix='defaultIcon'
v-model="value" v-model="curValue"
:placeholder="placeholder"> :disabled="disabled"
:readonly="readonly"
:placeholder="model.caption">
</i-input> </i-input>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator'; import { PanelFieldModel } from '@/model/panel-detail';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({ @Component({
}) })
export default class AppUserId extends Vue { export default class AppLoginInput extends Vue {
/**
* 模型
*
* @type {string}
* @memberof AppLoginInput
*/
@Prop() public model!: PanelFieldModel;
/** /**
* 登录名称 *
* *
* @type {string} * @type {string}
* @memberof AppUserId * @memberof AppLoginInput
*/
@Prop() public value!: string;
/**
* 名称
*
* @type {string}
* @memberof AppLoginInput
*/
@Prop() public name!: string;
/**
* 默认图标
*
* @type {string}
* @memberof AppLoginInput
*/
@Prop() public defaultIcon?: string;
/**
* 容器样式
*
* @type {any}
* @memberof AppLoginInput
*/ */
@Prop({default: ''}) public value!: string; public containerStyle: any = null;
@Prop() public icon?: string; /**
* 禁用模式
*
* @type {any}
* @memberof AppLoginInput
*/
public disabled: boolean = false;
/**
* 只读模式
*
* @type {any}
* @memberof AppLoginInput
*/
public readonly: boolean = false;
/**
* 当前值
*
* @type {any}
* @memberof AppLoginInput
*/
get curValue() {
return this.value;
}
/**
* 值变化
*
* @memberof AppPresetTextInput
*/
set curValue(val: any) {
this.$emit('valueChange', { name: this.name, value: val });
}
@Prop() public placeholder?: string; public mounted() {
if (this.model) {
this.containerStyle = this.model.getElementStyle();
this.disabled = Object.is(this.model.fieldState, '1');
this.readonly = Object.is(this.model.fieldState, '2');
}
}
} }
</script> </script>
<style lang="less">
@import "./app-login-input.less";
</style>
\ No newline at end of file
...@@ -38,6 +38,16 @@ export class PanelFieldModel extends PanelDetailModel { ...@@ -38,6 +38,16 @@ export class PanelFieldModel extends PanelDetailModel {
*/ */
public enableCond: number | 0 | 1 | 2 | 3 = 3; public enableCond: number | 0 | 1 | 2 | 3 = 3;
/**
* @description 默认状态
* 0 不启用
* 1 只读
* 2 禁用
* @type {('0' | '1' | '2')}
* @memberof PanelFieldModel
*/
public fieldState: '0' | '1' | '2';
/** /**
* Creates an instance of PanelFieldModel. * Creates an instance of PanelFieldModel.
* PanelFieldModel 实例 * PanelFieldModel 实例
...@@ -49,6 +59,7 @@ export class PanelFieldModel extends PanelDetailModel { ...@@ -49,6 +59,7 @@ export class PanelFieldModel extends PanelDetailModel {
super(opts); super(opts);
this.disabled = opts.disabled ? true : false; this.disabled = opts.disabled ? true : false;
this.enableCond = opts.enableCond; this.enableCond = opts.enableCond;
this.fieldState = opts.fieldState;
} }
/** /**
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册