el-divider组件整体还是比较简单的,主要是函数式组件的参数使用细节 组件封装的效果图 组件封装的代码 使用的代码 <template>实线solid靠左<my-dividerclass="staticClass_must_hava"content-position="left">早上好</my-divider>实线solid居中<my-dividercontent-position="center">中午好</my-divider>实线solid靠右<m...
element分割线el-divider: 项目需要使用到竖线,但是排版不是多行的,自定义了样式,使用el-divider的竖线分隔; 原api地址:https://element.eleme.cn/#/zh-CN/component/divider html <el-row:gutter="20"style="height:80px;"><el-col:span="12">采购计划单号制单人备注<el-dividerdirection="vertical"content...
css /*分割线样式*/ .el-divider--horizontal{ border-top: 1px solid #adadad; } html <el-divider></el-divider>
单选框添加按钮边框样式,通过border属性实现。 HTML代码: <el-radiov-model="radio2"label="basketball"border>篮球</el-radio><el-radiov-model="radio2"label="football"border>足球</el-radio>选中:{{radio2}}<el-divider></el-divider> JS代码: ...
如下代码,即为将1行等分为2列,为了便于区分列,我们为列添加了不同的样式,另外注意<el-divider></el-divider>是分割线,此处用于区分不同的示例。 <template> 每行24分栏布局 <el-row> <el-col :span="12" class="lightgreen-box">示例1</el-col> <el-col :span="12"...
带边框的多选框样式更加富有科技感,但是用法是一样的。HTML代码部分添加border属性即可: 带边框的多选框:<el-checkboxv-model="checkedBasketball"border>篮球</el-checkbox><el-checkboxv-model="checkedFootball"border>足球</el-checkbox><el-divider></el-divider> ...
(-50%) 23 } 24 .el-divider__text.is-right { 25 right:20px; 26 -webkit-transform:translateY(-50%); 27 transform:translateY(-50%) 28 } 29 .el-image__error,.el-image__inner,.el-image__placeholder { 30 width:100%; 31 height:100% 32 } 33 .el-image { 34 position:relative;...
><my-tag>默认标签</my-tag><my-tagclosable>默认标签可关闭</my-tag><my-dividerlineType="dotted"content-position="left">类型标签样式</my-divider ><my-tagtype="primary">类型标签primary</my-tag><my-tagtype="primary"closable>类型标签primary可关闭</my-tag><my-tagtype="success">类型标签succe...
演示的话,直接复制粘贴即可,结合注释更好理解。注意my-divider组件是之前封装的组件。 笔者封装的组件和官方封装的组件在一些细节的地方可能略有不同,算是多一个解法思路吧^o^ 使用代码 <template><my-dividerlineType="dashed"content-position="left">五种链接样式</my-divider><my-link>默认超链接</my-link...