feat: 新增文本跳转功能

This commit is contained in:
奔跑的面条 2022-09-22 19:17:26 +08:00
parent e0bc13cccb
commit ad29bf5f26

@ -7,7 +7,16 @@
</setting-item-box> </setting-item-box>
<setting-item-box name="链接" :alone="true"> <setting-item-box name="链接" :alone="true">
<setting-item> <setting-item>
<n-input-group><n-select v-model:value="optionData.linkHead" size="small" :style="{ width: '33%' }" :options="linkHeadOptions" /><n-input v-model:value="optionData.link" size="small"></n-input><n-button :disabled="!optionData.link" secondary size="small" @click="handleLinkClick" >跳转</n-button></n-input-group> <n-input-group>
<n-select
v-model:value="optionData.linkHead"
size="small"
:style="{ width: '80%' }"
:options="linkHeadOptions"
/>
<n-input v-model:value="optionData.link" size="small"></n-input>
<n-button :disabled="!optionData.link" secondary size="small" @click="handleLinkClick">跳转</n-button>
</n-input-group>
</setting-item> </setting-item>
</setting-item-box> </setting-item-box>
</collapse-item> </collapse-item>
@ -21,7 +30,7 @@
<setting-item name="文本方向"> <setting-item name="文本方向">
<n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" /> <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
</setting-item> </setting-item>
<setting-item name="X轴内边距"> <setting-item name="X轴内边距">
<n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number> <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
</setting-item> </setting-item>
@ -57,7 +66,7 @@
></n-input-number> ></n-input-number>
</setting-item> </setting-item>
</setting-item-box> </setting-item-box>
<setting-item-box name="背景" :alone="true"> <setting-item-box name="背景" :alone="true">
<setting-item name="背景颜色"> <setting-item name="背景颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker> <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
@ -69,11 +78,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { PropType } from 'vue' import { PropType } from 'vue'
import { option, WritingModeEnum, WritingModeObject } from './config' import { option, WritingModeEnum, WritingModeObject } from './config'
import { import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
const props = defineProps({ const props = defineProps({
optionData: { optionData: {
type: Object as PropType<typeof option>, type: Object as PropType<typeof option>,
@ -81,22 +86,27 @@ const props = defineProps({
} }
}) })
const verticalOptions = [{ const verticalOptions = [
label: WritingModeEnum.HORIZONTAL, {
value: WritingModeObject[WritingModeEnum.HORIZONTAL] label: WritingModeEnum.HORIZONTAL,
}, { value: WritingModeObject[WritingModeEnum.HORIZONTAL]
label: WritingModeEnum.VERTICAL, },
value: WritingModeObject[WritingModeEnum.VERTICAL] {
}] label: WritingModeEnum.VERTICAL,
const handleLinkClick = ()=>{ value: WritingModeObject[WritingModeEnum.VERTICAL]
window.open(props.optionData.linkHead+props.optionData.link) }
]
const handleLinkClick = () => {
window.open(props.optionData.linkHead + props.optionData.link)
} }
const linkHeadOptions = [{ const linkHeadOptions = [
label: 'http://', {
value: 'http://' label: 'http://',
}, value: 'http://'
{ },
label: 'https://', {
value: 'https://' label: 'https://',
}] value: 'https://'
}
]
</script> </script>