vue的双击事件(dbclick的使用)

Posted 2023-03-31 做一个程序员

双击事件(dblclick)

vue事件中基于点击事件，有一个双击事件，通过dblclick事件触发。

语言：vue3/Ts

函数库：vueuse

1、需求分析

1. 双击事件触发；

2. 在双击时隐藏对应文字元素；

3. 展示输入框；

4. 输入框自动聚焦；

5. 失去焦点展示文字（元素等）

6. 效果展示：

2、代码实现(使用jsx写法作为示例)

import  ref, nextTick  from 'vue'
​
export default defineComponent(
  name: 'test',
  setup() 
    const count = ref(999) // 输入框绑定的数据源
    const ipt = ref() // dom元素的定义以及获取
​
    const show = ref(false) // 文字的展示和隐藏
    
    /**
    * 双击事件执行函数
    */
    async function bdlFn() 
      show.value = true
      await nextTick() // 等待dom元素加载完成
      ;(ipt.value as htmlInputElement).focus() //input元素聚焦
    
    
    async function iptBlur() 
      console.log('blur')
      show.value = false
    
    return  count, ipt, iptChange, show, bdlFn, iptBlur 
  ,
  render() 
    return (
      <div>
        // jsx语法的v-if实现
        this.show && (
          <input
            ref='ipt'
            class='h-100px'
            v-model=this.count
            onChange=this.iptChange
            onBlur=this.iptBlur
            type="text"
          />
        )
        !this.show && (
          <span
            onDblclick=this.bdlFn
            // unocss(原子化css)，用着挺方便
            class='h-30px w-100px inline-block bg-blue-200 cursor-pointer'
          >
            '你好'
          </span>
        )
      </div>
    )
  
)
​

jquery基础入门

1、事件

$(selector).click(function):将函数绑定到被选元素的点击事件中
$(selector).dbclick(function);将函数绑定到被选元素的双击事件中
$(selector).focus(function)：将函数绑定到被选元素的获到焦点事件中
$(selector).mouseover(function)将函数绑定到被选的鼠标悬停事件中

2、语法

$(this).hide：隐藏当前元素
$(“p”).hide ：隐藏所有的段落
$(".test").hide ：隐藏所有class=“test’的元素
$("#test").hide：隐藏所有id=test的元素

3、toggle方法

JQuery中的toggle()方法，相当于点一个元素时，重复循环两个函数，而这两个函数可以作为toggle()函数的两个参数传进去，当第一次点击的时候会执行前面的参数，而第二次点击时执行的是后面的参数，第三次点击时又会重新执行第一个参数...这样循环执行两个函数。

$("#btn").toggle(function()
      //控制box隐藏
      $("#box").hide();
,function()
      //控制box显示
      $("#box").show();
);

jQuery1.9以上版本都删除了这个toggle时间,可以在js代码中加入以下代码,就可以正常使用toggle方法了.

$.fn.toggle = function( fn, fn2 ) 
    var args = arguments,guid = fn.guid || $.guid++,i=0,
    toggle = function( event ) 
      var lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
      $._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
      event.preventDefault();
      return args[ lastToggle ].apply( this, arguments ) || false;
    ;
    toggle.guid = guid;
    while ( i < args.length ) 
      args[ i++ ].guid = guid;
    
    return this.click( toggle );

==待验证:toggle()内只设置时间时,默认是切换show()方法和hide()方法==

4 淡出淡入的效果

fadeIn()：淡入的效果
fadeOut()：淡出的效果
fadeToggle()：淡出淡入的效果
fadeTo()：设置为给定的不透明度

5 滑动效果

slideDown() 方法

用于向下滑动元素

语法:

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称

举例:

$("#flip").click(function()
  $("#panel").slideDown();
);

sildeUp()：

是向上拉,可参考slideDown()

sildeToggle()

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

举例:

$("#flip").click(function()
  $("#panel").slideToggle();
);

6 jquery dom的操作

jquery 提供一系列的与DOM相关的能力，这使访问和操作元素和属性变得很容易

1 获取内容

text() -设置或返回文本,所选的元素内容
html() -设置或返回所选内容（Html标记）
val() -设置或返回表单字段的值。
.attr(“属性”)- 显示的是属性的值

举例如下：

网站显示属性值

显示href的属性值 运行结果为：

2 css的使用方法

addclass: 向被选元素添加一个或多个类

removeclass: 从选中的元素中删除一个类或多个类

toggleClass(): 对被选中的元素进行添加和删除的切换的操作

$("button").click(function()
  $("h1,h2,p").toggleClass("blue");
);

3 祖先

.parent的方法的作用 ：对于返回元素的直接父亲元素，该方法只会向上一级对dom树进行遍历

.parents的方法的作用 ：parents是多余返回元素的所有的祖先的元素的搜索，他可以一路向上直到文档

4 后代

.chlidren()方法：返回被选元素的所有的直接的子元素，该方法只会向下一级对dom进行遍历

.find()方法：返回被选元素的后代元素，该方法会一直到最后一个子代

7 Ajax

ajax=异步的javaScript和xml

简短的说：在不加载网页的情况下，ajax通过后台加载数据，并在网页上显示。

success:

? 请求成功后的回调函数

type:

? 请求方式 ("POST" 或 "GET")， 默认为 "GET"。

url:

? 默认值: 当前页地址。发送请求的地址。

data:

? 发送到服务器的数据。将自动转换为请求字符串格式.

$('#btnAdd').click(function()
    $.ajax(
        url: '/modal_add_student/',
        type: 'POST',
        data: 'name': $('#addName').val(), 'class_id': $('#addClassId').val(),
        success:function(arg)
            arg = JSON.parse(arg);
            if(arg.status)
                location.reload();
            else
                $('#addError').text(arg.message);
            
        
    )
)

注释:

json.parse()方法:

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法:

JSON.parse(text)   # text:必需， 一个有效的 JSON 字符串。

JSON 解析实例

例如我们从服务器接收了以下数据：

"name":"runoob", "alexa":10000, "site":"www.runoob.com"

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse(‘ "name":"runoob", "alexa":10000, "site":"www.runoob.com" ‘);

解析完成后，我们就可以在网页上使用 JSON 数据了：

实例

<p id="demo"></p>

<script>
var obj = JSON.parse(' "name":"runoob", "alexa":10000, "site":"www.runoob.com" ');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>