Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 d5098e1c 编写于 作者: Shine-zwj's avatar Shine-zwj
浏览文件
操作

add：添加布局面板文本项

上级 b7f83a11
隐藏空白字符变更
内嵌 并排
正在显示 包含 244 行增加 和 0 行删除
src/app-register.ts
浏览文件 @ d5098e1c
......@@ -115,6 +115,9 @@ import AppStandardContainer from './components/layout-element/container/app-stan
import AppTabPanel from './components/layout-element/container/app-tab-panel/app-tab-panel.vue';
import AppTabPage from './components/layout-element/container/app-tab-page/app-tab-page.vue';
import AppNavPos from './components/layout-element/container/app-nav-pos/app-nav-pos.vue';
import AppPreSetText from './components/layout-element/text/app-preset-text/app-preset-text.vue';
import AppPreSetCaption from './components/layout-element/text/app-preset-caption/app-preset-caption.vue';
import AppPreSetTitle from './components/layout-element/text/app-preset-title/app-preset-title.vue';
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
// 全局挂载实体权限服务注册中心
......@@ -244,5 +247,8 @@ export const AppComponents = {
v.component('app-tab-panel', AppTabPanel);
v.component('app-tab-page', AppTabPage);
v.component('app-nav-pos', AppNavPos);
v.component('app-preset-text',AppPreSetText);
v.component('app-preset-caption',AppPreSetCaption);
v.component('app-preset-title',AppPreSetTitle);
},
};
\ No newline at end of file
src/components/layout-element/text/app-preset-caption/app-preset-caption.less 0 → 100644
浏览文件 @ d5098e1c
.app-preset-caption {
padding: 8px;
.caption-info {
font-weight: 600;
font-family: "Microsoft YaHei";
font-size: 14px;
}
}
\ No newline at end of file
src/components/layout-element/text/app-preset-caption/app-preset-caption.vue 0 → 100644
浏览文件 @ d5098e1c
<template>
<div class="app-preset-caption">
<slot></slot>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({})
export default class AppPreSetCaption extends Vue {}
</script>
<style lang='less'>
@import "./app-preset-caption.less";
</style>
\ No newline at end of file
src/components/layout-element/text/app-preset-text/app-preset-text.less 0 → 100644
浏览文件 @ d5098e1c
.app-preset-text {
width: 100%;
height: 100%;
}
\ No newline at end of file
src/components/layout-element/text/app-preset-text/app-preset-text.vue 0 → 100644
浏览文件 @ d5098e1c
<template>
<div :class="['app-preset-text', `app-preset-text--${contentType.toLowerCase()}`]">
<!-- 直接内容类型 -->
<template v-if="Object.is(contentType, 'RAW')">
<template v-if="Object.is(renderMode, 'TEXT')">
<span :style="cssStyle">{{ value }}</span>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING1')">
<h1 :style="cssStyle">{{ value }}</h1>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING2')">
<h2 :style="cssStyle">{{ value }}</h2>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING3')">
<h3 :style="cssStyle">{{ value }}</h3>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING4')">
<h4 :style="cssStyle">{{ value }}</h4>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING5')">
<h5 :style="cssStyle">{{ value }}</h5>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING6')">
<h6 :style="cssStyle">{{ value }}</h6>
</template>
<template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
<p :style="cssStyle">{{ value }}</p>
</template>
</template>
<!-- 图片类型 -->
<template v-else-if="Object.is(contentType, 'IMAGE')">
<img :style="cssStyle" v-if="imgUrl" :src="imgUrl" />
<i :style="cssStyle" v-else :class="imageClass ? imageClass : ''"></i>
</template>
<!-- HTML类型 -->
<template v-else-if="Object.is(contentType, 'HTML')">
<div :style="cssStyle" v-html="value" />
</template>
<!-- MARKDOWN类型 -->
<template v-else-if="Object.is(contentType, 'MARKDOWN')">
MARKDOWN暂未支持
<!-- <app-markdown-editor :style="cssStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
</template>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPreSetText extends Vue {
/**
* 输入值
*
* @type {*}
* @memberof AppPreSetText
*/
@Prop() public value!: any;
/**
* 内容类型
*
* @type {string}
* @memberof AppPreSetText
*/
@Prop({ default: 'RAW' }) public contentType!: 'RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN';
/**
* 绘制模式
*
* @type {string}
* @memberof AppPreSetText
*/
@Prop({ default: 'TEXT' }) public renderMode!: 'TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH';
/**
* 内容样式
*
* @type {string}
* @memberof AppPreSetText
*/
@Prop() public contentStyle?: string;
/**
* 预置类型
*
* @type {string}
* @memberof AppPreSetText
*/
@Prop({ default: 'STATIC_TEXT' }) public predefinedType!: 'FIELD_TEXT_DYNAMIC' | 'STATIC_LABEL' | 'STATIC_TEXT';
/**
* 图标
*
* @memberof AppPreSetText
*/
@Prop() public imageClass?: string;
/**
* 动态图片路径
*
* @memberof AppPreSetText
*/
protected dynaImgUrl: string = '';
/**
* 样式
*
* @memberof AppPreSetText
*/
protected cssStyle: string = '';
/**
* 图片路径
*
* @memberof AppPreSetText
*/
get imgUrl(): string {
return this.dynaImgUrl;
}
/**
* Vue生命周期 --- Created
*
* @memberof AppPreSetText
*/
created() {
this.handleText();
this.handleDynaImg();
}
/**
* 处理文本
*
* @memberof AppPreSetText
*/
protected handleText() {
if (this.predefinedType === 'STATIC_LABEL') {
this.cssStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
}
}
/**
* 处理动态图片
*
* @memberof AppPreSetText
*/
protected handleDynaImg() {
// TODO 动态图片
// if (this.value && typeof this.value == 'string') {
// // 默认识别文件对象形式，识别失败则为全路径模式
// try {
// const _files = JSON.parse(this.value);
// const file = _files instanceof Array ? _files[0] : null;
// const url = file && file.id ? `${this.downloadUrl}/${file.id}` : '';
// ImgurlBase64.getInstance()
// .getImgURLOfBase64(url)
// .then((res: any) => {
// this.dynaImgUrl = res;
// });
// } catch (error) {
// this.dynaImgUrl = this.value;
// }
// }
}
}
</script>
<style lang="less">
@import './app-preset-text.less';
</style>
\ No newline at end of file
src/components/layout-element/text/app-preset-title/app-preset-title.less 0 → 100644
浏览文件 @ d5098e1c
.app-preset-title {
padding: 16px;
font-weight: 600;
font-size: 24px;
}
\ No newline at end of file
src/components/layout-element/text/app-preset-title/app-preset-title.vue 0 → 100644
浏览文件 @ d5098e1c
<template>
<h1 class="app-preset-title">{{ curValue }}</h1>
</template>
<script lang="ts">
import { Environment } from "@/environments/environment";
import { Vue, Component } from 'vue-property-decorator';
@Component({})
export default class AppPreSetTitle extends Vue {
/**
* 当前值
*
* @memberof AppPreSetTitle
*/
public curValue: string = '';
/**
* 初始化
*
* @memberof AppPreSetTitle
*/
public created() {
this.curValue = Environment.AppTitle;
}
}
</script>
<style lang='less'>
@import './app-preset-title.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或