f***@163.com
f***@163.com
  • 发布:2022-04-02 19:26
  • 更新:2022-04-02 20:01
  • 阅读:2262

uni-ui的组件安装后不生效

分类:uni-app

工程创建是用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>  

文档中的效果是这样的:

而我的却是如下:

另外,富文本编辑器不能直接粘图片吗?还要把图片保存一下,再上传,太麻烦了。

2022-04-02 19:26 负责人:无 分享
已邀请:
f***@163.com

f***@163.com (作者)

自问自答吧,后来发现不能import组件,导入了就不好用,不导入就成功了,网上的例子害死人,老老实实看官方文档就差不多了。不过目前这种虽然运行OK,但webstorm里还是没有组件的属性提示,怎么才能有?

该问题目前已经被锁定, 无法添加新回复