|
|
@@ -3,11 +3,12 @@
|
|
|
<view class="richtext-preview-box" @click="() => !disabled && !readonly ? edit() : preview()">
|
|
|
<Parse v-if="modelValue" :content="modelValue" containerStyle="max-height:400px" />
|
|
|
<Text v-else color="text.second">{{placeholder}}</Text>
|
|
|
+ <view v-if="modelValue" class="richtext-preview-mask" :style="maskStyle" />
|
|
|
</view>
|
|
|
- <FlexRow :gap="20" align="center">
|
|
|
+ <FlexRow :gap="20" justify="flex-end" align="center">
|
|
|
<Button v-if="!disabled" icon="browse" text="预览" size="small" @click="preview" />
|
|
|
<Button v-if="!disabled && !readonly" icon="edit" text="编辑" size="small" @click="edit" type="primary" />
|
|
|
- <Text v-if="maxLength > 0">{{ modelValue?.length || 0 }}/{{ maxLength }} 字</Text>
|
|
|
+ <Text v-if="maxLength > 0" :text="`${modelValue?.length || 0}/${maxLength} 字`" fontConfig="subText" textAlign="right" />
|
|
|
</FlexRow>
|
|
|
</FlexCol>
|
|
|
</template>
|
|
|
@@ -20,6 +21,8 @@ import Button from '@/components/basic/Button.vue';
|
|
|
import Text from '@/components/basic/Text.vue';
|
|
|
import FlexCol from '@/components/layout/FlexCol.vue';
|
|
|
import FlexRow from '@/components/layout/FlexRow.vue';
|
|
|
+import { propGetThemeVar, useTheme } from '@/components/theme/ThemeDefine';
|
|
|
+import { computed } from 'vue';
|
|
|
|
|
|
const props = defineProps({
|
|
|
modelValue: {
|
|
|
@@ -42,9 +45,20 @@ const props = defineProps({
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
+ maskColor: {
|
|
|
+ type: String,
|
|
|
+ default: () => propGetThemeVar('RichTextEditorMaskColor', 'white'),
|
|
|
+ }
|
|
|
})
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
+
|
|
|
+const theme = useTheme();
|
|
|
+
|
|
|
let editorOpened = false;
|
|
|
+const maskStyle = computed(() => ({
|
|
|
+ height: theme.resolveThemeSize('RichTextEditorMaskHeight', 100),
|
|
|
+ background: `linear-gradient(0deg, ${theme.resolveThemeColor(props.maskColor)} 0%, transparent 100%)`,
|
|
|
+}));
|
|
|
|
|
|
function preview() {
|
|
|
uni.setStorage({
|
|
|
@@ -79,8 +93,16 @@ onPageShow(() => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.richtext-preview-box {
|
|
|
+ position: relative;
|
|
|
flex: 1;
|
|
|
min-height: 400rpx;
|
|
|
margin-bottom: 15rpx;
|
|
|
+
|
|
|
+ .richtext-preview-mask {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -1px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|