Vue常用代码段

element-ui 圆形button 构造下拉菜单

<template>
  <el-dropdown @command="handleCommand">
    <el-button circle type="primary" icon="el-icon-more"></el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="option1">Option 1</el-dropdown-item>
      <el-dropdown-item command="option2">Option 2</el-dropdown-item>
      <el-dropdown-item command="option3">Option 3</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      console.log(command);  // You can replace this with your own logic
    }
  }
}
</script>

element-ui.common.js?5c96:2432 Uncaught TypeError: Cannot read properties of null (reading ‘‘setAttr

Vue 原生方法：选中文本构造下拉菜单

• https://www.jb51.net/article/243880.htm

Vue 中使用 axios + js 使用 openai 语言模型

summaryHandler(){
      let prefix = "DESIGN YOUR OWN PREFIX"
      let prompt_text = prefix + this.selectedText

      const axios = require("axios");
      // require("dotenv").config();
      // const apiKey = process.env.OPENAI_API_KEY;
      const apiKey = 'YOUR AIPKEY OF OPENAI'
      const client = axios.create({
        headers: {
          Authorization: "Bearer " + apiKey,
        },
      });

      const params = {
                      prompt: prompt_text,
                      model: "text-davinci-003",
                      max_tokens: 100,
                      temperature: 0.7,
                    };
      client
      .post("https://api.openai.com/v1/completions", params)
      .then((result) => {
        console.log(result.data.choices[0].text);
      })
      .catch((err) => {
        console.log(err);
      });
      // let text = this.generateText(prefix + this.selectedText)
      // console.log("generated content: ", text)
    },

Vue router

• 安装 vue-router 如果使用 vue2 那么要安装 vue-router@3 如果是 vue3 要安装 vue-router@4
• src 底下创建文件夹和 index.js 文件 routes/index.js
• index.js 中引入 VueRouter 并按照如下的方式定义 router，同时注意 new VueRouter 中要使用大括号和 routes 字段定义 路由，这里很容易出错：

/* eslint-disable */
import VueRouter from 'vue-router'
import lobbyPageVue from "@/views/lobbyPage.vue"
import roomPage from "@/views/roomPage.vue"
export default new VueRouter({
    routes: [{
            path: "/",
            component: lobbyPageVue
        },

        {
            path: "/room",
            component: roomPage
        },

    ]
})

• 在 main.js 中记得引入 VueRouter 同时在 new Vue 中进行引入：

import router from './router'
import VueRouter from 'vue-router'

Vue.config.productionTip = false

Vue.use(ElementUI);
Vue.use(VueRouter)

new Vue({
    render: h => h(App),
    router,
    // define the global event bus
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线
    }
}).$mount('#app')

• <router-view> 别忘了写
• this.$router.push() 或者 <router-link to=""> 来完成路由跳转

在 Vue 中导入 AgoraRTC_N-4.17.2.js

• npm install agora-rtc-sdk-ng
• 引入模块即可 import AgoraRTC from "agora-rtc-sdk-ng";

axios 设定请求头

vue 中的方法设置了 async 却仍然无法通过 await 实现同步

• 解决方法：创建一个 Promise

createMember(){
            return new Promise((resolve, reject) => {
            http.post("/create_member/", {
                headers: {
                    'Content-Type': 'application/json'
                },
                name: this.name,
                room_name: this.channelName,
                UID: this.uid
            }).then(response => {
                console.log("create member response: ", response)
                // this.member = response.data
                resolve(response.data)
            }).catch(error => {
                console.log(error)
                reject(error)
            })
        })

// 然后再 await createMember 就行了
async joinAndDisplayLocalStream(){
            console.log("join and display local stream")
            this.client.on('user-published', this.handleUserJoined)
            this.client.on('user-left', this.handleUserLeft)

            try{
                this.uid = await this.client.join(this.appid, this.channelName, this.token, this.uid)
            }catch(error){
                console.error(error)
                // window.open('/', '_self')
                this.$router.push("/")
            }

            //开始转录
            // await transStream()

            let localTracks = await AgoraRTC.createMicrophoneAndCameraTracks()

            // this.member = await this.createMember()
            this.member = await this.createMember()

            console.log("member:", this.member)

            // add new persons
            this.$bus.$emit("addPlayer", this.uid, this.member, localTracks)
            localTracks[1].play(`user-${this.uid}`)

            // let player = `<div  class="video-container" id="user-container-${UID}">
            //                 <div class="video-player" id="user-${UID}"></div>
            //                 <div class="username-wrapper"><span class="user-name">${member.name}</span></div>
            //             </div>`

            // document.getElementById('video-streams').insertAdjacentHTML('beforeend', player)
            // localTracks[1].play(`user-${UID}`)

            await this.client.publish([localTracks[0], localTracks[1]])
        },