Commit b6fac515 authored by wlxuqu's avatar wlxuqu

read-more组件使用动态id的形式

parent 3b6d9a36
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
// "current": 0, //当前激活的模式(list 的索引项) // "current": 0, //当前激活的模式(list 的索引项)
// "list": [{ // "list": [{
// "name": "test", //模式名称 // "name": "test", //模式名称
// "path": "pages/componentsB/swipeAction/index", //启动页面,必选 // "path": "pages/componentsC/test/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到 // "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
// }] // }]
// }, // },
......
<template> <template>
<u-card :title="title" :sub-title="subTitle" :thumb="thumb"> <view>
<view class="" slot="body"> <view class="wed">
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"> <!-- 单选日期 -->
<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆,冉冉檀香透过窗心事我了然,宣纸上走笔至此搁一半</view> <text @click="WE=!WE">开始</text>
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image> <input type="text" v-model="result" />
</view> <u-calendar v-model="WE" :mode="WEmode" @change="WEchange" start-text="开始" end-text="结束"></u-calendar>
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏,而你嫣然的一笑如含苞待放</view>
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
</view>
</view> </view>
<view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
</u-card> <view class="wed">
<!-- 多选日期 -->
<text @click="WED=!WED">开始</text>
<input type="text" v-model="startDate" />
<text@click="WED=!WED">结束</text>
<input type="text" v-model="endDate" />
<u-calendar v-model="WED" :mode="WEDmode" @change="WEDchange" start-text="开始" end-text="结束"></u-calendar>
</view>
<view class="">
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-text="更多" :shadow-style="shadowStyle">
<rich-text :nodes="content"></rich-text>
</u-read-more>
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-tex t="更多" :shadow-style="shadowStyle">
<rich-text :nodes="content"></rich-text>
</u-read-more>
</view>
<view>
<!-- 字段少的表格 -->
<u-table>
<u-tr>
<u-th width="30%">学校</u-th>
<u-th>班级</u-th>
<u-th>年龄</u-th>
<u-th>爱好</u-th>
</u-tr>
<u-tr v-for="(item, index) in itemList" :key="index">
<u-td width="6%">
<u-checkbox-group @change="checkboxGroupChange1(index)">
<u-checkbox @change="checkboxChange" v-model="item.checked"></u-checkbox>
</u-checkbox-group>
</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.desc}}</u-td>
<u-td>{{item.desc}}</u-td>
</u-tr>
</u-table>
</view>
<view>
<u-table>
<u-tr>
<u-th width="38%">名称</u-th>
<u-th>别名</u-th>
<u-th>座右铭</u-th>
</u-tr>
<u-tr v-for="(item, index) in itemList" :key="index">
<u-td width="6%">
<u-radio-group v-model="value" label-disabled="true" @change="radioGroupChange(index)">
<u-radio @change="radioChange" :name="item.warehouseid">
</u-radio>
</u-radio-group>
</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.desc}}</u-td>
</u-tr>
</u-table>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
title: '素胚勾勒出青花,笔锋浓转淡', // ----单选------------
subTitle: '2020-05-15', WE: false,
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', WEmode: "date",
}; result: '',
// ---------------------
// ----多选--------------
WED: false,
WEDmode: 'range',
startDate: "",
endDate: '',
// ----------------------
content: `客户:山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。
苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。
无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?`,
shadowStyle: {
// backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
paddingTop: "300rpx",
marginTop: "-300rpx",
},
//-------------单选框
checked: false,
checked1: false,
currentSort: 0,
itemList: {},
value: 'orange',
bangkList: [{
name: '英雄联盟',
alias: '撸啊撸',
else: '玩你**',
},
{
name: '守望先锋',
alias: '守望屁股',
else: '打你**',
},
{
name: '炉石传说',
alias: '非酋玩家',
else: '冲你**',
}
],
// u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
// value: false,
}
},
created() {
//页面一进来就发送请求
uni.request({
url: 'http://47.99.173.114:9999/wms/wmmdwarehouse/list',
method: 'GET',
success: res => {
this.itemList = res.data
}
})
},
methods: {
// 选中某个单选框时,由radio时触发
radioChange(e) {
// console.log(e);
},
// 选中任一radio时,由radio-group触发
radioGroupChange(index) {
console.log(index);
},
checkboxGroupChange1(index) {
console.log("下标为:" + index);
},
// 选中某个复选框时,由checkbox时触发
checkboxChange(e) {
console.log(e);
},
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange(e) {
console.log("全部选按钮" + e);
},
WEchange(e) {
console.log(e); //打印出来的值
// ----------时间单选-----------
this.result = e.result
},
WEDchange(e) {
console.log(e); //打印出来的值
// ----------时间多选择-----------
this.startDate = e.startDate //赋值
this.endDate = e.endDate //赋值
},
}
} }
};
</script> </script>
<style scoped lang="scss"> <style lang="scss">
.u-card-wrap { .u-read-more {
background-color: $u-bg-color; border: 1px solid #007AFF;
padding: 1px; margin-top: 10rpx;
} }
.u-body-item { .u-content {
font-size: 32rpx; font-size: 12;
color: #333;
padding: 20rpx 10rpx;
} }
.u-body-item image { .wed {
width: 120rpx; rich-text {
flex: 0 0 120rpx; font-size: 12rpx;
height: 120rpx; color: #0066CC
border-radius: 8rpx; }
margin-left: 12rpx;
text {
width: 100rpx;
height: 100%;
}
width: 100%;
height: 100%;
display: flex;
border: 2rpx solid #007AFF;
// justify-content: center;
.red {
uni-view,
uni-text {
border: 1px solid #007aff;
}
}
} }
</style> </style>
\ No newline at end of file
<template> <template>
<view class=""> <view class="">
<view class="u-content" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }"> <view class="u-content" :class="[elId]" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }">
<slot></slot> <slot></slot>
</view> </view>
<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap" <view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap"
...@@ -95,6 +95,7 @@ ...@@ -95,6 +95,7 @@
return { return {
isLongContent: false, // 是否需要隐藏一部分内容 isLongContent: false, // 是否需要隐藏一部分内容
showMore: false, // 当前隐藏与显示的状态,true-显示,false-收起 showMore: false, // 当前隐藏与显示的状态,true-显示,false-收起
elId: this.$u.guid(), // 生成唯一class
}; };
}, },
mounted() { mounted() {
...@@ -102,7 +103,7 @@ ...@@ -102,7 +103,7 @@
}, },
methods: { methods: {
init() { init() {
this.$uGetRect('.u-content').then(res => { this.$uGetRect('.' + this.elId).then(res => {
// 判断高度,如果真实内容高度大于占位高度,则显示收起与展开的控制按钮 // 判断高度,如果真实内容高度大于占位高度,则显示收起与展开的控制按钮
if (res.height > uni.upx2px(this.showHeight)) { if (res.height > uni.upx2px(this.showHeight)) {
this.isLongContent = true; this.isLongContent = true;
......
...@@ -19,7 +19,7 @@ function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') { ...@@ -19,7 +19,7 @@ function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
switch (arrayFormat) { switch (arrayFormat) {
case 'indices': case 'indices':
// 结果: ids[0]=1&ids[1]=2&ids[2]=3 // 结果: ids[0]=1&ids[1]=2&ids[2]=3
for (let i = 0; i < value.length; i++) { for (i = 0; i < value.length; i++) {
_result.push(key + '[' + i + ']=' + value[i]) _result.push(key + '[' + i + ']=' + value[i])
} }
break; break;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment