做网站域名需哪些,西安搜索引擎优化,百度贴吧网页版入口,室内设计者联盟目录 1. 动态间距调整1.1 效果演示1.2 代码演示 2. 固定间距2.1 效果演示2.2 代码演示 其他情况 1. 动态间距调整
1.1 效果演示
并行效果 并列效果
1.2 代码演示
templatediv stylemargin-bottom: 15pxdirection:el-radio v-modeld… 目录 1. 动态间距调整1.1 效果演示1.2 代码演示 2. 固定间距2.1 效果演示2.2 代码演示 其他情况 1. 动态间距调整
1.1 效果演示
并行效果 并列效果
1.2 代码演示
templatediv stylemargin-bottom: 15pxdirection:el-radio v-modeldirection valuehorizontalhorizontal/el-radioel-radio v-modeldirection valueverticalvertical/el-radio/divdiv stylemargin-bottom: 15pxfillRatio:el-slider v-modelfillRatio //divel-space fill wrap :fill-ratiofillRatio :directiondirection stylewidth: 100%测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input //el-space/template
script setup
import { ref } from vueconst direction ref(horizontal)
const fillRatio ref(10)
/script
style langscss scoped/style
2. 固定间距
2.1 效果演示 2.2 代码演示
其实就是去掉了那个调整标签el-slider 等等。
template el-space fill wrap :fill-ratiofillRatio :directiondirection stylewidth: 100%测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input //el-space/template
script setup
import { ref } from vueconst direction ref(horizontal)
const fillRatio ref(10) //重点关注这个值固定参数
/script
style langscss scoped/style
其他情况 有可能因为内容没占满整行而导致width: 100% 平铺到整行的情况。如下所示 解决方案就是添加div/div标签如 el-space fill wrap :fill-ratiofillRatio :directiondirection stylewidth: 100%测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input /div测试输入框间隔距离:el-input v-modelinput stylewidth: 240px;margin-right: 100px ; placeholderPlease input //div/el-space效果 这样就好啦~ 需要调整的细节在调整一下就ok~ 感谢观看~~
