记录为 uni-app的扩展组件(uni-ui)和 微信小程序标签 添加行内样式的正确做法

如题,首先,正确为微信小程序标签添加行内样式,其做法是:(以view为例)

html 复制代码
<view style="width: 400rpx; height: 400rpx; background-color: green;">goods_list</view>

也就是说,直接像写css一样直接写在双引号内就行了,无需考虑background-color要不要写成驼峰形式、400rpx要不要加上引号等等,因为vue里添加样式 是 :style="{...}"绑定,以为小程序也是这样,摸索了好一会儿。

同理,对于uni-app的扩展组件uni-ui,传入的customStyle也是直接像微信小程序的style里一样,直接传入css写法的字符串即可,以 uni-tag组件的customStyle为例:

html 复制代码
<uni-tag :customStyle="tagStyle"></uni-tag>
<script>
export default {
  data () {
    return {
      tagStyle: "background-color: blue;"
    }
  }
}
</script>

因为之前vue传入样式都是传入一个对象,这里摸索了好久,记录一下。

相关推荐
Samuel-Gyx28 分钟前
前端 CSS 样式书写与选择器 基础知识
前端·css
天天打码1 小时前
Rspack:字节跳动自研 Web 构建工具-基于 Rust打造高性能前端工具链
开发语言·前端·javascript·rust·开源
字节高级特工1 小时前
【C++】”如虎添翼“:模板初阶
java·c语言·前端·javascript·c++·学习·算法
db_lnn_20212 小时前
【vue】全局组件及组件模块抽离
前端·javascript·vue.js
Qin_jiangshan2 小时前
vue实现进度条带指针
前端·javascript·vue.js
菜鸟una2 小时前
【layout组件 与 路由镶嵌】vue3 后台管理系统
前端·vue.js·elementui·typescript
小张快跑。2 小时前
【Vue3】使用vite创建Vue3工程、Vue3基本语法讲解
前端·前端框架·vue3·vite
Zhen (Evan) Wang2 小时前
.NET 8 API 实现websocket,并在前端angular实现调用
前端·websocket·.net
星空寻流年3 小时前
css3响应式布局
前端·css·css3
Anesthesia丶3 小时前
Vue3 + naive-ui + fastapi使用心得
vue.js·ui·fastapi