文字两端对齐和tab多条件选择的自定义封装组件：代码如下：（复制需要点赞😄）
这是封装的分类tab栏子组件1：
<template>
<div class="conditions">
<div
v-for="(item, i) in conditionsData"
:key="i"
class="heading"
:class="{ heading_unborder: item.unborder }"
>
<div class="title" v-if="item.isTitle || item.title">
{{ item.title }}
</div>
<div class="conditionsList">
<div
v-for="(otem, j) in item.list"
:key="j"
class="conditionsDetail"
:class="{ conditionsDetail_opt: j == selectControl[i] }"
@click="select(i, j)"
>
{{ otem.name }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
conditionsData: {
type: Array,
},
},
watch: {
conditionsData: {
deep: true,
handler(val) {
val.forEach((item, index) => {
if (item.default) {
this.selectControl[index] = 0;
}
});
},
},
},
data() {
return {
selectControl: [], //选项控制
};
},
methods: {
//控制选中函数
select(i, j) {
console.log(i + "--------" + j);
this.$set(this.selectControl, i, j);
console.log(this.selectControl);
let selectList = [];
this.selectControl.forEach((item, index) => {
selectList.push(this.conditionsData[index].list[item]);
});
this.$emit("select", selectList);
},
//页面初始化函数
init() {
this.selectControl = [];
this.conditionsData.forEach(() => {
this.selectControl.push(0);
});
this.conditionsData.forEach((item, index) => {
// debugger
if (item.default) {
this.selectControl[index] = item.default;
}
});
console.log(this.selectControl);
},
},
mounted() {
this.init();
this.conditionsData.forEach((item, index) => {
if (item.default) {
this.selectControl[index] = item.default;
}
});
},
};
</script>
<style lang="less" scoped>
.conditions {
background-color: #fff;
padding: 0 020px;
.heading {
padding: 025px 0;
display: flex;
border-bottom: 1px solid #eee;
&_unborder {
border: none;
}
&:last-child {
border: none;
}
.title {
width: 100px;
flex-shrink: 0;
font-size: 16px;
color: #999;
font-weight: 700;
font-size: 16px;
line-height: 032px;
margin: 005px 0;
border: 001px solid #fff;
user-select: none;
}
.conditionsList {
display: flex;
flex-wrap: wrap;
.conditionsDetail {
padding: 0 10px;
min-width: 120px;
height: 032px;
font-size: 016px;
line-height: 032px;
margin: 005px 0;
border: 1px solid #fff;
text-align: center;
color: #666;
user-select: none;
&_opt {
background-color: #f1f1f1;
color: #004489;
border-color: #004489;
border-radius: 4px;
overflow: hidden;
}
}
}
}
}
</style>这是封装的分类tab栏子组件2：
<template>
<div class="classCondition">
<div class="title">{{ data.title }}：</div>
<div class="select">
<div
v-for="item in data.list"
:key="item.name"
:class="{ selectName: item.name == classifySelect }"
@click="select(item)"
>
{{ item.name }}
</div>
</div>
</div>
</template>
<script>
export default {
props: ['data', 'default'],
data() {
return {
classifySelect: this.default,
}
},
mounted() {
console.log(this.default)
if (this.default) {
this.classifySelect = this.default
} else {
this.classifySelect = this.data.list[0].name
}
},
methods: {
select(item) {
this.classifySelect = item.name
this.$emit('select', item)
},
},
}
</script>
<style lang="less" scoped>
.classCondition {
display: flex;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 27px;
margin-bottom: 10px;
user-select: none;
.title {
width: 80px;
flex-shrink: 0;
margin: 5px 0;
margin-right: 20px;
line-height: 32px;
}
.select {
display: flex;
color: #333333;
flex-wrap: wrap;
.selectName {
color: #004489;
border: 1px solid #004489;
border-radius: 4px;
background-color: #f1f1f1;
}
> div {
padding: 0 10px;
// margin-right: 60px;
min-width: 120px;
text-align: center;
padding: 0 10px;
min-width: 120px;
height: 032px;
font-size: 016px;
line-height: 032px;
margin: 005px 0;
border: 1px solid #fff;
text-align: center;
color: #666;
}
}
}
</style>这是父组件里面进行引用：
<template>
<div>
<!-- 合作单位页面 -->
<div class="Cooperative_Unit">
<img src="../../assets/Company_hzdw@2x.png" alt="" />
<div class="Condition_search">
<!-- 分类tab组件开始 -->
<div class="conditions_box">
<classCondition
v-if="isRouterAlive"
:data="classification"
@select="classSelectData"
:default="tabChoice"
/>
<!-- 分类tab组件结束 -->
<!-- 行业领域开始 -->
<classCondition v-if="industryNameSta" :data="industryField" @select="itemSelectData" :default="industryName" />
<!-- 行业领域结束 -->
<div class="enterSearch">
<div class="enterSearch_left">
<div class="Search_text">
<div class="Search_content">搜索</div>
<div class="Search_colon">：</div>
</div>
<a-input
placeholder="请输入关键字，按enter键查找"
v-model="input"
class="input_width"
@pressEnter="searchqQuery"
/>
</div>
<div class="enterSearch_right">
<div class="Prompt_text">如果您想入驻，请点击右侧按钮</div>
<a-button class="checkIn" @click="goMyCenter">我要入驻</a-button>
</div>
</div>
</div>
<!-- 卡片区域 -->
<div class="Company_profile_box">
<div
class="card_box"
v-for="(cardItem, cardIndex) in cardArr"
:key="cardIndex"
@click="goUnitDetails(cardItem)"
>
<div class="card_img">
<img :src="$url(cardItem.cover)" alt="" />
</div>
<div class="card_content">
{{ cardItem.name || "暂无数据" }}
<div class="card_text">
{{ cardItem.intro || "暂无数据" }}
</div>
</div>
</div>
</div>
<div class="noData" v-if="!cardArr.length">暂无数据</div>
<!-- 分页器区域 -->
<div class="paging_box" v-if="cardArr.length">
<a-pagination
v-model="current"
:page-size-options="pageSizeOptions"
:total="total"
show-quick-jumper
:page-size="pageSize"
@change="onChange"
>
</a-pagination>
</div>
</div>
</div>
</div>
</template>js代码如下：
<script>
import conditions from "../../components/public/conditions";
import classCondition from "../../components/public/classCondition.vue";
export default {
components: {
conditions,
classCondition,
},
data() {
return {
cardArr: [], // 初始化数据
pageSizeOptions: ["4", "20", "30", "40", "50"], // 下拉选项
current: 1, // 当前页数
pageSize: 6, // 每页几条数据
total: 10, // 总页数
input: "", // 搜索框输入的值
classificationText: "JMQY", // 分类选中的分类的值
currentStateText: "", // 行类领域选中的状态值
itemIndustry: {}, // 选中的当前行业数据
// 新的组件 分类的tab数据
classification: {
title: "分\u3000\u3000类",
list: [
// { name: "全部", step: "" },
{ name: "企业", step: "JMQY" },
{ name: "合作单位", step: "HZDW" },
{ name: "服务机构", step: "ZSCQ" },
],
},
// 行业领域 的tab数据
industryField: {
title: "行业领域",
list: [
{ name: "全部", step: true },
// { name: "技术挂牌", step: true },
// { name: "专利挂牌", step: true },
// { name: "技术需求", step: true },
// { name: "融资需求", step: true },
// { name: "合作需求", step: true },
],
},
inItStatus: true, // 页面初始化时显示所有数据
tabChoice: "", // 下拉侧边栏选择的项
industryName: "", // 下拉侧侧边栏改变时回归到全部选项
industryNameSta:true,
isRouterAlive: true, // 每次下拉框选择的时候都刷新这个组件
};
},
mounted() {
this.initDataList(); // 初始化条件栏
},
watch: {
$route: {
handler(to, from) {
console.log(to, from, "监听路由变化及参数数据", to.query.id);
this.classification.list.forEach((item) => {
if (item.step == to.query.id) {
this.currentStateText = ""; // 把行业置空
this.classSelectData(item);
this.tabChoice = item.name; // 默认选中分裂的哪一项
this.industryName ="全部" ; // 当顶部下拉选中时默认选择全部
this.industryNameSta=false
// 每次下拉框选择时都刷新组件
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true;
this.industryNameSta=true
});
}
});
},
immediate: true,
},
// tabChoice(){
// }
},
methods: {
// 初始化条件栏
initDataList() {
// // 第一次进来显示企业的全部合作单位
this.classSelectData(this.classification.list[0]);
// 获取行业的接口
let arr = [];
let idNum = 1;
this.$get("/api/setting_tag/public/all_available").then((res) => {
let classAll = res.data;
this.industryField.list = [];
const provinceList = this._.filter(classAll, (item) => {
return item.type == "INDUSTRY";
});
provinceList.forEach((item) => {
arr.push({ id: idNum++, name: item.name, state: true });
});
arr.unshift({ id: 0, name: "全部" });
this.industryField.list = arr;
console.log(arr, "返回的行业数据");
// 第一次进来显示企业的全部合作单位
// this.classSelectData(this.classification.list[0]);
// this.hyly.list = [{ name: '全部', auditState: 'all' }, ...provinceList]
});
},
// 这是顶部tab选择执行的函数
classSelectDataSta(item) {
console.log(item, "顶部选中的项目");
this.classificationText = item.step;
this.input = ""; // 当切换分类时，清空搜索框
this.current = 1; // 每次切换后分页要归1
this.$get(
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}&type=${this.classificationText}`
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
},
// 分类的筛选
classSelectData(e) {
// 行业&industry=${this.currentStateText} 不传递这个行业领域这个值就能查询到数据，
console.log(e, "分类筛选");
this.classificationText = e.step;
this.input = ""; // 当切换分类时，清空搜索框
this.current = 1; // 每次切换后分页要归1
console.log(this.classificationText, this.currentStateText, "这是选择的");
if (!this.currentStateText) {
// 行类领域不为空时
this.$get(
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}&type=${this.classificationText}`
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
} else if (this.currentStateText == "全部") {
this.$get(
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}&type=${this.classificationText}`
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
} else {
// 当选择分类条件有值时，行业领域除开关键字“全部”时，要传参数 行业领域字段：industry=${ this.currentStateText }
this.$get(
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}&type=${this.classificationText}&industry=${
this.currentStateText
} `
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
}
},
// 行业领域的筛选
itemSelectData(e) {
console.log(e, "行业领域");
this.currentStateText = e.name;
this.itemIndustry = e; // 当前行页数据
this.input = ""; // 切换条件时清空搜索
// console.log(this.classificationText, this.currentStateText, "这是行业领域选择的");
if (!this.currentStateText) {
this.$get(
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}&type=${this.classificationText}`
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
} else if (this.currentStateText == "全部") {
this.$get(
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}&type=${this.classificationText}`
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
} else {
// 当选择分类条件有值时，行业领域除开关键字“全部”时，要传参数 行业领域字段：industry=${ this.currentStateText }
this.$get(
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}&type=${this.classificationText}&industry=${
this.currentStateText
} `
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
}
this.current = 1; // 每次切换后分页要归1
},
// 初始化展示全部数据
wholeData() {
this.$get(
// `/api/trade_center/quanzhou/company_show/public/page?page=0&size=8&type=HZDW`,
`/api/trade_center/quanzhou/company_show/public/page?page=${
this.current - 1
}&size=${this.pageSize}`,
{}
).then((res) => {
console.log(res, "初始化数据,666");
if (res.data.content) {
this.cardArr = res.data.content;
this.total = res.data.totalElements;
// this.classSelectData(this.classification.list[0]);
// console.log(this.classification.list[0],"重置回企业");
// this.tabChoice = this.classification.list[0].name;
// this.isRouterAlive = false;
// this.$nextTick(() => {
// this.isRouterAlive = true;
// });
} else {
this.cardArr = [];
}
});
},
// 当前页数全部分页器
onChange(current, pageSize) {
this.current = current;
this.pageSize = pageSize;
console.log(current, pageSize, "当前页面");
if (this.input) {
// 当搜索框有值则清空当前行业选中项
this.currentStateText = "";
// 根据分页器进行搜索
this.paginationSearchqQuery();
} else if (this.itemIndustry.step) {
this.$get(
`/api/gc_trade_center/activity/public?page=${this.current - 1}&size=${
this.pageSize
}&category=${this.classificationText}`
).then((res) => {
console.log(res, "初始化数据 选中的值");
this.cardArr = res.data.content; // 数据列表
this.total = res.data.totalElements; // 总数据条数
});
} else {
this.wholeData();
}
},
},
};
</script>css代码如下：
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.Cooperative_Unit {
width: 100%;
height: 100%;
background-color: #ffffff;
> img {
width: 100%;
height: 400px;
}
// padding: 40px;
.Condition_search {
width: 1200px;
margin: 0 auto;
.conditions_box {
background-color: #fff;
padding: 31px;
border-bottom: 1px solid #e6e6e6;
.enterSearch {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
// background-color: rgb(180, 196, 163);
.enterSearch_left {
width: 50%;
display: flex;
justify-content: flex-start;
.Search_text {
display: flex;
justify-content: flex-start;
margin-right: 20px;
.Search_content {
width: 70px;
height: 32px;
line-height: 34px;
font-size: 16px;
font-weight: 400;
color: #666666;
// 文字两端对齐
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
}
.Search_colon {
height: 32px;
line-height: 34px;
font-size: 16px;
font-weight: 400;
color: #666666;
}
}
.input_width {
width: 400px;
padding-left: 10px;
}
}
.enterSearch_right {
width: 50%;
display: flex;
justify-content: flex-end;
align-items: center;
.Prompt_text {
margin-right: 20px;
font-size: 14px;
}
.checkIn {
width: 120px;
height: 40px;
color: #00468e;
border: 1px solid #00468e;
&:hover {
background-color: #00468e;
color: #ffffff;
}
}
}
}
}
.Company_profile_box {
width: 1224px;
display: flex;
justify-content: flex-start;
align-items: left;
flex-wrap: wrap;
margin-top: 29px;
cursor: pointer;
.card_box {
width: 385px;
height: 375px;
background: #ffffff;
border: 1px solid #d8d8d8;
border-radius: 4px;
margin: 0 20px 20px 0;
box-sizing: border-box;
.card_img {
width: 100%;
height: 230px;
border-bottom: 1px solid #d8d8d8;
> img {
width: 383px;
height: 229px;
border-radius: 4px 4px 0 0;
}
}
.card_content {
font-size: 16px;
font-weight: 500;
color: #333333;
margin: 20px 20px;
.card_text {
width: 345px;
height: 62px;
font-size: 14px;
font-weight: 400;
color: #333333;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
&:hover {
color: #00468e;
}
}
&:hover {
color: #00468e;
border: 0px;
box-shadow: 0px 0px 6px 4px rgba(40, 93, 171, 0.1);
}
}
.card_box:hover > .card_img > img {
width: 385px;
}
}
.noData {
height: 80px;
line-height: 80px;
text-align: center;
}
// 分页器盒子
.paging_box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
// height: 70px;
margin-top: 39px;
/deep/.ant-pagination-item-active {
border: 1px solid #00468e;
> a {
color: #00468e;
}
a:hover {
color: #00468e !important;
// border:1px solid #00468E;
}
/deep/.ant-pagination-item-active:hover {
border: 1px solid #00468e !important;
}
}
}
}
}
</style>
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
