add StoryEditor and StoryReader
This commit is contained in:
parent
482f931f7e
commit
a6e090d858
@ -11,5 +11,8 @@
|
||||
"url": "https://git.faronear.org/npm/unip.part"
|
||||
},
|
||||
"author": "luk.lu",
|
||||
"license": "ISC"
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"vuedraggable": "^2.24.0"
|
||||
}
|
||||
}
|
||||
|
||||
137
ucStoryEditor/ucStoryEditor.vue
Normal file
137
ucStoryEditor/ucStoryEditor.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import draggable from 'vuedraggable'
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
// #ifdef H5
|
||||
components: {
|
||||
draggable,
|
||||
},
|
||||
// #endif
|
||||
props: {
|
||||
storyContent: {
|
||||
type: Array,
|
||||
default: ()=>[],
|
||||
},
|
||||
allowImage: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
allowVideo: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// onClick: {
|
||||
// type: Function,
|
||||
// default: null,
|
||||
// },
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
methods: {
|
||||
addText() {
|
||||
if (!Array.isArray(this.storyContent)) {
|
||||
this.storyContent = []
|
||||
}
|
||||
this.storyContent.push({ text: '' })
|
||||
console.log(this.storyContent)
|
||||
},
|
||||
async addImage() {
|
||||
if (!Array.isArray(this.storyContent)) {
|
||||
this.storyContent = []
|
||||
}
|
||||
let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'image' })
|
||||
if (_state === 'SUCCESS') {
|
||||
this.storyContent.push({ image: fileID })
|
||||
}
|
||||
},
|
||||
async addVideo() {
|
||||
if (!Array.isArray(this.storyContent)) {
|
||||
this.storyContent = []
|
||||
}
|
||||
let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'video' })
|
||||
if (_state === 'SUCCESS') {
|
||||
this.storyContent.push({ video: fileID })
|
||||
}
|
||||
},
|
||||
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 : '',
|
||||
success: ({ confirm, cancel }) => {
|
||||
if (confirm) {
|
||||
this.storyContent.splice(index, 1)
|
||||
if (this.storyContent.length === 0) {
|
||||
this.storyContent.push({ text: '' })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
} else {
|
||||
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'}) })
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view style="display: flex; flex-flow: column nowrap; box-sizing: border-box">
|
||||
<view>
|
||||
<!-- #ifdef H5 -->
|
||||
<draggable v-model="storyContent">
|
||||
<!-- #endif -->
|
||||
<view v-for="(section, index) of storyContent" :key="index" style="margin: 5px; position: relative">
|
||||
<textarea
|
||||
v-if="section.text !== undefined"
|
||||
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=""
|
||||
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"
|
||||
@click="deleteSection(index)"
|
||||
></i>
|
||||
</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>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
ucStoryReader/ucStoryReader.vue
Normal file
38
ucStoryReader/ucStoryReader.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
storyContent: {
|
||||
type: Array,
|
||||
default: ()=>[],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user