机器人回复,js第四天学习笔记

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js组件tabs实现选项卡切换效果和Tree升级版(实现省市多级联动)

上一篇文章,写了基本框架,可能很多人会觉得晕头转向,这里提供一个简单的例子来予以说明,希望能帮你解开谜团。

一、原理分析

先给大家看下小颖写了一个简单的组件示例:

一、功能介绍

  1.1怎么才能让DIV元素动起来?

组件:

通过微信公众平台实现在线客服机器人功能。主要的功能包括:简单对话、查询天气等服务。

  动起来的实质,就是改变DIV的位置,也就是改变其left和top值;

<template>
<div class='content' v-if='showFlag'>
<input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='myFun' v-el:getvalue>
<label class='example-label'>观察参数"compvalue"的变化:</label>{{compvalue}}
<button class='btn btn-danger' @click='compfun'>确定</button>
</div>
</template>
<script>
export default {
 // 从父组件接收收据
 props:{
 compvalue:{
  type:String,//类型(原生构造器:String, Number, Boolean, Function, Object, Array),如果绑定类型不对将抛出一条警告
  required: true, //是否是必须项
  twoWay:true,//指定这个 prop 为双向绑定,如果没有 'sync' 将抛出一条警告
  default:'',//默认值
 },
 compwidth:{
  coerce: function (val) {
  return val + '' // 将值转换为字符串
  }
 },
 compfun:{
  type:Function,
  required:true
 }
 },
 ready: function() {},
 computed:{},//计算属性
 methods: {//组件自身的方法
 myFun:function(){
  alert( this.$els.getvalue.value);
 }
 },
 data() {//绑定数据
 return {
  showFlag:true,
 }
 }
}
</script>

这里只是提供比较简单的功能,重在通过此实例来说明公众平台的具体研发过程。只是一个简单DEMO,如果需要的话可以在此基础上进行扩展。

  2.2怎么上DIV元素动起来的时候,是在规定的圆周上面?

调用组件:

当然后续我们还会推出比较复杂的应用实例。

  通过上一次的分析,让DIV按圆形排队,我们知道了,如要让DIV定位在圆周上面,主要是根据角度(弧度)来实现的。

<template>
<div class='example-content'>
<compexample :compvalue.sync='values' :compfun='compFun'></compexample>
</div>
</template>
<script>
import compexample from './componentExample.vue'//引入组件
export default {
 components: {
 compexample
 },
 ready: function() {
 },
 methods: {
 compFun:function(){
  alert('喵嘞个咪');
 }
 },
 data() {
 return {
  values:'hello'
 }
 }
}
</script>

二、具体实现

  看下图:

在小颖写的组件中,小颖把创建组件时,组件的大部分属性都加了相应注释,大家看了要是还有什么疑问,可以留言哦.

1、提供访问接口

图片 1

下面看写调用组件后的效果图吧:

这里不再赘述,参照上一章,微信公众账号开发教程(二) 基础框架搭建
//www.jb51.net/article/98754.htm

上图中,我们B元素和C元素的定位是如何实现的?根据上一次讲的公式,如下:

图片 2

2、签名认证和分发请求

(index:元素的索引值,radius半径,dotLeft:圆心的横坐标,dotTop:圆心的纵坐标)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

这里不再赘述,参照上一章,微信公众账号开发教程(二) 基础框架搭建
//www.jb51.net/article/98754.htm

B的left = Math.sin((ahd*Bindex))*radius+dotLeft
B的top = Math.cos((ahd*Bindex))*radius+dotTop
C的left = Math.sin((ahd*Cindex))*radius+dotLeft
C的top = Math.cos((ahd*Cindex))*radius+dotTop

您可能感兴趣的文章:

  • 基于Vue.js的表格分页组件
  • Vue.js每天必学之组件与组件间的通信
  • 强大Vue.js组件浅析
  • Vue.js动态组件解析
  • Vue.js
    父子组件通讯开发实例
  • 深入探讨Vue.js组件和组件通信
  • 使用vue.js制作分页组件
  • 关于vue.js弹窗组件的知识点总结
  • vue.js表格组件开发的实例详解
  • webpack+vue.js实现组件化详解

3、处理请求,并响应

从公式中可以看出,都一样,只是B和C的index,即索引值不一样,从而让角度(弧度)数不一样,结果就是正弦和余弦的值不一样,所以定位也就不一样了,但结果都是在这个圆周上变化。不会跑离这个圆周;

1)关注

如果我现在想让B元素,定位到C元素的位置,该怎么做呢?

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注