mirror of
https://github.com/cq-panda/Vue.NetCore.git
synced 2026-10-17 05:20:50 +08:00
完善文档
This commit is contained in:
jxx1
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div calss="cow-container">
|
||||
<div class="cow-top">
|
||||
<div class="cow-choiceness">
|
||||
<div class="text">精选</div>
|
||||
<div class="desc">双11你准备给你老婆买啥</div>
|
||||
<Icon type="ios-planet" class="star" color="#f5f5f56b" />
|
||||
</div>
|
||||
<div class="cow-hot">
|
||||
<div class="text">热门</div>
|
||||
<div class="desc">99年世界末日了解一下</div>
|
||||
<Icon type="ios-analytics" class="hot" color="#f5f5f56b" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cow-list">
|
||||
<div class="cow-item" v-for="(item,index) in cowList" :key="index">
|
||||
<div class="item-head">
|
||||
<img v-bind:src="item.header" />
|
||||
<span class="author">{{item.author}}</span>
|
||||
<span class="focus">关注</span>
|
||||
</div>
|
||||
<div class="item-content" @click="link(item)">
|
||||
<span class="title">【{{item.title}}】</span>
|
||||
{{splitContent(item)}}
|
||||
<!-- <span
|
||||
@click="item.show=!item.show"
|
||||
v-show="item.show"
|
||||
class="all-text"
|
||||
>全文</span>-->
|
||||
<span v-show="item.show" class="all-text">全文</span>
|
||||
</div>
|
||||
<div class="item-imgs">
|
||||
<img
|
||||
:class="item.class"
|
||||
v-for="(imgItem,imgIndex) in item.imgs"
|
||||
v-bind:src="imgItem"
|
||||
:key="imgIndex"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cowList: [
|
||||
{
|
||||
title: "暗恋一个女生,昨天请她出来看电影..",
|
||||
author: "路边观察社北京一分社",
|
||||
header:
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/head3.jpg",
|
||||
content:
|
||||
" 暗恋一个女生很久了，昨天请她出来看电影，当我准时到影院时，才发现自己没带钱。值得庆幸的是，她像往常一样，并没有赴约,这终究是人生的大幸还是不幸，点了支烟，我茫然深思",
|
||||
imgs: [
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "听说女人和男人在床上说得最多的一句是",
|
||||
author: "路边观察社北京二分社",
|
||||
|
||||
header:
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/head1.jpg",
|
||||
content:
|
||||
" “你压着我头发了。”现在看电视剧终于明白为什么男二号总对男一号说：“你要敢动她根头发我和你没完！.....................",
|
||||
imgs: [
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/xx.jpg",
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "2019年7月26日早 灰暗的云彩笼罩了天空",
|
||||
author: "路边观察社北京三分社",
|
||||
header:
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/head3.jpg",
|
||||
content:
|
||||
" 显得那样阴霾 我蹒跚着走到了那个地方 一切还是那么熟悉 强颜欢笑的和熟悉的熟人打着招呼 看得出 他们也在强颜欢笑 走到了那个非常熟悉的人的面前 深深的吸了一口气 还是那熟悉的问道 无语凝视着 我缓缓的递过去带着体温的八元钱 淡淡的说道 ：“老样子” 他苦笑着摇摇头，说：“不够” “不够？”内心不禁起波澜，难道涨的这么快吗，安抚住心内的汹涌澎湃，我试探着问道：“那来一个？”他依然苦笑着摇头。“纳尼，以前四块钱一个的肉夹馍，肿么现在八元钱一个都不够了哇，告诉我，这是为什么，到底是为什么？”此刻我有些抓狂，肾上腺激素飙高，显然我有些失控了。“亲，我也没办法，猪肉都22一斤了。。。。。。”看着他那也是万般无奈的表情，我颓然的放下那拿着带着体温的钱的手，默默的低下来头，惆怅的转身而去，拉长的身影，显得那么的黑暗无助。。。。。。",
|
||||
imgs: [
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/xx.jpg",
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x1.jpg",
|
||||
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
link(item) {
|
||||
this.$message.error(item.title);
|
||||
},
|
||||
imgClass() {
|
||||
return "a2";
|
||||
},
|
||||
splitContent(item) {
|
||||
if (item.imgs && item.imgs.length > 0) {
|
||||
item.class = "img" + item.imgs.length;
|
||||
}
|
||||
if (item.content.length < 80) {
|
||||
item.show = false;
|
||||
return item.content;
|
||||
}
|
||||
item.show = true;
|
||||
return item.content.substring(0, 80) + "...";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.cow-container {
|
||||
height: 100%;
|
||||
}
|
||||
.cow-top {
|
||||
background: white;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.cow-top > div {
|
||||
float: left;
|
||||
width: 49%;
|
||||
text-align: left;
|
||||
}
|
||||
.cow-top > div:first-child {
|
||||
background: #57a3f3;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.cow-top > div:last-child {
|
||||
background: #ff4081;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cow-top > div .text {
|
||||
font-size: 20px;
|
||||
}
|
||||
.cow-top > div .desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
.cow-choiceness .star {
|
||||
color: #f5f5f56b;
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
margin-top: -54px;
|
||||
font-size: 46px;
|
||||
border: 0px;
|
||||
}
|
||||
.cow-hot .hot {
|
||||
color: #f5f5f56b;
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
margin-top: -54px;
|
||||
font-size: 46px;
|
||||
border: 0px;
|
||||
}
|
||||
.item-head {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.item-head img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-head span {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.item-head .focus {
|
||||
position: relative;
|
||||
top: 0;
|
||||
font-size: 15px;
|
||||
float: right;
|
||||
padding: 0px 10px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #f9d9d9;
|
||||
color: #f44336;
|
||||
}
|
||||
.item-imgs{
|
||||
max-height: 180px;
|
||||
/* width: 300px; */
|
||||
/* height: 50px; */
|
||||
line-height: 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.item-imgs .img1 {
|
||||
width: 100%;
|
||||
/* max-height: 180px; */
|
||||
}
|
||||
.item-imgs .img2 {
|
||||
width: 49%;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.item-imgs .img3 {
|
||||
width: 32%;
|
||||
height: 75px;
|
||||
}
|
||||
.item-imgs .img3:first-child,
|
||||
.item-imgs .img2:first-child {
|
||||
margin-right: 2%;
|
||||
}
|
||||
.item-imgs .img3:last-child {
|
||||
margin-left: 2%;
|
||||
}
|
||||
.cow-item {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.cow-item:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-imgs {
|
||||
margin-top: 9px;
|
||||
}
|
||||
.item-content {
|
||||
letter-spacing: 1.2px;
|
||||
text-align: left;
|
||||
color: #8b8787;
|
||||
}
|
||||
.item-content .title {
|
||||
font-size: 15px;
|
||||
color: #353535;
|
||||
}
|
||||
.item-content .all-text {
|
||||
color: blue;
|
||||
}
|
||||
.cow-list {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -227,6 +227,16 @@ const param = {
|
||||
</span><span style="line-height:1.5;font-size:18px;"><span style="display:none;"></span></span><br />` },
|
||||
{ name: "loadTableAfter", desc: "从后台加载数据后处理，可参照【从api加载数据】Demo", param: "(data, callBack) 参数：data为后台返回的数据;callBack回调方法，callBack(true),如果回调传入false，将中断代码执行" },
|
||||
{ name: "rowChange", desc: "行选中事件,只有设置single=true单选才会生效", param: "row,当前选中的行 " },
|
||||
{ name: "rowClick", desc: `单击行事件,点击时设置当前行选中:
|
||||
<p>
|
||||
rowClick ({ row, column, event }) { </p>
|
||||
<p> this.$refs.table.toggleRowSelection(row); </p>
|
||||
<p> }, </p>
|
||||
<p> //如果是代码生成的页面，请用下面的方法选中行 </p>
|
||||
<p> // this.$refs.table.$refs.table.toggleRowSelection(row); </p>
|
||||
</p>
|
||||
`, param: "{row:当前选中的行,column:当前行配置,$event:当前事件}" },
|
||||
{ name: "rowDbClick", desc: "双击行事件(2021.05.23新增),点击时选中当前行，见上面rowClick", param: "{row:当前选中的行,column:当前行配置,$event:当前事件}" },
|
||||
{ name: "loadTreeChildren", desc: `<span style="color:red;"></span> loadTreeChildren(tree, treeNode, resolve) { //加载子节点<br />
|
||||
let url="api/xxx?roleId="+tree.Role_Id<br />
|
||||
this.http.post(url,{}).then(result=>{<br />
|
||||
|
||||
@@ -44,6 +44,13 @@ export default {
|
||||
return {
|
||||
active: 0,
|
||||
log: [
|
||||
{ date: "2021-05-23 15:58:41",desc:"集成table双击行事件"},
|
||||
{ date: "2021-05-23 15:34:04",desc:"加深查询界面标题颜色"},
|
||||
{ date: "2021-05-23 15:21:01",desc:"设置查询界面table默认开启排序功能"},
|
||||
{ date: "2021-05-23 15:04:12",desc:"集成vue-count-to"},
|
||||
{ date: "2021-05-23 03:38:27",desc:"修复sqldapper事务未实例化的问题，移除sqldapper mysql批量插入双引号的替换"},
|
||||
{ date: "2021-05-17 23:07:13",desc:"优化H5"},
|
||||
{ date: "2021-05-17 22:16:17",desc:"修复SqlDapper在mysql中使用异常的问题"},
|
||||
{ date: "2021-05-16 21:50:11",desc:"增加dapper连接其他数据库使用说明"},
|
||||
{ date: "2021-05-16 21:49:45",desc:"增加表单select动态显示、隐藏下拉框选项"},
|
||||
{ date: "2021-05-16 21:20:24",desc:"集成代码生成iview radio组件"},
|
||||
|
||||
Reference in New Issue
Block a user