您的当前位置:首页>全部文章>文章详情

【Vue】Andt Pro Vue的使用(六) —— 描述列表a-descriptions设置label和content的样式

CrazyPanda发表于:2024-05-09 14:24:55浏览:381次TAG:

1、 a-descriptions设置label和content的样式

在react组件中,可以直接设置labelStyle和contentStyle,来设置label和content的样式,

但是在vue2的组件中,官方并没有给出响应的设置方法https://1x.antdv.com/components/descriptions-cn/

如下是我的订单详情页面

无标题.png

label的宽度是自适应的,想要设置为固定的宽度,网上找了好多方法,都不生效

直到遇到下面的方法

https://blog.csdn.net/fifty_one/article/details/120219194

要使用/deep/,

/deep/.ant-descriptions-row > th {
    padding-bottom: 8px !important; width: 20% !important;
}

果然,如此设置后缺失生效了

无标题.png

这个deep是干什么的,在CSS样式汇总有什么用?

2、deep

含义:

/deep/ 深度选择器

用法

在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,

就不会影响到子组件的样式。

我们在加了 scoped 之后样式会自动添加一个hash值。比如下面所示:

.title[data-v-211e4c4a] {
    color: #ff0;
}

当你想在父组件修改子组件的样式,就需要使用/deep/。比如下面所示:

<style scoped>
/deep/ .title{
    color: #ff0;
}
</style>

>>>/deep/ 以及 ::v-deep三种的效果均是在父组件改变子组件的样式。      

一些预处理器(例如Sass)可能无法正确解析>>>。在这些情况下,可以改用/deep/或::v-deep组合器,两者都是它的别名,并且和>>>工作原理完全相同。

猜你喜欢

【Vue】Vue中对axios进行封装的最佳实践
vue是当前前端开发中最常用的框架之一,而ajax请求又是前端开发中非常关键的一环。为了方便开发者使用,vue社区中出现了许多对ajax请求库axios进行封装的实践。本文将介绍vue中对axios进行封装的最佳实践,帮助您更好地理解如何在vue项目中使用axios。封装axios在Vue项目中,我们需要把axios进行封装以方便使用。这里介绍一个标准的axios封装:import&nbsp;axios&nbsp;from&nbsp;&#39;axios&#39; import&nbsp;sto
发表于:2024-04-29 浏览:310 TAG:
【Vue】vue框架怎么运行
vue.js是一个用于构建用户界面的javascript框架,其工作原理包括:模板编译:将html模板编译为vdom;响应式系统:检测数据变化并更新vdom;dom更新:有效更新dom,最小化操作次数;自动渲染:监视数据变化并自动重新渲染ui。Vue.js框架的工作原理Vue.js是一个用于构建用户界面(UI)的JavaScript框架。它采用“响应式”系统,当数据发生变化时,框架会自动更新UI,简化了Web开发过程。Vue.js框架的工作流程:1. 模板编译:Vue.js将HTML模板编译为虚
发表于:2024-04-21 浏览:304 TAG:
【Vue】Antd Pro Vue的使用(十) —— a-form表单赋值
在Ant Design Pro Vue中,为表单赋值通常涉及到两个方面:一是使用v-model进行双向绑定,二是直接通过this.form.setFieldsValue()方法设置表单字段的值。以下是一个简单的例子,展示如何为Ant Design Pro Vue中的表单赋值:首先,确保你已经在组件中引入了a-form-model和相关的表单字段组件比如a-form-model-item和a-input。在data函数中定义一个form对象,它包含了你想要绑定的表单字段。使用v-model指令将输
发表于:2024-05-10 浏览:301 TAG:
【Vue】Antd Pro Vue的使用(九) —— 抽屉a-drawer的操作按钮设置
在antd pro vue2中,a-drawer默认是没有操作按钮的,只有右上角的关闭&#39;X&#39;号,需要自己配置提交和取消按钮提交方法对应@submit方法,取消方法对应@close方法(a-model对应的取消方法是@cancel),都是父页面传过来的方法&lt;a-drawer &nbsp;&nbsp;&nbsp;&nbsp;:title=&quot;model&nbsp;?&nbsp;&#39;编辑类型&#39;&nbsp;:&nbsp;&#39;新建类型&#39;&quot;
发表于:2024-05-10 浏览:330 TAG:
【Vue】Antd Pro Vue的使用(十一) —— 富文本编辑器wangeditor的使用(避坑)
我承认,antd pro vue2是免费的,已经是老版本了,有多老呢,自带的wangeditor竟然是V3.1.1版本的,两年前无用wangeditor的时候已经是V5版本了,V3简直是上古的东西,官网都没有找到V3版本的资料。。。。,好在最后还是找到了一份V3版本的资料,要不然又要花时间去用新版本了。wangeditor V3参考资料:https://www.kancloud.cn/wangfupeng/wangeditor3/335782下面是框架组件的配置:问题出现的原因:做商品详情的时候
发表于:2024-05-10 浏览:273 TAG:
【Vue】Vue常用框架介绍
现在的应用基本都是前后端分离,在国内,Vue相对来说更受欢迎一些,我们很多后端系统的前端都是Vue来开发的。那么Vue UI框架就显得尤为重要。Vue UI框架提供了一套丰富的用户界面组件及完整的前端UI解决方案,如按钮、表单、导航、布局等,使得开发者可以专注于业务逻辑开发,而不用从零构建这些常用的界面元素,帮助开发者更快速地构建高质量的用户界面。那么,都有哪些开源的UI框架呢?Element UIElement UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库,提供了丰富的
发表于:2024-04-22 浏览:431 TAG:
【Vue】前端框架 Vue3框架 使用总结(一) Vue框架的基础使用
目录一、Vue3框架基础1、创建项目2、项目结构3、Vue基础语法4、组件之间通信5、组合式api二、VueRouter的基础使用1、安装2、使用案例3、完整案例步骤4、调优-路由懒加载三、Vuex数据管理1、实现案例&nbsp;2、更改store状态,同步操作3、store中的计算属性4、redux里的异步操作Action5、模块化管理四、网络请求Vue3官方文档:Vue.js - 渐进式 JavaScript 框架 | Vue.js基础部分见官方文档一、Vue3框架基础1、创建项目安装yar
发表于:2023-12-05 浏览:781 TAG:
【Vue】Antd Pro Vue的使用(八) —— 表单组件的常用配置
1、清除配置allow-clear在ant design react组件中,表单组件默认都有清除按钮(输入框右侧的小黑叉号),在vue组件中需要自己配置,即给组件加上allow-clear属性并且所有组件都支持这个属性,a-input、a-select、a-textarea、a-date-picker等都支持&lt;a-form-item&nbsp;label=&quot;用户名&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;a-input&nbsp; &nbsp;
发表于:2024-05-10 浏览:279 TAG:
【VUE】如何查看前端的vue项目是vue2还是vue3项目
1. 检查package.json文件在项目的根目录下,打开package.json文件,查找dependencies或devDependencies部分中的vue条目。版本号将告诉你是Vue 2还是Vue 3。例如:Vue 2.x: &quot;vue&quot;: &quot;^2.x.x&quot;Vue 3.x: &quot;vue&quot;: &quot;^3.x.x&quot;2. 使用Vue Devtools如果项目正在运行,并且你已经安装了Vue Devtools(Vue开发者
发表于:2024-03-11 浏览:413 TAG:
【Vue】uniapp(vue3)+node.js+websocket(实现实时通信效果)
文章目录概要整体架构流程技术名词解释技术细节小结概要uniapp基于vue3,小程序的聊天功能项目是基于node.js服务器搭建的简易双向通信网页,实现了实时更新在线人数以及用户间即时通讯的功能。整体架构流程后台接口代码1、首先我们可以通过Express 应用程序生成器快速搭建一个后台框架。(这快可以参考官网)2、服务端/** &nbsp;*&nbsp;WebSocket模块 &nbsp;*/ &nbsp; const&nbsp;{&nbsp;WebSocketServer&nbsp;}&amp;nbs
发表于:2023-12-05 浏览:297 TAG: