vue实现在el-input文本中拼接一段可以点击的文字链接

在Vue中，要在`el-input`中实现可点击的文字链接，你可以使用v-html指令以及Vue组件的事件监听功能。假设你有一个数组存储了链接和对应的显示文字：

<template>
  <el-input v-model="inputText" :placeholder="placeholder">
    <!-- 使用v-html将链接内容插入 -->
    <span v-for="(link, index) in links" :key="index" @click="handleLinkClick(index)">
      {{ link.text }}
      <a :href="link.url" target="_blank">{{ link.url }}</a>
    </span>
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      placeholder: '请输入文本',
      links: [
        { text: '点击这里', url: 'https://example.com' },
        // 其他链接...
      ]
    };
  },
  methods: {
    handleLinkClick(index) {
      // 当链接被点击时，可以执行一些操作，如导航、处理数据等
      console.log('链接已被点击:', this.links[index].url);
    }
  }
};
</script>

在这个例子中，`links`是一个包含对象的数组，每个对象有两个属性：`text`表示显示的文字，`url`表示链接地址。`v-for`遍历数组并将每对文字和链接包裹在一个`span`元素内，并绑定了`@click`事件到`handleLinkClick`方法上。