const copyRightComponent = {
template:`
`,
setup(props, context) {
console.log('copyRight组件加载完毕');
// console.log(props);
},
props:{
path:'',
web_name:'',
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const footButtonComponent = {
template: `
`,
setup(props, context) {
console.log('footButton组件加载完毕');
// console.log(props);
},
props:{}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const notePopup = {
template: `
`,
setup(props, context) {
console.log('notePopup组件加载完毕');
// console.log(props);
},
props:{
path:'',
url:'',
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const stuHeaderComponent = {
template: `
`,
setup(props, context) {
console.log('stuHeader组件加载完毕');
// console.log(props);
},
props:{
ctx:{},
items:{class:[],list:[]},
hotsuggs:{data:[]},
tid:String,
is_home:Boolean,
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const stuCategoryComponent = {
template: `
`,
setup(props, context) {
console.log('stuCategory组件加载完毕');
// console.log(props);
},
props:{
ctx:{},
items:{class:[],list:[]},
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const stuBannerComponent = {
template:`
`,
setup(props, context) {
console.log('stuBanner组件加载完毕');
// console.log(props);
},
props:{
ctx:{},
items:{class:[],list:[]},
hotsuggs:{data:[]},
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const stuFilterComponent = {
template:`
`,
setup(props, context) {
console.log('stuFilter组件加载完毕');
// console.log(props);
const items = props.items;
const tid = props.tid;
const ctx = props.ctx;
const now_filters = computed(() => {
// console.log('计算now_filters');
// items.value.class.find(it=>it.type_id===tid);
let now_filters = items&&items.filters? items.filters[tid]:[];
// console.log(now_filters);
return now_filters
});
let p = new URLSearchParams(location.href.split('?')[1]);
let dict = Object.fromEntries(p.entries());
let f = dict.f || '{}';
try {
f = JSON.parse(f);
}catch (e) {
}
const methods = {
openFilterUrl(item,obj,filters){
// let url = ctx.path+'?tid='+item.type_id+'&tname='+item.type_name+'&filter='+obj.v;
// let p = new URLSearchParams(location.href.split('?')[1]);
// let dict = Object.fromEntries(p.entries());
// let f = dict.f || '{}';
try {
// f = JSON.parse(f);
f[filters.key] = obj.v;
f = JSON.stringify(f);
dict.f = f;
let new_p = new URLSearchParams(dict);
let url = ctx.path+'?'+new_p;
// console.log(url);
location.href = url;
}catch (e) {
console.log(`筛选发生错误:${e.message}`);
}
},
tellActive(obj,filters){
return f[filters.key] === obj.v;
}
}
return {
...methods,
now_filters
}
},
props:{
items:{},
now_filters:[],
tid:String,
ctx:{},
item:{},
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const stuTopicComponent = {
template:`
`,
setup(props, context) {
console.log('stuTopic组件加载完毕');
// console.log(props);
},
props:{
link:'',
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const stuLinksComponent = {
template:`
`,
setup(props, context) {
console.log('stuLinks组件加载完毕');
// console.log(props);
},
props:{
links:Array,
}, //配置需要传入的属性
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const StuImageComponent = {
template:`
`,
setup(props, context) {
console.log('StuImage组件加载完毕');
const methods = {
closeImage(e) {
//子组件可以使用 context.emit 触发父组件的自定义事件
// console.log(context.emit);
// console.log('调用父组件 closeImage');
context.emit('close_image');
},
};
return {
...methods,
// visible
}
},
props: {
url: {
type: String,
default: "",
},
visible: {
type: Boolean,
default: false,
},
},//配置需要传入的属性
emits :['close_image'],
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
const StuPagerComponent = {
template:`
`,
setup(props, context) {
console.log('StuPager组件加载完毕');
let pg = props.pg; //pg非ref变量,直接就可以拿到，不需要.value
// console.log('pg:',pg);
const last_page = ref(Number(pg)-1>0?Number(pg)-1:1);
const next_page = ref(Number(pg)+1>0?Number(pg)+1:1);
const now_pages = computed(() => {
// console.log('计算now_pages：',(Number(pg)+10));
let start = (Number(pg)-5)>0?(Number(pg)-5):1;
let end = (Number(pg)+5) > start+10?start+10:(Number(pg)+5);
let rangeArr = Array.from({ length: end - start + 1 }, (_, i) => start + i);
// console.log(rangeArr);
return rangeArr
});
const methods = {
// closeImage(e) {
// context.emit('close_image');
// },
};
return {
...methods,
last_page,
next_page,
now_pages,
}
},
props: ['ctx','pg','pagecount'],
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
};
//下面的注册组件方法无法使用,需要在app里去注册
// Vue.component('copy-right', copyRightComponent);
// Vue.component('foot-button', footButtonComponent);
// Vue.component('note-popup', notePopup);
// Vue.component('stu-header', stuHeaderComponent);
// Vue.component('stu-banner', stuBannerComponent);
/*注意事项
封装组件过程中传递属性名称一定不能含有大写,比如isHome会被强制识别为is-home，所以应该传递为is_home
*/
