Skip to content

Commit b6fac51

Browse files
wlxuquwlxuqu
committed
read-more组件使用动态id的形式
1 parent 3b6d9a3 commit b6fac51

File tree

4 files changed

+225
-41
lines changed

4 files changed

+225
-41
lines changed

‎pages.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
// "current": 0, //当前激活的模式(list 的索引项)
77
// "list": [{
88
// "name": "test", //模式名称
9-
// "path": "pages/componentsB/swipeAction/index", //启动页面，必选
9+
// "path": "pages/componentsC/test/index", //启动页面，必选
1010
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
1111
// }]
1212
// },

‎pages/componentsC/test/index.vue

Lines changed: 220 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,231 @@
11
<template>
2-
<u-card :title="title" :sub-title="subTitle" :thumb="thumb">
3-
<view class="" slot="body">
4-
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
5-
<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
6-
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
7-
</view>
8-
<view class="u-body-item u-flex u-row-between u-p-b-0">
9-
<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
10-
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
11-
</view>
2+
<view>
3+
<view class="wed">
4+
<!-- 单选日期 -->
5+
<text @click="WE=!WE">开始</text>
6+
<input type="text" v-model="result" />
7+
<u-calendar v-model="WE" :mode="WEmode" @change="WEchange" start-text="开始" end-text="结束"></u-calendar>
128
</view>
13-
<view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
14-
</u-card>
9+
10+
<view class="wed">
11+
<!-- 多选日期 -->
12+
<text @click="WED=!WED">开始</text>
13+
<input type="text" v-model="startDate" />
14+
<text@click="WED=!WED">结束</text>
15+
<input type="text" v-model="endDate" />
16+
<u-calendar v-model="WED" :mode="WEDmode" @change="WEDchange" start-text="开始" end-text="结束"></u-calendar>
17+
</view>
18+
19+
20+
<view class="">
21+
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-text="更多" :shadow-style="shadowStyle">
22+
<rich-text :nodes="content"></rich-text>
23+
</u-read-more>
24+
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-tex t="更多" :shadow-style="shadowStyle">
25+
<rich-text :nodes="content"></rich-text>
26+
</u-read-more>
27+
28+
</view>
29+
30+
<view>
31+
<!-- 字段少的表格 -->
32+
<u-table>
33+
<u-tr>
34+
<u-th width="30%">学校</u-th>
35+
<u-th>班级</u-th>
36+
<u-th>年龄</u-th>
37+
<u-th>爱好</u-th>
38+
</u-tr>
39+
<u-tr v-for="(item, index) in itemList" :key="index">
40+
<u-td width="6%">
41+
<u-checkbox-group @change="checkboxGroupChange1(index)">
42+
<u-checkbox @change="checkboxChange" v-model="item.checked"></u-checkbox>
43+
</u-checkbox-group>
44+
</u-td>
45+
<u-td>{{item.warehouseid}}</u-td>
46+
<u-td>{{item.warehouseid}}</u-td>
47+
<u-td>{{item.desc}}</u-td>
48+
<u-td>{{item.desc}}</u-td>
49+
</u-tr>
50+
</u-table>
51+
</view>
52+
53+
54+
55+
<view>
56+
<u-table>
57+
<u-tr>
58+
<u-th width="38%">名称</u-th>
59+
<u-th>别名</u-th>
60+
<u-th>座右铭</u-th>
61+
</u-tr>
62+
<u-tr v-for="(item, index) in itemList" :key="index">
63+
<u-td width="6%">
64+
<u-radio-group v-model="value" label-disabled="true" @change="radioGroupChange(index)">
65+
<u-radio @change="radioChange" :name="item.warehouseid">
66+
67+
</u-radio>
68+
</u-radio-group>
69+
</u-td>
70+
<u-td>{{item.warehouseid}}</u-td>
71+
<u-td>{{item.warehouseid}}</u-td>
72+
<u-td>{{item.desc}}</u-td>
73+
74+
</u-tr>
75+
</u-table>
76+
</view>
77+
78+
</view>
79+
1580
</template>
1681

1782
<script>
18-
export default {
19-
data() {
20-
return {
21-
title: '素胚勾勒出青花，笔锋浓转淡',
22-
subTitle: '2020-05-15',
23-
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
24-
};
83+
export default {
84+
data() {
85+
return {
86+
// ----单选------------
87+
WE: false,
88+
WEmode: "date",
89+
result: '',
90+
// ---------------------
91+
92+
// ----多选--------------
93+
WED: false,
94+
WEDmode: 'range',
95+
startDate: "",
96+
endDate: '',
97+
// ----------------------
98+
content: `客户:山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
99+
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
100+
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
101+
shadowStyle: {
102+
// backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
103+
paddingTop: "300rpx",
104+
marginTop: "-300rpx",
105+
106+
},
107+
//-------------单选框
108+
checked: false,
109+
checked1: false,
110+
currentSort: 0,
111+
itemList: {},
112+
113+
114+
value: 'orange',
115+
bangkList: [{
116+
name: '英雄联盟',
117+
alias: '撸啊撸',
118+
else: '玩你**',
119+
120+
},
121+
{
122+
name: '守望先锋',
123+
alias: '守望屁股',
124+
else: '打你**',
125+
126+
},
127+
{
128+
name: '炉石传说',
129+
alias: '非酋玩家',
130+
else: '冲你**',
131+
132+
}
133+
],
134+
135+
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
136+
// value: false,
137+
138+
139+
}
140+
},
141+
created() {
142+
//页面一进来就发送请求
143+
uni.request({
144+
url: 'http://47.99.173.114:9999/wms/wmmdwarehouse/list',
145+
method: 'GET',
146+
success: res => {
147+
this.itemList = res.data
148+
}
149+
})
150+
151+
},
152+
methods: {
153+
// 选中某个单选框时，由radio时触发
154+
radioChange(e) {
155+
// console.log(e);
156+
},
157+
158+
// 选中任一radio时，由radio-group触发
159+
radioGroupChange(index) {
160+
console.log(index);
161+
},
162+
163+
164+
checkboxGroupChange1(index) {
165+
console.log("下标为:" + index);
166+
167+
},
168+
// 选中某个复选框时，由checkbox时触发
169+
checkboxChange(e) {
170+
console.log(e);
171+
172+
173+
},
174+
// 选中任一checkbox时，由checkbox-group触发
175+
checkboxGroupChange(e) {
176+
console.log("全部选按钮" + e);
177+
},
178+
179+
WEchange(e) {
180+
console.log(e); //打印出来的值
181+
// ----------时间单选-----------
182+
this.result = e.result
183+
},
184+
WEDchange(e) {
185+
console.log(e); //打印出来的值
186+
// ----------时间多选择-----------
187+
this.startDate = e.startDate //赋值
188+
this.endDate = e.endDate //赋值
189+
190+
},
191+
}
25192
}
26-
};
27193
</script>
28194

29-
<style scoped lang="scss">
30-
.u-card-wrap {
31-
background-color: $u-bg-color;
32-
padding: 1px;
195+
<style lang="scss">
196+
.u-read-more {
197+
border: 1px solid #007AFF;
198+
margin-top: 10rpx;
33199
}
34-
35-
.u-body-item {
36-
font-size: 32rpx;
37-
color: #333;
38-
padding: 20rpx 10rpx;
200+
201+
.u-content {
202+
font-size: 12;
203+
39204
}
40-
41-
.u-body-item image {
42-
width: 120rpx;
43-
flex: 0 0 120rpx;
44-
height: 120rpx;
45-
border-radius: 8rpx;
46-
margin-left: 12rpx;
205+
206+
.wed {
207+
rich-text {
208+
font-size: 12rpx;
209+
color: #0066CC
210+
}
211+
212+
text {
213+
width: 100rpx;
214+
height: 100%;
215+
}
216+
217+
width: 100%;
218+
height: 100%;
219+
display: flex;
220+
border: 2rpx solid #007AFF;
221+
// justify-content: center;
222+
223+
.red {
224+
225+
uni-view,
226+
uni-text {
227+
border: 1px solid #007aff;
228+
}
229+
}
47230
}
48-
</style>
231+
</style>

‎uview-ui/components/u-read-more/u-read-more.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<view class="">
3-
<view class="u-content" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }">
3+
<view class="u-content" :class="[elId]" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }">
44
<slot></slot>
55
</view>
66
<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap"
@@ -95,14 +95,15 @@
9595
return {
9696
isLongContent: false, // 是否需要隐藏一部分内容
9797
showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起
98+
elId: this.$u.guid(), // 生成唯一class
9899
};
99100
},
100101
mounted() {
101102
this.init();
102103
},
103104
methods: {
104105
init() {
105-
this.$uGetRect('.u-content').then(res => {
106+
this.$uGetRect('.' + this.elId).then(res => {
106107
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
107108
if (res.height > uni.upx2px(this.showHeight)) {
108109
this.isLongContent = true;

‎uview-ui/libs/function/queryParams.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
1919
switch (arrayFormat) {
2020
case 'indices':
2121
// 结果: ids[0]=1&ids[1]=2&ids[2]=3
22-
for (let i = 0; i < value.length; i++) {
22+
for (i = 0; i < value.length; i++) {
2323
_result.push(key + '[' + i + ']=' + value[i])
2424
}
2525
break;

0 commit comments

Comments
 (0)