<template> <div :class="classes"> <div v-if="Object.is(labelPos,'NONE') || !labelPos" class="app-panel-field__editor"> <div :class="valueCheck == true ?'':'editorstyle'"> <slot ></slot> <span :class="error ? 'errorstyle':''">{{error}}</span> </div> </div> <div v-if="!Object.is(labelPos,'NONE') && !isEmptyCaption" :class="dynaCationClass"> <span v-if="required">* </span> {{ caption }} </div> <div v-if="Object.is(labelPos,'BOTTOM') || Object.is(labelPos,'TOP') || Object.is(labelPos,'LEFT') || Object.is(labelPos,'RIGHT')" class="app-panel-field__editor"> <div :class="valueCheck == true ?'':'editorstyle'"> <slot ></slot> <span :class="error ? 'errorstyle':''">{{error}}</span> </div> </div> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Watch } from "vue-property-decorator"; @Component({}) export default class AppPanelField extends Vue { /** * 名称 * * @type {string} * @memberof AppPanelField */ @Prop() public caption!: string; /** * 错误信息 * * @type {string} * @memberof AppPanelField */ @Prop() public error?: string; /** * 标签位置 * * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')} * @memberof AppPanelField */ @Prop() public labelPos?: | string | "BOTTOM" | "LEFT" | "NONE" | "RIGHT" | "TOP"; /** * 标签是否空白 * * @type {boolean} * @memberof AppPanelField */ @Prop() public isEmptyCaption?: boolean; /** * 列表项名称 * * @type {string} * @memberof AppPanelField */ @Prop() public name!: string; /** * 面板数据 * * @type {any} * @memberof AppPanelField */ @Prop() public data!: any; /** * 编辑器值 * * @type {any} * @memberof AppPanelField */ @Prop() public value !: any; /** * 值规则 * * @type {string} * @memberof AppPanelField */ @Prop() public itemRules!: any; /** * 值规则 * * @type {string} * @memberof AppPanelField */ @Prop() public captionClass?: any; /** * 是否必填 * * @type {boolean} * @memberof AppPanelField */ @Prop({default: false}) public required!: boolean; /** * 动态标题类名 * * @type {any[]} * @memberof AppPanelField */ get dynaCationClass(){ const defaultClass = {'app-panel-field__label':true} return this.captionClass?Object.assign(defaultClass,this.captionClass):defaultClass; } /** * 值规则数组 * * @type {any[]} * @memberof AppPanelField */ public rules: any[] = []; /** * 值规则监控 * * @param {*} newVal * @param {*} oldVal * @memberof AppPanelField */ @Watch("itemRules", { deep: true }) onItemRulesChange(newVal: any, oldVal: any) { if (newVal) { try { this.rules = []; const _rules: any[] = newVal; this.rules = [..._rules]; } catch (error) {} } } /** * 编辑器样式 * * @type {boolean} * @memberof AppPanelField */ public valueCheck: boolean = true; /** * 编辑器值监控 * * @param {*} newVal * @param {*} oldVal * @memberof AppPanelField */ @Watch("value") ItemValueRules(newVal: any, oldVal: any) { if(this.required && !newVal) { this.valueCheck = false; }else{ this.valueCheck = true; } } /** * 计算样式 * * @readonly * @type {string []} * @memberof AppPanelField */ get classes(): string[] { let posClass = ""; switch (this.labelPos) { case "TOP": posClass = "label__top"; break; case "LEFT": posClass = "label__left"; break; case "BOTTOM": posClass = "label__bottom"; break; case "RIGHT": posClass = "label__right"; break; case "NONE": posClass = "label__none"; break; } return [ "app-panel-field", posClass ]; } /** * vue 生命周期 * * @memberof AppPanelField */ public mounted() { if (this.itemRules) { try { const _rules: any[] = this.itemRules; this.rules = [..._rules]; this.rules.some((rule: any) => { if (rule.hasOwnProperty("required")) { this.required = rule.required; return true; } return false; }); } catch (error) {} } } } </script>