feat: text组件增加点击链接弹框

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

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

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

@@ -5,6 +5,11 @@
         <n-input v-model:value="optionData.dataset" size="small"></n-input>
       </setting-item>
     </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>
+      </setting-item>
+    </setting-item-box>
   </collapse-item>
 
   <collapse-item name="样式" :expanded="true">
@@ -69,7 +74,7 @@ import {
   SettingItemBox,
   SettingItem
 } from '@/components/Pages/ChartItemSetting'
-
+import { useMessage } from 'naive-ui'
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
@@ -84,4 +89,13 @@ 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("链接未输入")
+  }
+}
 </script>

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

@@ -15,7 +15,10 @@
 
       background-color:${backgroundColor}`"
     >
-      {{ option.dataset }}
+      <n-button v-if="link" @click="click" text>
+        {{ dataset }}
+      </n-button>
+      <span v-else>{{ dataset }}</span>
     </div>
   </div>
 </template>
@@ -35,6 +38,7 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
+  link,
   dataset,
   fontColor,
   fontSize,
@@ -68,6 +72,11 @@ watch(
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
   option.dataset = newData
 })
+
+//打开链接
+const click = () => {
+  window.open(link.value)
+}
 </script>
 
 <style lang="scss" scoped>