美文网首页前端研习社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