工程创建是用vue脚手架创建的,npm安装了后,参照了文档中的一个折叠面板的例子,但居然不生效, sass, sass-loader也安装了
代码:
<script>
import {uniCollapse} from '@dcloudio/uni-ui'
import {uniCollapseItem} from '@dcloudio/uni-ui'
export default {
components: {
uniCollapse,uniCollapseItem
},
data() {
return {
value: ['0'],
accordionVal: '1',
content: '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。',
extraIcon: {
color: '#4cd964',
size: '26',
type: 'image'
},
}
},
methods: {
add() {
if (this.content.length > 35) {
this.content = '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。'
} else {
this.content = '折叠内容主体,这是一段比较长内容。通过点击按钮修改后内容后,使组件高度发生变化,在次点击按钮恢复之前的内容和高度。'
}
// TODO 小程序中不支持自动更新 ,需要手动resize 更新组件高度
// #ifdef MP
this.$nextTick(() => {
this.$refs.collapse.resize()
})
// #endif
},
onClick(e) {
uni.showToast({
title: '列表被点击'
})
},
change(e) {
console.log(e);
}
}
}
</script>
<template>
<view>
<uni-collapse ref="collapse" v-model="value">
<uni-collapse-item title="默认开启" >
<view class="content">
<text class="text">{{content}}</text>
</view>
</uni-collapse-item>
<uni-collapse-item title="折叠内容">
<view class="content">
<text class="text">折叠内容主体,这是一段比较长内容。默认折叠主要内容,只显示当前项标题。点击标题展开,才能看到这段文字。再次点击标题,折叠内容。</text>
</view>
</uni-collapse-item>
</uni-collapse>
<button class="button" type="primary" @click="add">动态修改内容</button>
</view>
</template>
<style lang="scss">
.example-body {
flex-direction: column;
flex: 1;
}
.content {
padding: 15px;
}
.text {
font-size: 14px;
color: #666;
line-height: 20px;
}
.button {
// margin-top: 10px;
margin: 10px;
margin-bottom: 0;
}
</style>
文档中的效果是这样的:
而我的却是如下:
另外,富文本编辑器不能直接粘图片吗?还要把图片保存一下,再上传,太麻烦了。