<template>
|
<view @touchmove.stop.prevent="moveStop">
|
<view class="sv-editor-popup" v-if="showPop">
|
<view class="editor-popup-header">
|
<view class="header-left" @click="cancel">取消</view>
|
<view class="header-title">{{ title }}</view>
|
<view class="header-right" @click="confirm">确认</view>
|
</view>
|
<view class="sv-editor-popup-container">
|
<!-- 添加图片 -->
|
<view class="popup-image" v-if="toolName == 'image'">
|
<view class="popup-form-input">
|
<text class="form-label">网络图片</text>
|
<input v-model="imageForm.link" type="text" class="form-input" placeholder="请输入图片地址" />
|
</view>
|
<view class="popup-form-input">
|
<text class="form-label">本地图片</text>
|
<button size="mini" class="form-button" @click="selectImage">选择文件</button>
|
<view class="form-thumbnail">
|
<image
|
class="form-thumbnail-item form-thumbnail-image"
|
v-for="(item, index) in imageForm.file"
|
:key="item.path"
|
:src="item.path"
|
@click="deleteImage(index)"
|
></image>
|
</view>
|
</view>
|
</view>
|
<!-- 添加视频 -->
|
<view class="popup-video" v-if="toolName == 'video'">
|
<view class="popup-form-input">
|
<text class="form-label">网络视频</text>
|
<input v-model="videoForm.link" type="text" class="form-input" placeholder="请输入视频地址" />
|
</view>
|
<view class="popup-form-input">
|
<text class="form-label">本地视频</text>
|
<button size="mini" class="form-button" @click="selectVideo">选择文件</button>
|
<view class="form-thumbnail" v-if="videoForm.file.tempFilePath">
|
<view class="form-thumbnail-item form-thumbnail-icon" @click="deleteVideo">
|
<text class="iconfont icon-video"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 添加链接 -->
|
<view class="popup-link" v-if="toolName == 'link'">
|
<view class="popup-form-input">
|
<text class="form-label">链接地址</text>
|
<input v-model="linkForm.link" type="text" class="form-input" placeholder="请输入链接地址 (必填)" />
|
</view>
|
<view class="popup-form-input">
|
<text class="form-label">链接文本</text>
|
<input v-model="linkForm.text" type="text" class="form-input" placeholder="请输入链接文本 (可选)" />
|
</view>
|
</view>
|
<!-- 添加附件 -->
|
<view class="popup-attachment" v-if="toolName == 'attachment'">
|
<view class="popup-form-input">
|
<text class="form-label">附件地址</text>
|
<input v-model="attachmentForm.link" type="text" class="form-input" placeholder="请输入附件地址" />
|
</view>
|
<view class="popup-form-input">
|
<text class="form-label">附件描述</text>
|
<input v-model="attachmentForm.text" type="text" class="form-input" placeholder="请输入附件描述" />
|
</view>
|
<view class="popup-form-input">
|
<text class="form-label">本地文件</text>
|
<button size="mini" class="form-button" @click="selectAttachment">选择文件</button>
|
<view class="form-thumbnail" v-if="attachmentForm.file.path">
|
<view class="form-thumbnail-item form-thumbnail-icon" @click="deleteAttachment">
|
<text class="iconfont icon-huixingzhen"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 提及 -->
|
<view class="popup-at" v-if="toolName == 'at'">
|
<slot name="at"></slot>
|
</view>
|
<!-- 话题 -->
|
<view class="popup-topic" v-if="toolName == 'topic'">
|
<slot name="topic"></slot>
|
</view>
|
</view>
|
</view>
|
<view class="mask" v-if="showPop" @click.stop="onMask"></view>
|
<!-- #ifdef APP -->
|
<sv-choose-file ref="chooseFileRef" @confirm="selectAppFile"></sv-choose-file>
|
<!-- #endif -->
|
</view>
|
</template>
|
|
<script>
|
/**
|
* 扩展工具面板弹窗
|
* @author sonve
|
* @version 1.0.0
|
* @date 2024-12-04
|
*/
|
|
import { moreToolList } from '../common/tool-list.js'
|
import SvChooseFile from './sv-choose-file.vue'
|
|
export default {
|
name: 'sv-editor-popup-more',
|
// #ifdef MP-WEIXIN
|
// 微信小程序特殊配置
|
options: {
|
addGlobalClass: true,
|
virtualHost: true,
|
styleIsolation: 'shared'
|
},
|
// #endif
|
components: {
|
SvChooseFile
|
},
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
toolName: {
|
type: [String, null],
|
default: 'image'
|
},
|
// 点击遮罩层自动关闭弹窗
|
maskClose: {
|
type: Boolean,
|
default: true
|
}
|
},
|
emits: ['update:show', 'open', 'close', 'onMask', 'cancel', 'confirm'],
|
// #ifdef VUE2
|
model: {
|
prop: 'show',
|
event: 'update:show'
|
},
|
// #endif
|
data() {
|
return {
|
imageForm: {
|
link: '',
|
file: []
|
},
|
videoForm: {
|
link: '',
|
file: {}
|
},
|
linkForm: {
|
link: '',
|
text: ''
|
},
|
attachmentForm: {
|
link: '',
|
text: '',
|
file: {}
|
}
|
}
|
},
|
computed: {
|
showPop: {
|
set(newVal) {
|
this.$emit('update:show', newVal)
|
},
|
get() {
|
return this.show
|
}
|
},
|
title() {
|
return moreToolList.find((item) => item.name == this.toolName)?.title
|
}
|
},
|
methods: {
|
// 阻止滑动穿透
|
moveStop() {},
|
open() {
|
this.showPop = true
|
this.$emit('open')
|
},
|
close() {
|
this.showPop = false
|
this.$emit('close')
|
},
|
onMask() {
|
if (this.maskClose) this.close()
|
this.$emit('onMask')
|
},
|
cancel() {
|
this.$emit('cancel')
|
this.close()
|
},
|
confirm() {
|
let params = {}
|
params.name = this.toolName
|
switch (this.toolName) {
|
case 'image':
|
Object.assign(params, this.imageForm)
|
break
|
case 'video':
|
Object.assign(params, this.videoForm)
|
break
|
case 'link':
|
Object.assign(params, this.linkForm)
|
break
|
case 'attachment':
|
Object.assign(params, this.attachmentForm)
|
break
|
}
|
this.$emit('confirm', params)
|
},
|
/**
|
* 业务方法
|
*/
|
// 选择图片
|
selectImage() {
|
// #ifdef APP || H5
|
uni.chooseImage({
|
count: 5, // 默认9，此处限制为5
|
success: (res) => {
|
this.imageForm.file = res.tempFiles
|
},
|
fail: () => {
|
uni.showToast({
|
title: '未授权访问相册权限，请授权后使用',
|
icon: 'none'
|
})
|
}
|
})
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
uni.chooseMedia({
|
count: 5, // 默认9，此处限制为5
|
mediaType: ['image'],
|
success: (res) => {
|
this.imageForm.file = res.tempFiles
|
},
|
fail: () => {
|
uni.showToast({
|
title: '未授权访问相册权限，请授权后使用',
|
icon: 'none'
|
})
|
}
|
})
|
// #endif
|
},
|
// 删除指定图片
|
deleteImage(index) {
|
this.imageForm.file.splice(index, 1)
|
},
|
// 选择视频
|
selectVideo() {
|
uni.chooseVideo({
|
sourceType: ['camera', 'album'],
|
success: (res) => {
|
this.videoForm.file = res
|
},
|
fail: () => {
|
uni.showToast({
|
title: '未授权访问媒体权限，请授权后使用',
|
icon: 'none'
|
})
|
}
|
})
|
},
|
// 删除选择的本地视频
|
deleteVideo() {
|
this.videoForm.file = {}
|
},
|
// 选择附件
|
selectAttachment() {
|
// #ifdef H5
|
uni.chooseFile({
|
count: 1, // 默认100，此处限制为1
|
extension: ['.doc', '.docx', '.xls', '.xlsx', '.pdf', '.zip', '.rar'],
|
success: (res) => {
|
this.attachmentForm.file = res.tempFiles[0]
|
},
|
fail: () => {
|
uni.showToast({
|
title: '未授权访问文件权限，请授权后使用',
|
icon: 'none'
|
})
|
}
|
})
|
// #endif
|
|
// #ifdef APP
|
this.$refs.chooseFileRef.chooseFile()
|
// 选择文件完成后触发selectAppFile方法
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
wx.chooseMessageFile({
|
count: 1, // 最多可以选择的文件个数，可以 0～100，此处限制为1
|
type: 'file', // 可以选择除了图片和视频之外的其它的文件
|
extension: ['.doc', '.docx', '.xls', '.xlsx', '.pdf', '.zip', '.rar'],
|
success: (res) => {
|
this.attachmentForm.file = res.tempFiles[0]
|
},
|
fail: () => {
|
uni.showToast({
|
title: '未授权访问文件权限，请授权后使用',
|
icon: 'none'
|
})
|
}
|
})
|
// #endif
|
},
|
// 选择文件完成后触发
|
selectAppFile(files) {
|
this.attachmentForm.file = files[0]
|
},
|
// 删除指定附件
|
deleteAttachment() {
|
this.attachmentForm.file = {}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '../icons/iconfont.css';
|
|
.sv-editor-popup {
|
--editor-popup-radius: 30rpx 30rpx 0 0;
|
--editor-popup-bgcolor: #ffffff;
|
--editor-popup-confirm: #4d80f0;
|
--editor-popup-cancel: #fa4350;
|
--thumbnail-icon-bgcolor: #cccccc;
|
--editor-popup-header-height: 50rpx;
|
|
width: 100%;
|
position: absolute;
|
bottom: 0;
|
z-index: 10000;
|
border-radius: var(--editor-popup-radius);
|
padding: 30rpx;
|
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
background-color: var(--editor-popup-bgcolor);
|
box-sizing: border-box;
|
|
.editor-popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
box-sizing: border-box;
|
height: var(--editor-popup-header-height);
|
|
.header-left {
|
color: var(--editor-popup-cancel);
|
}
|
.header-right {
|
color: var(--editor-popup-confirm);
|
}
|
}
|
|
.sv-editor-popup-container {
|
box-sizing: border-box;
|
|
.popup-form-input {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
box-sizing: border-box;
|
|
.form-label {
|
margin-right: 20rpx;
|
flex-shrink: 0;
|
}
|
|
.form-input {
|
flex: 1;
|
padding: 12rpx;
|
border: 1rpx solid #eeeeee;
|
border-radius: 8rpx;
|
line-height: unset;
|
height: unset;
|
min-height: unset;
|
box-sizing: border-box;
|
|
.uni-input-placeholder {
|
color: #dddddd;
|
}
|
}
|
|
.form-button {
|
margin-left: unset;
|
margin-right: unset;
|
}
|
|
.form-thumbnail {
|
.form-thumbnail-item {
|
width: 25px;
|
height: 25px;
|
margin-left: 20rpx;
|
position: relative;
|
border: 1rpx solid #eeeeee;
|
|
&:active {
|
border-color: #d83b01;
|
|
&::after {
|
content: 'X';
|
font-size: 25px;
|
font-weight: bold;
|
color: #d83b01;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
|
.form-thumbnail-image {
|
vertical-align: bottom; // 取消image标签底部留白
|
}
|
|
.form-thumbnail-icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: var(--form-thumbnail-icon-bgcolor);
|
}
|
}
|
}
|
}
|
}
|
.mask {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 9999;
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
</style>
|
