首頁 > web前端 > js教程 > select內建組件使用詳解

select內建組件使用詳解

php中世界最好的语言
發布: 2018-04-28 15:45:20
原創
2054 人瀏覽過

這次帶給大家select內建元件使用詳解,select內建元件使用的注意事項有哪些,以下就是實戰案例,一起來看一下。

1.整合了第三方jQuery 外掛(select2)

#

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!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('select2', { 

    props: ['options''value'], 

    template: '<select><slot></slot></select>'

    mounted: function () { 

      var vm = this;// init select2 

      $(this.$el).select2({ data: this.options }).val(this.value).trigger('change').on('change'function () { 

        // emit event on change. 

        vm.$emit('input', this.value) 

      }) 

    }, 

    watch: { 

      value: function (value) { 

          // update value 

        $(this.$el).val(value).trigger('change'

      }, 

      options: function (options) { 

         // update options 

        $(this.$el).empty().select2({ data: options }) 

      

    }, 

    destroyed: function () { 

      $(this.$el).off().select2('destroy'

    

  }) 

var vm = new Vue({ 

  el: '#el'

  data: { 

    selected: 2, 

    options: [ 

      { id: 0, text: '苹果' }, 

      { id: 1, text: '香蕉' }, 

      { id: 2, text: '香梨' }, 

      { id: 3, text: '榴莲' }, 

      { id: 4, text: '西瓜' 

    

  

}) 

</script> 

</body> 

</html>

登入後複製

#2.簡單select

##

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!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>自定义下拉框</h2> 

      <custom-select btn-value="查询" v-bind:list="list1"></custom-select> 

    </p> 

    <p style="float: left;"

      <h2>自定义下拉框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:['北京','上海','广州','杭州'], 

        list2:['17-01-11','17-02-11','17-03-11','17-04-11'], 

      

    }) 

  </script> 

  </body>  

</html>

登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS實作JSON陣列去重步驟詳解

合併多個陣列時如何去重數據

#

以上是select內建組件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
angular.js - AngularJS Select預設值?
來自於 1970-01-01 08:00:00
0
0
0
javascript - select 框預設值
來自於 1970-01-01 08:00:00
0
0
0
php - onchange select 選擇重置
來自於 1970-01-01 08:00:00
0
0
0
select 選擇語句條件問題.請解惑.
來自於 1970-01-01 08:00:00
0
0
0
angular.js - angular的select問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板