Skip to content

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

update：更新

上级 a6436eee
隐藏空白字符变更
内嵌 并排
正在显示 包含 372 行增加 和 46 行删除
src/app-register.ts
浏览文件 @ 1aef406f
......@@ -128,7 +128,9 @@ import AppLoginNoteVerify from './components/layout-element/login/app-login-note
import AppRawItemImage from './components/layout-element/media/app-rawitem-image/app-rawitem-image.vue';
import AppRawItemCarousel from './components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue';
import AppRawItemVideo from './components/layout-element/media/app-rawitem-video/app-rawitem-video.vue';
import AppPresetQrCode from './components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue';
import AppPresetSwitch from './components/layout-element/interactive/app-preset-switch/app-preset-switch.vue';
import AppPresetTextInput from './components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue';
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
// 全局挂载实体权限服务注册中心
......@@ -271,5 +273,8 @@ export const AppComponents = {
v.component('app-rawitem-image', AppRawItemImage);
v.component('app-rawitem-carousel', AppRawItemCarousel);
v.component('app-rawitem-video', AppRawItemVideo);
v.component('app-preset-qr-code',AppPresetQrCode);
v.component('app-preset-switch',AppPresetSwitch);
v.component('app-preset-text-input',AppPresetTextInput);
},
};
\ No newline at end of file
src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.less 0 → 100644
浏览文件 @ 1aef406f
.app-preset-qr-code {
width: 100%;
height: 100%;
.ibiz-qr-code {
width: 100%;
height: 100%;
}
}
\ No newline at end of file
src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue 0 → 100644
浏览文件 @ 1aef406f
<template>
<div :class="className">
<template v-if="QRCodeConfig.url">
<ibiz-qr-code
:size="QRCodeConfig.size"
:url="QRCodeConfig.url"
:bgSrc="QRCodeConfig.bgSrc"
:margin="QRCodeConfig.margin"
:backgroundColor="QRCodeConfig.backgroundColor"
:logoSrc="QRCodeConfig.logoSrc"
:logoMargin="QRCodeConfig.logoMargin"
:logoBgColor="QRCodeConfig.logoBgColor"
:logoRadius="QRCodeConfig.logoRadius"
:whiteMargin="QRCodeConfig.whiteMargin"
class="ibiz-qr-code"
:callback="callback">
</ibiz-qr-code>
</template>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetQrCode extends Vue {
/**
* 内容 value数据格式：对象类型的JSON字符串，参数类型与QRCodeConfig一致："{ "url": "http://www.baidu.com" }"
*
* @type {string}
* @memberof AppPresetQrCode
*/
@Prop() public value?: any;
/**
* 名称
*
* @type {string}
* @memberof AppPresetQrCode
*/
@Prop() public name!: string;
/**
* 类名
*
* @memberof AppPresetQrCode
*/
get className(): string {
return `app-preset-qr-code ${this.name}`;
}
/**
* ibiz-qr-code组件可传参数
* @param {number} size 二维码大小，包含边框
* @param {string} url 二维码内容
* @param {string} bgSrc 背景图片
* @param {number} margin 二维码外边距
* @param {string} backgroundColor 背景颜色
* @param {string} logoSrc 中央图标logo地址
* @param {number} logoMargin logo周围的空白边框
* @param {string} logoBgColor logo边框的背景色
* @param {number} logoRadius logo边框圆角半径
* @param {boolean} whiteMargin 背景图外是否设置白色边框
* @type {*}
* @memberof AppPresetQrCode
*/
public QRCodeConfig: {
size?: number,
url?: string,
bgSrc?: string,
margin?: number,
backgroundColor?: string,
logoSrc?: string,
logoMargin?: number,
logoBgColor?: string,
logoRadius?: number,
whiteMargin?: boolean,
} = {}
/**
* 二维码生成的回调函数
* @type {*}
* @memberof AppPresetQrCode
*/
public callback(event: any) {
// TODO
}
/**
* 获取二维码数据
*
* @memberof AppPresetQrCode
*/
public created() {
this.getQRCodeData();
}
/**
* 获取二维码绘制数据
*
* @type {*}
* @memberof AppPresetQrCode
*/
public getQRCodeData() {
if(this.value && typeof(this.value) == 'string') {
const value = JSON.parse(this.value);
const {
size,
url,
bgSrc,
margin,
backgroundColor,
logoSrc,
logoMargin,
logoBgColor,
logoRadius,
whiteMargin,
} = value;
this.QRCodeConfig = {
size,
url,
bgSrc,
margin,
backgroundColor,
logoSrc,
logoMargin,
logoBgColor,
logoRadius,
whiteMargin,
};
// TODO
}
}
}
</script>
<style lang='less'>
@import './app-preset-qrcode.less';
</style>
\ No newline at end of file
src/components/layout-element/interactive/app-preset-switch/app-preset-switch.less 0 → 100644
浏览文件 @ 1aef406f
.app-preset-switch {
min-width: 40px;
height: 100%;
}
\ No newline at end of file
src/components/layout-element/interactive/app-preset-switch/app-preset-switch.vue 0 → 100644
浏览文件 @ 1aef406f
<template>
<el-switch :class="className" v-model="curValue" :disabled="disabled"></el-switch>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetSwitch extends Vue {
/**
* 开关值
*
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop() public value!: any
/**
* 名称
*
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop() public name!: string
/**
* 名称
*
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop({default: false}) public disabled?: boolean
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get className(): string {
return `app-preset-switch ${this.name}`;
}
/**
* 获取开关状态
*
* @type {*}
* @memberof AppPresetSwitch
*/
get curValue(): boolean {
return !!this.value;
}
/**
* 开关状态发生变化
*
* @type {*}
* @memberof AppPresetSwitch
*/
set curValue(value: boolean) {
this.$emit('valueChange', {name: this.name, value});
}
}
</script>
<style lang='less'>
@import './app-preset-switch.less';
</style>
\ No newline at end of file
src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.less 0 → 100644
浏览文件 @ 1aef406f
.app-preset-text-input {
width: 100%;
height: 32px;
.el-input,
.el-input__inner {
width: 100%;
height: 32px;
}
}
\ No newline at end of file
src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue 0 → 100644
浏览文件 @ 1aef406f
<template>
<div :class="className">
<el-input v-model="curValue" :placeholder="placeholder"></el-input>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetTextInput extends Vue {
/**
* 输入值
*
* @type {*}
* @memberof AppPresetTextInput
*/
@Prop() public value!: any;
/**
* 名称
*
* @type {string}
* @memberof AppPresetTextInput
*/
@Prop() public name!: string;
/**
* 禁用
*
* @type {boolean}
* @memberof AppPresetTextInput
*/
@Prop() public disabled?: boolean;
/**
* 占位文本
*
* @type {string}
* @memberof AppPresetTextInput
*/
@Prop({default: ''}) public placeholder?: string;
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get className(): string {
return `app-preset-text-input ${this.name}`;
}
/**
* 当前值
*
* @memberof AppPresetTextInput
*/
get curValue() {
return this.value;
}
/**
* 值变化
*
* @memberof AppPresetTextInput
*/
set curValue(val: any) {
this.$emit('valueChange', { name: this.name, value: val });
}
}
</script>
<style lang='less'>
@import './app-preset-text-input.less';
</style>
\ No newline at end of file
src/components/layout-element/text/app-preset-caption/app-preset-caption.vue
浏览文件 @ 1aef406f
<template>
<div class="app-preset-caption">
<div :class="className">
<slot></slot>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class AppPresetCaption extends Vue {}
export default class AppPresetCaption extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppPresetCaption
*/
@Prop() public name!: string;
/**
* 类名
*
* @memberof AppPresetText
*/
get className(): string {
return `app-preset-caption ${this.name}`;
}
}
</script>
<style lang='less'>
......
src/components/layout-element/text/app-preset-text/app-preset-text.less
浏览文件 @ 1aef406f
.app-preset-text {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
\ No newline at end of file
src/components/layout-element/text/app-preset-text/app-preset-text.vue
浏览文件 @ 1aef406f
<template>
<div :class="['app-preset-text', `app-preset-text--${contentType.toLowerCase()}`]">
<div :class="className">
<!-- 直接内容类型 -->
<template v-if="Object.is(contentType, 'RAW')">
<template v-if="Object.is(renderMode, 'TEXT')">
......@@ -58,6 +58,14 @@ export default class AppPresetText extends Vue {
*/
@Prop() public value!: any;
/**
* 名称
*
* @type {string}
* @memberof AppPresetText
*/
@Prop() public name!: string;
/**
* 内容类型
*
......@@ -98,11 +106,11 @@ export default class AppPresetText extends Vue {
@Prop() public imageClass?: string;
/**
* 动态图片路径
* 图片路径
*
* @memberof AppPresetText
*/
protected dynaImgUrl: string = '';
@Prop() public imgUrl?: string;
/**
* 样式
......@@ -110,16 +118,7 @@ export default class AppPresetText extends Vue {
* @memberof AppPresetText
*/
protected cssStyle: string = '';
/**
* 图片路径
*
* @memberof AppPresetText
*/
get imgUrl(): string {
return this.dynaImgUrl;
}
/**
* 内容
*
......@@ -142,6 +141,15 @@ export default class AppPresetText extends Vue {
return content;
}
/**
* 类名
*
* @memberof AppPresetText
*/
get className(): string {
return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name}`;
}
/**
* Vue生命周期 --- Created
*
......@@ -149,7 +157,6 @@ export default class AppPresetText extends Vue {
*/
created() {
this.handleText();
this.handleDynaImg();
}
/**
......@@ -163,30 +170,6 @@ export default class AppPresetText extends Vue {
}
}
/**
* 处理动态图片
*
* @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">
......
src/components/layout-element/text/app-preset-title/app-preset-title.vue
浏览文件 @ 1aef406f
<template>
<h1 class="app-preset-title">{{ curValue }}</h1>
<h1 :class="className">{{ curValue }}</h1>
</template>
<script lang="ts">
import { Environment } from "@/environments/environment";
import { Vue, Component } from 'vue-property-decorator';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetTitle extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppPresetTitle
*/
@Prop() public name!: string;
/**
* 类名
*
* @memberof AppPresetTitle
*/
get className(): string {
return `app-preset-title ${this.name}`;
}
/**
* 当前值
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或