jihe-dc/ruoyi-ui/src/views/text/index.vue

<!--<template>-->
<!--  <div>-->
<!--    WebSocket Test-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->

<!--import {mapState} from "vuex";-->

<!--const synth = window.speechSynthesis // 启用文本-->
<!--const msg = new SpeechSynthesisUtterance()-->
<!--export default {-->
<!--  name: 'WebSocketTest',-->
<!--  data() {-->
<!--    return {-->
<!--      ws: null, // WebSocket实例-->
<!--      name:'', // WebSocket实例-->
<!--      // 添加用于配置WebSocket的响应式数据-->
<!--      socketConfig: {-->
<!--        password: 'zc&ws123',-->
<!--        // tokenSN: this.token, // 如-->
<!--        heartRate: 1000, // 示例心跳间隔时间-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  computed: {-->
<!--    ...mapState({-->
<!--      token: state => state.user.token,-->
<!--      websocket: state => state.user.websocket-->
<!--    })-->
<!--  },-->
<!--  created() {-->
<!--    this.initWebSocket();-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    if (this.ws) {-->
<!--      this.ws.close();-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    // 语音播报的函数-->
<!--    handleSpeak(text) {-->
<!--      msg.text = text // 内容-->
<!--      msg.lang = 'zh-CN' // 使用的语言:中文-->
<!--      msg.volume = 1 // 声音音量：1-->
<!--      msg.rate = 1 // 语速：1-->
<!--      msg.pitch = 1 // 音高：1-->
<!--      synth.speak(msg) // 播放-->
<!--    },-->
<!--    // 语音停止-->
<!--    handleStop(e) {-->
<!--      msg.text = e-->
<!--      msg.lang = 'zh-CN'-->
<!--      synth.cancel(msg) // 取消该次语音播放-->
<!--    },-->
<!--    open2(message){-->
<!--      this.$notify({-->
<!--        title: '提示',-->
<!--        message: message,-->
<!--        duration: 0-->
<!--      });-->
<!--    },-->
<!--    initWebSocket() {-->
<!--      const { password, heartRate ,tokenSN} = this.socketConfig;-->

<!--      const url = 'ws://' + location.hostname + ':7789/ws';-->

<!--      this.ws = new WebSocket(url);-->

<!--      this.ws.onmessage = (message) => {-->
<!--        console.log('WebSocket 收到的数据', message.data);-->

<!--        message = JSON.parse(message.data);-->
<!--        const method = message.method;-->

<!--        if (method !== 'event') {-->
<!--          return;-->
<!--        }-->

<!--        const params = message.params;-->
<!--        const subEvent = params.subEvent;-->
<!--        const content = params.content;-->

<!--        switch (subEvent) {-->
<!--          case '1':-->
<!--            console.log('WebSocket 视频AI:', content);-->

<!--            this.handleSpeak(content) // 传入需要播放的文字-->
<!--            break;-->
<!--          case '0':-->
<!--            console.log('WebSocket 手动录入:', content);-->
<!--            console.log('WebSocket 手动录入:', content.event);-->
<!--            console.log('WebSocket 手动录入:', content.content);-->
<!--            this.open2(content.content);-->
<!--            this.handleSpeak(content) // 传入需要播放的文字-->
<!--            break;-->
<!--          default:-->
<!--        }-->
<!--      };-->

<!--      // 添加其他WebSocket事件监听-->
<!--      this.ws.onopen = this.onOpen;-->
<!--      this.ws.onerror = this.onError;-->
<!--      this.ws.onclose = this.onClose;-->
<!--    },-->

<!--    onOpen(event) {-->
<!--      console.log('WebSocket opened:', event);-->
<!--    },-->
<!--    onError(event) {-->
<!--      console.error('WebSocket error:', event);-->
<!--    },-->
<!--    onClose(event) {-->
<!--      console.log('WebSocket closed:', event);-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<template>
  <div>
    <input v-model="inputValue" @input="formatInput" type="text">
    <p>格式化后的值: {{ formattedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '', // 用户输入的原始值
      formattedValue: '' // 格式化后的值，用于显示
    };
  },
  watch: {
    inputValue(newValue) {
      this.formattedValue = this.formatToThreeDigits(newValue);
    },
  },
  methods: {
    formatInput(e) {
      // 确保输入只包含数字，并且最多三位
      const value = e.target.value.replace(/[^0-9]/g, '');
      if (value.length > 3) {
        this.inputValue = value.slice(0, 3); // 如果超过三位，截取前三位
      } else {
        this.inputValue = value;
      }
    },
    formatToThreeDigits(value) {
      return value.padStart(3, '0'); // 不足三位前面补0
    },
  },
};
</script>