把基于elementUI的 StoryReader/Editor 改为基于 uview 的
This commit is contained in:
parent
7da341fe27
commit
c6f4c9ba6e
@ -12,26 +12,35 @@ export default {
|
||||
props: {
|
||||
storyContent: {
|
||||
type: Array,
|
||||
default: ()=>[],
|
||||
default: [],
|
||||
},
|
||||
allowText: {
|
||||
type: [Boolean, String],
|
||||
default: true,
|
||||
},
|
||||
allowImage: {
|
||||
type: Boolean,
|
||||
type: [Boolean, String],
|
||||
default: true,
|
||||
},
|
||||
allowVideo: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
type: [Boolean, String],
|
||||
default: true,
|
||||
},
|
||||
showSubmitButton: {
|
||||
type: [Boolean, String],
|
||||
default: true,
|
||||
},
|
||||
onClick: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
// onClick: {
|
||||
// type: Function,
|
||||
// default: null,
|
||||
// },
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
methods: {
|
||||
addText() {
|
||||
if (!Array.isArray(this.storyContent)) {
|
||||
@ -61,8 +70,8 @@ export default {
|
||||
deleteSection(index) {
|
||||
if (this.storyContent[index].text || this.storyContent[index].image || this.storyContent[index].video) {
|
||||
uni.showModal({
|
||||
title: this.$ll({deDE:'Sind Sie sicher den Abschnitt zu entfernen?', enUS:'Are you sure to delete this section?', zhCN:'真的要删除这个段落吗？'}),
|
||||
content: this.storyContent[index].text ? this.storyContent[index].text : '',
|
||||
title: this.$ll({ zhCN: '真的要删除这个段落吗？', enUS: 'Are you sure to delete this section?' }),
|
||||
content: this.storyContent[index].text ? this.storyContent[index].text.substr(0, 10) : '',
|
||||
success: ({ confirm, cancel }) => {
|
||||
if (confirm) {
|
||||
this.storyContent.splice(index, 1)
|
||||
@ -76,7 +85,7 @@ export default {
|
||||
if (this.storyContent.length > 1) {
|
||||
this.storyContent.splice(index, 1)
|
||||
} else {
|
||||
this.$message({ type: 'warning', message: this.$ll({zhCN:'不能删除唯一的段落', enUS:'Cannot delete the last section', deDE:'Der letzte Abschnitt kann nicht entfernen'}) })
|
||||
this.$T.showToast({ type: this.$T.YELLOW, title: this.$ll({ zhCN: '不能删除唯一的段落！', enUS: 'Cannot delete the last section!' }) })
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -96,42 +105,51 @@ export default {
|
||||
v-model="section.text"
|
||||
maxlength="-1"
|
||||
auto-height="true"
|
||||
style="box-sizing: border-box; line-height: 1.5em; min-height: 3em; width: 100%; padding: 0 5px; border: 1px solid #eee; background: white"
|
||||
placeholder=""
|
||||
style="width: inherit; min-height: 3em; line-height: 1.5em; padding: 5px; border: 1px solid #eee; background: white"
|
||||
:placeholder="$ll({zhCN:'新的段落', enUS:'New Section'})"
|
||||
placeholder-style="font-size:small"
|
||||
></textarea>
|
||||
<img v-if="section.image" :src="section.image" style="width: 100%" />
|
||||
<video v-if="section.video" :src="section.video" style="width: 100%"></video>
|
||||
<i
|
||||
class="el-icon-circle-close"
|
||||
style="position: absolute; top: 0px; right: -10px; border-radius: 100%; cursor: pointer; font-size: 20px"
|
||||
<video v-if="section.video" :src="section.video" style="width: 100%" autoplay :controls="true"></video>
|
||||
<u-icon
|
||||
class="sectionHandler"
|
||||
name="close-circle-fill"
|
||||
size="40"
|
||||
style="position: absolute; top: 0; right: 0; border-radius: 100%; cursor: pointer; color: #909399"
|
||||
@click="deleteSection(index)"
|
||||
></i>
|
||||
></u-icon>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
</draggable>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<view class="sActionBar">
|
||||
<view style="display: flex; flex-flow: row nowrap; align-items: center; width: 100%">
|
||||
<el-button size="mini" type="primary" icon="" @click="addText">{{ $ll({deDE:'Text', enUS:'Text', zhCN:'文字'}) }}</el-button>
|
||||
<el-button v-if="allowImage" size="mini" type="primary" icon="" @click="addImage">{{ $ll({deDE:'Bild', enUS:'Image', zhCN:'图片'}) }}</el-button>
|
||||
<el-button v-if="allowVideo" size="mini" type="primary" icon="" @click="addVideo">{{ $ll({deDE:'Video', enUS:'Video', zhCN:'视频'}) }}</el-button>
|
||||
<view style="width: 100%; display: flex; flex-flow: column nowrap; align-items: flex-start; padding: 5px;">
|
||||
<view style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%">
|
||||
<view>
|
||||
<u-button shape="circle" size="mini" :type="$T.WHITE_BUTTON" @click="addText" v-if="allowText === true || allowText === 'true'" style="margin: 0 5px">
|
||||
<u-icon name="edit-pen-fill"></u-icon>
|
||||
{{ $ll({ zhCN:'文字', enUS:'Text' }) || 'Text' }}
|
||||
</u-button>
|
||||
<u-button shape="circle" size="mini" :type="$T.WHITE_BUTTON" @click="addImage" v-if="allowImage === true || allowImage === 'true'" style="margin: 0 5px">
|
||||
<u-icon name="camera-fill"></u-icon>
|
||||
{{ $ll({ zhCN:'照片', enUS:'Photo' }) || 'Photo' }}
|
||||
</u-button>
|
||||
<u-button shape="circle" size="mini" :type="$T.WHITE_BUTTON" @click="addVideo" v-if="allowVideo === true || allowVideo === 'true'" style="margin: 0 5px">
|
||||
<u-icon name="videocamera-fill" custom-prefix="log-icon"></u-icon>
|
||||
{{ $ll({ zhCN:'视频', enUS:'Video' }) || 'Video' }}
|
||||
</u-button>
|
||||
</view>
|
||||
<view v-if="showSubmitButton===true || showSubmitButton==='true'">
|
||||
<u-button size="mini" :type="$T.RED" @click="onClick"><u-icon name="checkbox-mark"></u-icon> {{ $ll({zhCN:'发表', enUS:'Publish'}) || 'Publish' }}</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sActionBar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
padding: 5px;
|
||||
.u-btn {
|
||||
margin: 5px 5px;
|
||||
}
|
||||
.u-btn {
|
||||
align-items: baseline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@ export default {
|
||||
props: {
|
||||
storyContent: {
|
||||
type: Array,
|
||||
default: ()=>[],
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@ -12,27 +12,18 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view style="display: flex; flex-flow: column nowrap;">
|
||||
<view
|
||||
v-for="(section, index) of storyContent"
|
||||
:key="index"
|
||||
style="display: flex; flex-flow: column nowrap; padding: 5px; position: relative;"
|
||||
>
|
||||
<text v-if="section.text !== undefined" style="box-sizing: border-box; width: 100%; padding: 5px;">{{ section.text }}</text>
|
||||
<img v-if="section.image" :src="section.image" style="width: 100%;" />
|
||||
<video v-if="section.video" :src="section.video" style="width: 100%;" autoplay></video>
|
||||
<view style="display: flex; flex-flow: column nowrap">
|
||||
<view v-for="(section, index) of storyContent" :key="index" style="display: flex; flex-flow: column nowrap; padding: 5px; position: relative">
|
||||
<text v-if="section.text !== undefined" style="box-sizing: border-box; width: 100%">{{ section.text }}</text>
|
||||
<img v-if="section.image" :src="section.image" style="width: 100%" />
|
||||
<video v-if="section.video" :src="section.video" style="width: 100%" autoplay :controls="true"></video>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user