vue带检索功能下拉数据多选组件代码
gooood个人博客网站
数组
.dropdown__link { display: block; color: white; text-decoration: none; font-size: 16px; padding:0px 15px; transition: all .25s ease-out; }
<?php function file_get_contents_curl($url) { $ch = curl_init(); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); $data = curl_exec($ch); curl_close($ch); return $data; } $html = file_get_contents_curl("http://100sucai.com"); //parsing begins here: $doc = new DOMDocument(); @$doc->loadHTML($html); $nodes = $doc->getElementsByTagName('title'); //get and display what you need: $title = $nodes->item(0)->nodeValue; $metas = $doc->getElementsByTagName('meta'); for ($i = 0; $i < $metas->length; $i++) { $meta = $metas->item($i); if($meta->getAttribute('name') == 'description') $description = $meta->getAttribute('content'); if($meta->getAttribute('name') == 'keywords') $keywords = $meta->getAttribute('content'); } echo "Title: $title". '<br/><br/>'; echo "Description: $description". '<br/><br/>'; echo "Keywords: $keywords"; ?>
1、组件演示图
2、父级代码
<Hselect2 :total='Rolelist' :val="userForm.roleIds" @text="getRole"></Hselect2>
3、子组件代码
<template>
<div>
<div>
<div>
<div>
<template v-for="item in checkedNames">
<div>
<span v-html="item.name"></span>
<span @click="del(item)">×</span>
</div>
</template>
</div>
</div>
<ul>
<li>
<input type="text" v-model="filterText" placeholder="请输入...">
</li>
<li>
<ul>
<template v-for="(item,index) in filterList">
<li @click="check(item)">
<template v-if="checkedNames.indexOf(item)>=0">
<i></i> {{item.name}}
</template>
<template v-else>
<i></i> {{item.name}}
</template>
</li>
</template>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
import { mapState,mapMutations,mapActions} from 'vuex'
export default {
data() {
return {
filterText:"",
filterText2:"",
checkedNames: [],
checkedIds: [],
}
},
props: ['total','val'],
computed: {
//下拉框带搜索功能列表
filterList: function () {
var filterText = this.filterText;
var list = this.total;
return list.filter(function (item) {
return item.name.toLowerCase().indexOf(filterText.toLowerCase()) != -1
});
},
},
mounted:function(){
var _this=this;
$(function(){
$(document).click(function(event){
$(".select-group-open .js-ul").hide();
$(".select-group-open").click(function(event){
$(".select-group-open .js-ul").hide();
$(this).find(".js-ul").show();
event.stopPropagation();
})
})
})
},
watch: {
'val':'filterValue'
},
methods:{
filterValue(){
this.checkedIds=[];
this.checkedNames=[];
for(var i=0; i<this.total.length; i++){
if(this.val.indexOf(this.total[i].id) != -1){
this.$store.dispatch('ArraySplice2',[this.checkedIds,this.total[i].id]);
this.$store.dispatch('ArraySplice2',[this.checkedNames,this.total[i]]);
}
}
},
check(item){
this.$store.dispatch('ArraySplice2',[this.checkedIds,item.id]);
this.$store.dispatch('ArraySplice2',[this.checkedNames,item]);
this.$emit('text',this.checkedIds);
},
del(item){
for(var i=0; i<this.total.length; i++){
if(this.total[i].id==item.id){
this.$store.dispatch('ArraySplice',[this.checkedIds,item.id]);
this.$store.dispatch('ArraySplice',[this.checkedNames,item]);
}
}
this.$emit('text',this.checkedIds);
},
}
}
</script>
<style scoped>
.select-group-open li.first{height: 53px;}
</style>
4、date数据