新增辅助线显示
于肖磊
parent
6bdd08d084
commit
3982943b91
|
|
@ -1,11 +1,28 @@
|
|||
<template>
|
||||
<!-- 视频 -->
|
||||
<view :style="propStyle + 'height:100%;color:' + com_data.text_color + ';'">
|
||||
{{ isEmpty(form_value) ? '没有内容' : form_value }}
|
||||
<view>
|
||||
<template v-if="file.length > 0">
|
||||
<view class="flex-row gap-20 align-c">
|
||||
<span class="file-title text-line-1" :style="propStyle + 'width:auto;height:100%'">{{ file[0].original || '' }}</span>
|
||||
<view class="oprate cr-blue">
|
||||
<view class="icon" :data-url="file[0].url" @tap="copy">
|
||||
<iconfont name="icon-copy" size="20rpx" />
|
||||
</view>
|
||||
<span class="divider"></span>
|
||||
<view class="icon" :data-name="file[0].original" :data-url="file[0].url" @tap="download">
|
||||
<iconfont name="icon-download-btn" size="20rpx" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="file-title" :style="propStyle + 'width:100%;height:100%'">暂无文件</span>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { isEmpty } from '@/common/js/common/common.js';
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -33,7 +50,7 @@
|
|||
data() {
|
||||
return {
|
||||
com_data: {},
|
||||
form_value: '',
|
||||
file: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -52,11 +69,66 @@
|
|||
const com_data = this.propValue;
|
||||
this.setData({
|
||||
com_data: com_data,
|
||||
form_value: com_data?.form_value || '',
|
||||
file: com_data.file || [],
|
||||
});
|
||||
},
|
||||
// 复制到剪切板
|
||||
copy(e) {
|
||||
const { url, name } = e.currentTarget.dataset;
|
||||
/* 创建一个临时的textarea元素 */
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = url;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
try {
|
||||
const successful = document.execCommand('copy');
|
||||
const msg = successful ? '成功复制！' : '复制失败';
|
||||
app.globalData.showToast(msg);
|
||||
} catch (err) {
|
||||
console.error('复制失败', err);
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
},
|
||||
// 文件下载
|
||||
download(e) {
|
||||
const { url, name } = e.currentTarget.dataset;
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = name;
|
||||
link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lanbg="scss" scoped>
|
||||
.divider {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background-color: #e4e7ec;
|
||||
}
|
||||
.file-title {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 34rpx;
|
||||
font-style: normal;
|
||||
}
|
||||
.oprate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 30rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2rpx 8rpx 0px rgba(0,0,0,0.1);
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<!-- 视频 -->
|
||||
<view :style="propStyle + 'height:100%;color:' + com_data.text_color + ';'">
|
||||
{{ isEmpty(form_value) ? '没有内容' : form_value }}
|
||||
<view class="content w flex-1 flex-row" :style="propStyle + 'height: 100%;' + line_location">
|
||||
<view :style="border_style"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -33,7 +32,8 @@
|
|||
data() {
|
||||
return {
|
||||
com_data: {},
|
||||
form_value: '',
|
||||
line_location: '',
|
||||
border_style: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -50,9 +50,20 @@
|
|||
// 初始化数据
|
||||
init() {
|
||||
const com_data = this.propValue;
|
||||
let border_style = '';
|
||||
if (!this.propIsCustom) {
|
||||
border_style =`width: ${ com_data.line_width }%;border-bottom: ${ com_data.line_size }px ${ com_data.line_style } ${ com_data.line_color };`;
|
||||
} else {
|
||||
if (com_data.line_type === 'horizontal') {
|
||||
border_style = `width: ${com_data.com_width * 2}rpx;margin: 10rpx 0;border-bottom: ${com_data.line_size * 2 }rpx ${com_data.line_style} ${com_data.line_color};`;
|
||||
} else {
|
||||
border_style = `height: ${com_data.com_height * 2}rpx;margin: 0 10rpx;border-right: ${com_data.line_size * 2 }rpx ${com_data.line_style} ${com_data.line_color};`;
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
com_data: com_data,
|
||||
form_value: com_data?.form_value || '',
|
||||
border_style: border_style,
|
||||
line_location: `justify-content: ${ com_data.line_location };`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<!-- 左右模式 -->
|
||||
<!-- <template v-if="flex_direction == 'row'"> -->
|
||||
<view :class="'wh-auto ht-auto ' + (flex_direction == 'row' ? 'flex-row align-b gap-10' : 'flex-col gap-10')">
|
||||
<view class="field-label flex-row align-c gap-10" :style="field_label_style">
|
||||
<view v-if="item.key !== 'auxiliary-line'" class="field-label flex-row align-c gap-10" :style="field_label_style">
|
||||
<view class="flex-row align-c" :style="title_style">{{ item.com_data.title }}<view v-if="item.com_data.is_required == '1'" class="required">*</view></view>
|
||||
<view v-if="item.com_data.common_config.help_is_show == '1' && !isEmpty(item.com_data.common_config.help_explain)" :data-value="item.com_data.common_config.help_explain" @tap="help_icon_event">
|
||||
<iconfont name="icon-miaosha-hdgz" :size="help_icon_style" color="#999"></iconfont>
|
||||
|
|
@ -67,6 +67,12 @@
|
|||
<view v-else-if="item.key == 'text'">
|
||||
<component-text :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-text>
|
||||
</view>
|
||||
<view v-else-if="item.key == 'attachments'">
|
||||
<component-attachments :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-attachments>
|
||||
</view>
|
||||
<view v-else-if="item.key == 'auxiliary-line'">
|
||||
<component-auxiliary-line :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-auxiliary-line>
|
||||
</view>
|
||||
<view v-if="!isEmpty(item.com_data.common_config.error_text)" class="field-invalid-info">{{ item.com_data.common_config.error_text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -112,6 +118,8 @@ import componentScore from '@/pages/form-input/components/form-input/score.vue';
|
|||
import componentImage from '@/pages/form-input/components/form-input/image.vue';
|
||||
import componentVideo from '@/pages/form-input/components/form-input/video.vue';
|
||||
import componentText from '@/pages/form-input/components/form-input/text.vue';
|
||||
import componentAttachments from '@/pages/form-input/components/form-input/attachments.vue';
|
||||
import componentAuxiliaryLine from '@/pages/form-input/components/form-input/auxiliary-line.vue';
|
||||
import componentRegionPicker from '@/pages/common/components/region-picker/region-picker';
|
||||
export default {
|
||||
name: 'formInput',
|
||||
|
|
@ -132,7 +140,9 @@ export default {
|
|||
componentScore,
|
||||
componentImage,
|
||||
componentVideo,
|
||||
componentText
|
||||
componentText,
|
||||
componentAttachments,
|
||||
componentAuxiliaryLine
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue