美文网首页前端研习社vue.js
Web端使用Vue框架开发,记录一些细节点

Web端使用Vue框架开发,记录一些细节点

作者: AR7_ | 来源:发表于2019-01-10 08:52 被阅读19次

    1、input设置radio类型时,不显示圆圈,只需要设置style="display:none"即可。
    2、使用El-Table时,如果想要表单靠左侧,只需在<el-table-column>中设置fixed="left" width="50"即可进行更改。
    3、position:absolute;绝对定位,如果要在按钮右下角设置打钩图标,需要用到绝对定位,但是这样设置:

    .gouxuan {
      position: absolute;
      font-size: 30px;
      right: 0;
      bottom: 0;
      color: #03aaed;
    }
    

    会看到显示的是相对于浏览器来定位的,如果要在按钮空间能定位,需要在按钮最外层有position属性设置才行,所以这里加上默认设置position:relative即可。

    4、当鼠标指针在按钮区域时,指针变成小手样式,增加点击体验,只需在CSS样式中添加cursor: pointer

    5、input标签type为number时怎么去除加减按钮,
    6、since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "currentIndex"。
    ---在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据。vue不推荐直接在子组件中修改父组件传来的prop的值,如果要避免这个抛出错误,需要通过事件派发来处理。(https://segmentfault.com/q/1010000008692370)(https://cn.vuejs.org/v2/guide/components-custom-events.html)

    7、white-space: nowrap规定段落中不进行换行。

    8、分页模块,位置设置靠右,只需要设置text-align: right即可。

           <div class="pagination-wrapper">
                  <div class="pagination">
                    <el-pagination :page-sizes="[10, 20, 30, 40,50]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="paginationPageSize" layout="total, sizes, prev, pager, next, jumper" :total="getTableData.length">
                    </el-pagination>
                  </div>
                </div>
    
     .pagination-wrapper {
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              margin-top: 16px;
              width: 100%;
              .pagination {
                margin-right: 12px;
                text-align: right;
              }
            }Ï
    

    相关文章

      网友评论

        本文标题:Web端使用Vue框架开发,记录一些细节点

        本文链接:https://www.haomeiwen.com/subject/zlrorqtx.html