vue カスタム選択組み込みコンポーネント-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vue カスタム選択組み込みコンポーネント

不言

Apr 10, 2018 pm 02:55 PM

selectコンポーネントカスタマイズ

この記事では、vue のカスタム組み込みコンポーネント select に関する関連知識を主に紹介します。具体的なコード例については、この記事を参照してください。

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <link rel="stylesheet" href="js/select2/select2.min.css" /> 
  <style> 
    html, body { 
 font: 13px/18px sans-serif; 
} 
select { 
 min-width: 300px; 
} 
  </style> 
</head> 
<body> 
<p id="el"> 
  <p>选中的: {{ selected }}</p> 
  <select2 :options="options" v-model="selected"></select2> 
</p> 
  <script src="js/jQuery-2.1.4.min.js"></script> 
  <script src="js/select2/select2.min.js"></script> 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>   
<script> 
  Vue.component(&#39;select2&#39;, { 
    props: [&#39;options&#39;, &#39;value&#39;], 
    template: &#39;<select><slot></slot></select>&#39;, 
    mounted: function () { 
      var vm = this;// init select2 
      $(this.$el).select2({ data: this.options }).val(this.value).trigger(&#39;change&#39;).on(&#39;change&#39;, function () { 
        // emit event on change. 
        vm.$emit(&#39;input&#39;, this.value) 
      }) 
    }, 
    watch: { 
      value: function (value) { 
          // update value 
        $(this.$el).val(value).trigger(&#39;change&#39;) 
      }, 
      options: function (options) { 
         // update options 
        $(this.$el).empty().select2({ data: options }) 
      } 
    }, 
    destroyed: function () { 
      $(this.$el).off().select2(&#39;destroy&#39;) 
    } 
  }) 
var vm = new Vue({ 
  el: &#39;#el&#39;, 
  data: { 
    selected: 2, 
    options: [ 
      { id: 0, text: &#39;苹果&#39; }, 
      { id: 1, text: &#39;香蕉&#39; }, 
      { id: 2, text: &#39;香梨&#39; }, 
      { id: 3, text: &#39;榴莲&#39; }, 
      { id: 4, text: &#39;西瓜&#39; } 
    ] 
  } 
}) 
</script> 
</body> 
</html>

2. 簡単な選択

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
  <style>  
  *{ 
    padding: 0; 
    margin: 0; 
  } 
  ul,li { 
    list-style: none; 
  } 
  li { 
    line-height: 2em; 
  } 
  li:hover { 
    background-color: #f9f9f9; 
    border-radius:5px; 
    cursor: pointer; 
  } 
  input{ 
    cursor:pointer; 
    outline:none; 
  } 
  #app { 
    margin-top: 20px; 
  } 
  #app h2 { 
    text-align: center; 
  } 
  .wrap { 
    background-color: rgba(56, 170, 214, 0.45); 
    border-radius: 20px; 
    width: 300px; 
    margin: 40px; 
    padding: 20px; 
  } 
  input[type="button"] { 
    font-size:14px; 
    margin-left:2px; 
    padding:2px 5px; 
    background-color:rgb(228, 33, 33); 
    color:white; 
    border:1px solid rgb(228, 33, 33); 
    border-radius:5px; 
  } 
  .clearFix { 
    padding-left: 
  } 
  input.keyWord { 
    border: 1px solid #777777; 
    border-radius: 10px; 
    height: 30px; 
    width: 80%; 
    padding-left: 10px; 
    font-size: 16px; 
  } 
  ul.list { 
    margin: 20px 0; 
  } 
  ul.list li { 
    padding: 10px 0 0 10px; 
  } 
</style>  
</head>  
 <body>  
 <p id="app"> 
    <p style="float: left;"> 
      <h2 id="自定义下拉框">自定义下拉框</h2> 
      <custom-select btn-value="查询" v-bind:list="list1"></custom-select> 
    </p> 
    <p style="float: left;"> 
      <h2 id="自定义下拉框">自定义下拉框2</h2> 
      <custom-select btn-value="搜索" v-bind:list="list2"></custom-select> 
    </p> 
  </p> 
  <p id="app1"> 
    <custom-select></custom-select> 
  </p> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>  
 <script> 
    Vue.component("custom-select",{ 
      data(){ 
        return { 
          selectShow:false, 
          val:"" 
        } 
      }, 
      props:["btnValue","list"], 
      template:`<section class="wrap"> 
            <p class="searchIpt clearFix"> 
              <p class="clearFix"> 
                <input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" /> 
                <input type="button" :value="btnValue" /> 
                <span></span> 
              </p> 
              <custom-list  
                v-show="selectShow"  
                :list="list"  
                v-on:receive="changeValueHandle" 
              > 
              </custom-list> 
            </p> 
           </section>`, 
      methods:{ 
        changeValueHandle(value){ 
          this.val = value; 
        } 
      } 
    }); 
    Vue.component("custom-list",{ 
      props:["list"], 
      template:`<ul class="list"> 
              <li v-for="item in list" @click="selectValueHandle(item)">{{item}} 
              </li> 
           </ul>`, 
      methods:{ 
        selectValueHandle:function(item){ 
          this.$emit("receive",item) 
        } 
      } 
    }) 
    new Vue({ 
      el:"#app", 
      data:{ 
        list1:[&#39;北京&#39;,&#39;上海&#39;,&#39;广州&#39;,&#39;杭州&#39;], 
        list2:[&#39;17-01-11&#39;,&#39;17-02-11&#39;,&#39;17-03-11&#39;,&#39;17-04-11&#39;], 
      } 
    }) 
  </script> 
  </body>  
</html>

参考:

関連する推奨事項:

Vue 選択コンポーネント使用方法と無効化の実装コード

Vueの単一コンポーネントで無制限レベルの複数選択メニュー機能を実現

以上がvue カスタム選択組み込みコンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

如何在CakePHP中创建自定义分页？Jun 04, 2023 am 08:32 AM

CakePHP是一个强大的PHP框架，为开发人员提供了很多有用的工具和功能。其中之一是分页，它可以帮助我们将大量数据分成几页，从而简化浏览和操作。默认情况下，CakePHP提供了一些基本的分页方法，但有时你可能需要创建一些自定义的分页方法。这篇文章将向您展示如何在CakePHP中创建自定义分页。步骤1：创建自定义分页类首先，我们需要创建一个自定义分页类。这个

使用golang进行Select Channels Go并发式编程的异步处理方法Sep 28, 2023 pm 05:27 PM

使用golang进行SelectChannelsGo并发式编程的异步处理方法引言：并发式编程是现代软件开发中的一个重要领域，它可以有效地提高应用程序的性能和响应能力。在Go语言中，使用Channels和Select语句可以简单而高效地实现并发编程。本文将介绍如何使用golang进行SelectChannelsGo并发式编程的异步处理方法，并提供具体的

jquery如何隐藏select元素Aug 15, 2023 pm 01:56 PM

jquery隐藏select元素的方法：1、hide()方法，在HTML页面中引入jQuery库，可以使用不同选择器来隐藏select元素，ID选择器将selectId替换为你实际使用的select元素的ID；2、css()方法，使用ID选择器选择需要隐藏的select元素，使用css()方法将display属性设置为none，并将selectId替换为select元素的ID。

jQuery中如何实现select元素的改变事件绑定Feb 23, 2024 pm 01:12 PM

jQuery是一个流行的JavaScript库，可以用来简化DOM操作、事件处理、动画效果等。在web开发中，经常会遇到需要对select元素进行改变事件绑定的情况。本文将介绍如何使用jQuery实现对select元素改变事件的绑定，并提供具体的代码示例。首先，我们需要使用标签来创建一个包含选项的下拉菜单：

linux要用select的原因是什么May 19, 2023 pm 03:07 PM

因为select可以使开发者在同时等待多个文件缓冲区，可减少IO等待的时间，能够提高进程的IO效率。select()函数是IO多路复用的函数，允许程序监视多个文件描述符，等待所监视的一个或者多个文件描述符变为“准备好”的状态；所谓的”准备好“状态是指：文件描述符不再是阻塞状态，可以用于某类IO操作了，包括可读，可写，发生异常三种。select是一个计算机函数，位于头文件#include。该函数用于监视文件描述符的变化情况——读写或是异常。1.select函数介绍select函数是IO多路复用的函

mysql的select语法怎么使用Jun 01, 2023 pm 07:37 PM

1、SQL语句中的关键词对大小写不敏感，SELECT等效于SELECT，FROM等效于from。2、从users表中选择所有列的，可以用符号*代替列的名称。语法--这是注释--从FEOM指定的[表中],查询出[所有的]数据.*表示[所有列]SELECT*FROM--通过从FROM从指定的[表中],查询出指定列名称(字段)的数据SELECT列名称FROM表名称实例--注意:多个列之间,使用英文的逗号来分隔selectusername,passwordfrom

通过golang实现Select Channels Go并发式编程的性能优化Sep 27, 2023 pm 01:09 PM

通过golang实现SelectChannelsGo并发式编程的性能优化在Go语言中，使用goroutine和channel实现并发编程是非常常见的。而在处理多个channel的情况下，我们通常会使用select语句来进行多路复用。但是，在大规模并发的情况下，使用select语句可能会导致性能下降。在本文中，我们将介绍一些通过golang实现select

如何在CakePHP中创建自定义验证器？Jun 05, 2023 pm 07:51 PM

CakePHP是一个流行的PHP框架，提供强大的数据验证功能。在开发Web应用程序时，数据验证是一个非常重要的任务，因为它可以帮助我们确保输入数据的正确性和安全性。CakePHP提供了一些内置的验证器，如必填字段、数字、电子邮件和唯一性验证。但是，在特定的情况下，我们可能需要创建自定义的验证器，以适应我们的应用程序的需求。在本文中，我们将探讨如何在CakeP

See all articles