最近几天在做新项目,简单的小项目,可是因为没有UI,只能自己来搜索页面,根据功能点,自定义页面~一句话,自由发挥。
好希望有一个设计,好希望有一个UI同事啊~~~
(以上,纯属个人想法,以下,纯属个人应用结果,不喜勿喷)

想使用vue做项目,刚开始考虑的是没有UI,直接使用UI框架就可以了。然后开始纠结,是使用iview还是eui。然后百度,结果大家反馈,iview样式重写方便。眼见为虚,自己应用为实。然后我就从iview的官网上copy了一个layout布局页面,进行样式修改,结果发现,好像可以自己修改样式啊,好棒的一个框架啊!(仅限于,修改了各位数个样式)。
然后就开始了框架套用,用,用,用……结果,为什么form表单的样式不能修改,为什么menu菜单的主体只有light跟dark不能自定义……
好吧!貌似有点给自己挖坑的嫌疑,怎么办呢。查看源码,发现iview的Row标签在浏览器里面是解析为 ivu-row 的class,Rol标签解读为 ivu-rol,那么是不是就可以通用解读了捏?!??!
所以,最后的代码就变成了:

<div class="ivu-col-span-4">
  <ul class="menu_extend">
    <li class="menu_list" :class="{'active': item.isAct}" v-for="(item, index) in menu_data" :key="index">
      <i class="ivu-icon left img_ver" :class=" [item.icon_class]" ></i>
      <router-link :to="item.router">
        <span class="menu_title" @click="changeRouter(this, index)">{{item.name}}</span>
      </router-link>
    </li>
  </ul>

</div>

把 iview 当做class库来使用,只是本人暂时能想到的做法。如果大家有其他的好想法,欢迎留言。


2018 1/11 更新

<div class="ivu-row msg__add">
    <div class="ivu-col-span-5 ivu-col-offset-2">客户管理员:</div>
     <div class="ivu-col-span-14 ">
         <input type="text" class="ivu-input " v-model="customerUserName">
     </div>
 </div>
 <div class="ivu-row msg__add">
     <div class="ivu-col-span-5 ivu-col-offset-2">手机号码: </div>
     <div class="ivu-col-span-14 ">
         <input type="text" class="ivu-input " v-model="customerUserPhone">
     </div>
 </div>
Logo

前往低代码交流专区

更多推荐