uniapp常用技巧

闷墩儿这只小猫咪

已于 2022-11-23 10:03:13 修改

阅读量375

点赞数

文章标签： uni-app javascript 前端

于 2022-11-17 10:32:58 首次发布

本文链接：https://blog.csdn.net/m0_65972155/article/details/127767426

版权

第一篇

scss函数的使用

创建一个mixin.scss文件

/*控制文本的隐藏*/
@mixin ellipsis($clamp:1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
}

在组件中使用

<style rel="stylesheet/scss" lang="scss" scoped>

@import '@/assets/css/mixin.scss';//引用此混合样式
.box{
      @include ellipsis(2);
    }

</style>

easycom 自定义组件

pages.json里配置

    "easycom": { //组件化配置
		"autoscan": true, //是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
		"custom": {
			// "uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
			"uni-(.*)": "@/components/uni-$1/uni-$1.vue", // 匹配components目录下组件名称/组件名称内的vue文件