小程序里的自定义组件:组件的外部样式externalClasses的使用

启用外部样式:

自定义组件:

v-tag

在html 引入

在组件写外部样式的css :

.ex-tag {
  background-color: #fffbdd ;
}

在组件使用该外部的样式

这个时候我们发现没有效果

我们应该使用!important 强制覆盖样式

.ex-tag {
  background-color: #fffbdd !important;
}

效果:

原文地址:https://www.cnblogs.com/guangzhou11/p/11470590.html

时间: 2024-07-29 23:33:20

小程序里的自定义组件:组件的外部样式externalClasses的使用的相关文章

小程序里实现 watch 和 computed

小程序里的自定义组件里是有数据监听器的,可以监听对应数据的变化来执行callBack,但是页面Page里没有对应的api就显的很生硬,比如某个数据变了(如切换城市)需要重新刷页面,如果不做监听,每次都要在数据变化的地方手动去调一次函数. 那么如何像vue那样在Page里实现 watch 和 computed 呢 ?如果这时候你脑子里能想到 Obejct.defineProperty 或者 Proxy 那么接下来就慢慢实现吧. 先晒出是这样调用的,请牢记这个调用,后面会反复提到 test2 tes

Vant Weapp小程序蹲坑之使用checkbox组件

引子 checkbox-group及checkbox组件是开发小程序中频繁使用的组件,当然在vant weapp组件库中对应的分别是van-checkbox-group和van-checkbox.遗憾的是,官方提供的仅是组件在原生微信小程序框架下的用法,但我们所关注的是如何把这些组件改写到mpvue框架中.有关此二组件常用属性,在文后引用地址(官方)都有详细介绍,在此省略. 问题1:数据绑定与模板字符串问题 这个问题困绕了我很长时间,搜索网络,包括google英文搜索,几乎没有找到相应的答案.首

Vant Weapp小程序蹲坑之使用submit-bar组件

本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题.坑来坑去,先上示例代码吧,由简单到复杂顺序. main.js代码 main.json代码 index.vue代码 <template> <view> <van-panel title="基础用法"> <van-submit-bar :price="3050" button-text="提交订单" @submit=&

CK2020微信小程序入门与实战 常用组件API开发技巧项目实战

新年伊始,学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853  获取资料. 下载地址:https://pan.baidu.com/s/1hsU5EIS 微信小程序入门与实战 常用组件API开发技巧项目实战 小程序官方正式公告,开放了更多的入口,个人开发者可以申请

小程序-文章:微信小程序常见的UI框架/组件库总结

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大

Vant Weapp小程序蹲坑之使用toast组件

问题 使用Mpvue框架结合Vant Weapp组件库进行微信小程序开发中使用toast组件时,不小心又陷入"坑"中,当然主要还是路径问题. 注意点 使用toast组件时,与其它最普通的Vant Weapp组件相比,有几点需要注意.为了更方便理解,还是先上源码(index.vue),如下: <template> <div> <van-panel title="基础用法"> <van-picker :columns="

微信小程序里各种文件是干什么的?

微信小程序首次进入 其他地方略过,这里讲一下,为什么要勾选"在当前目录中创建quick start项目",quick start项目相当于word文档中的模板,可以在模板的基础上直接修改. 创建好了以后,会看到这个 中间的部分的目录,就是微信小程序的工程结构重要的是图中的这些文件分别是干什么的? 这些文件可以分为四类,分别是以js.wxml.wxss和json结尾的文件.以js结尾的文件,一般情况下是负责功能的,比如,点击一个按钮,按钮就会变颜色. 以wxml为后缀的文件,一般情况下负

小程序里使用es7的async await语法

我们做小程序开发时,有时候想让自己代码变得整洁,异步操作时避免回调地狱.我们会使用es6的promise. es7的async,await .promise在小程序和云开发的云函数里都可以使用. async和await只能在云开发的云函数里使用.我们在小程序的代码里直接使用,就会报如下错误. 这个报错就是告诉我们不能在小程序里直接使用es7的async和await语法.但是这么好的语法我们用起来确实显得代码整洁,逼格高.那接下来我就教大家如何在小程序代码里使用es7的async和await语法.

小程序里input宽度与文字显示的问题

不知道是不是bug,微信小程序里input宽度缩小,input可输入文字的区域会缩小的更多,比如说你把input宽度设置为90%,则input文字输入可显示的区域可能只有80%左右. //(存在疑点=>)目前的解决方法:在input输入框外面套一层view,通过改变view的宽度控制input的长度,这样不会影响文字显示 注意 input框上 不能加display:flex 属性 原文地址:https://www.cnblogs.com/panghu123/p/12178187.html