前端vue实现人工智能请求
该方法采用vue2技术实现前端请求人工自能对话实现
<template>
<div class="vw1">
<h3 class="tittle">智能机器人</h3>
<button @click="doClose" class="Colse">关闭</button>
<div class="title-s">
<span class="noes"><img src="xxx" style="width:35px; height:35px" alt=""></span>
<span class="tiles-text"> {{Custom}}</span>
</div>
<div id="lf" class="vw4 vw4-l const" v-for="(item ,index) in msglist" :key="index">
<div class="nones-l">
<img class="nones-imgse" style="width:35px; height:35px" src="" alt="">
<div class="centers-ft">
<span class="centers">{{ item }}</span>
</div>
</div>
</div>
<div class="vw2">
<input type="text" class="ip1" placeholder="请输入要发送的信息" v-model="text" @keyup.enter="ent">
<button id="demox" class="bt1" type="primary" @click="clickl"> 发送 </button>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'right',
props:{
dialog_visible:Boolean
},
data() {
return {
text:'',
msgobj:[],//存值
msglist:[],//列表
Custom:'我是智能机器,有什么可以帮到您的吗',
item:'',
index:'',
visible: this.dialog_visible
}
},
watch:{
visible(val){
this.dialog_visible = val;
}
},
methods:{
clickl(){
if (this.text === '') {
return undefined
}
this.msglist.push(this.text)
// console.log(rights);
axios({
method:'GET',
url:'XXXX'+this.text
}).then(res =>{
this.text = '';
this.msglist.push(res.data)
})
},
ent(e){
console.log(e.key);
console.log(e.keyCode);
if(e.keyCode===13){
if (this.text==='') {
return undefined
}
this.msglist.push(this.text)
// console.log(rights);
axios({
method:'GET',
url:'XXXX'+this.text
}).then(res =>{
this.text = '';
this.msglist.push(res.data);
})
}
},
doClose(){
this.$emit('dialogVisibleEvent',false)
}
}
}
</script>
更多推荐
所有评论(0)