Variable default(文案框选并替换的交互组件)Const

Example

//在页面级别的 *.config.ts 文件中注册当前目录中的agent-selection组件
export default definePageConfig({
usingComponents: {
'agent-selection': 'path/to/agent-selection/agent-selection'
}
});
Copy

// 使用组件
<template>
<view>
      <button @click="start1">生成全文</button>
      <button @click="start2">框选后点我进行精调</button>

      <FinePane
          :text="text"
          :showFine="showFine"
          :fineText="fineText"
          :canSelectText="true"
          @selectionChange="contentSelectionChangeHandler"
      ></FinePane>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import FinePane from './fine-pane/index.vue'

const text = ref('')
const showFine = ref(false)
const fineText = ref('')

function contentSelectionChangeHandler(e) {
  console.log(e)
}

function start1() {
  showFine.value = false

  let itmes = 40
  const t = '可选选择文案\n打发士大夫懂法三扥发斯蒂芬\n打发士大夫懂法守法我饿福娃额发'

  let timer = setInterval(() => {
      if (itmes <= 0) {
          clearInterval(timer)
          return
      }
      text.value = text.value + t.charAt(itmes % t.length)

      itmes--
  }, 50)
}
function start2() {
  showFine.value = true


  let itmes = 40
  const t = '新文案\n多大发放'
  let timer = setInterval(() => {
      if (itmes <= 0) {
          clearInterval(timer)
          return
      }
      fineText.value = fineText.value + t.charAt(itmes % t.length)
      itmes--
  }, 50)
}
</script>
Copy

截图示例