Vue+ElementUI学习遇到问题及后续解决方法(1)

        自从2018年发的第一个文章就再也没发过文章,虽然一直沿着Unity的方向往下走,也在平时精进了Unity的知识,尝试用WebGL的方式去发布Unity项目,也自己去尝试学习Shader脚本写一些比较普通的Shader效果,但都是皮毛。

        接触过发布WebGL项目之后,自然而然的接下了前端制作的工程,在大佬的指导下学习了十天左右的前端,也有了一些回顾的时候可以重新思考研究的问题 。

        本篇主要是前端萌新的一些记录,如有错误大家可以在评论中告知。按照大佬给我的Bootstrap到Vue2.0+ElementUI的路线, 我在制作前端界面中遇到的一些问题和解决方式写在这里。

        1.在ElementUI的布局过程中,在Vue文件中可以通过<el-col :span="6"></el-col>的形式把整个横向页面平分成24分栏,如果数量少还算方便,Ctrl+D就可以快速生成,但是如果需要生成一系列的类似的布局效果的话,是否可以利用v-for加[]内容的形式去自动生成网页内容?

        1.解决方案:未解决 

        2. 如何让网页内容变成可以在后台?或者增加data中的内容直接自动排版成想要的样子,如在一个row中本来只需要装上3个内容物,各占33.33%,这时如果需要改变成装载4个内容物,如何让它自动把比例换成25%?不知道这种效果是否可以实现?

        2.解决方案:未解决 

        3.网页上的布局,若是需要使用margin等方式偏移一定的px,因为本项目计划在PC端和移动端都适配,那么在PC上看着合适的px数值是否会出现不可预知的尺寸问题,在PC端使用怎样的单位会更方便两端的适配,以及如何实现这一方式的适配?(看到有一些关于rem和px的内容可以实现这个功能,但作为萌新我看不是很明白)

        3.解决方案:未解决 

        4. 如何把图片作为底部背景图放置在<el-main></el-main>之下?

        4.解决方案:背景图写成以下样式即可,类似Unity试图的先渲染哪部分。

.backImg{
    i-index:-1;
    position:absolute;
}
.upText{
    z-index:1;
}

        5. 如何把ElementUI的dropdown下拉菜单的右边小三角去掉?

        5.解决方案:未解决,目前先使用了导航菜单解决当前需求。

        6. 字体垂直对齐方法。

        6.解决方案:已解决 ,改为以下两height相等样式即可。

.text{
    height : 50px;
    line-height : 50px;
}

        7.Vue文件中如何进行连接,点击按钮转至另一Vue文件对应的页面的方式? 关于Vue具体实现方式比较迷惑,只是照着教程安装好后,在index.html处改变component换页面的方式运行npm run dev执行的,后续认真思考一下这之间的关系。

        7.解决方案:未解决 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值