!52 文本组件添加链接功能

Merge pull request !52 from 自由/wu

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

@@ -14,6 +14,8 @@ export const WritingModeObject = {
 }
 
 export const option = {
+  link:'',
+  linkHead:'http://',
   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-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>
 
   <collapse-item name="样式" :expanded="true">
@@ -69,7 +74,6 @@ import {
   SettingItemBox,
   SettingItem
 } from '@/components/Pages/ChartItemSetting'
-
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
@@ -84,4 +88,15 @@ const verticalOptions = [{
   label: WritingModeEnum.VERTICAL,
   value: WritingModeObject[WritingModeEnum.VERTICAL]
 }]
+const handleLinkClick = ()=>{
+    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

@@ -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,8 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
+  linkHead,
+  link,
   dataset,
   fontColor,
   fontSize,
@@ -68,6 +73,11 @@ watch(
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
   option.dataset = newData
 })
+
+//打开链接
+const click = () => {
+  window.open(linkHead.value+link.value)
+}
 </script>
 
 <style lang="scss" scoped>