feat: 文字组件添加链接功能

src/packages/components/Informations/Texts/TextCommon/config.ts

@@ -15,6 +15,7 @@ export const WritingModeObject = {
 
 export const option = {
   link:'',
+  linkHead:'http://',
   dataset: '我是文本',
   fontSize: 20,
   fontColor: '#ffffff',

src/packages/components/Informations/Texts/TextCommon/config.vue

@@ -7,7 +7,7 @@
     </setting-item-box>
     <setting-item-box name="链接" :alone="true">
       <setting-item>
-        <n-space><n-input v-model:value="optionData.link" size="small"></n-input><n-button secondary size="small" @click="handleLinkClick"  >点击</n-button></n-space>
+        <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>
       </setting-item>
     </setting-item-box>
   </collapse-item>
@@ -74,7 +74,6 @@ import {
   SettingItemBox,
   SettingItem
 } from '@/components/Pages/ChartItemSetting'
-import { useMessage } from 'naive-ui'
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
@@ -89,13 +88,15 @@ const verticalOptions = [{
   label: WritingModeEnum.VERTICAL,
   value: WritingModeObject[WritingModeEnum.VERTICAL]
 }]
-const message = useMessage()
 const handleLinkClick = ()=>{
-  
-  if(props.optionData.link){
-    window.open(props.optionData.link)
-  }else{
-    message.info("链接未输入")
-  }
+    window.open(props.optionData.linkHead+props.optionData.link)
 }
+const linkHeadOptions = [{
+          label: 'http://',
+          value: 'http://'
+        },
+        {
+          label: 'https://',
+          value: 'https://'
+        }]
 </script>

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -38,6 +38,7 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
+  linkHead,
   link,
   dataset,
   fontColor,
@@ -75,7 +76,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
 
 //打开链接
 const click = () => {
-  window.open(link.value)
+  window.open(linkHead.value+link.value)
 }
 </script>