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

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;
          }
        }Ï

9、element ui 怎么修改单独一个label的颜色

10、文字下划线

          border-bottom: 1px solid #1ba261;
          // 下划线距离文字的间隔
          padding-bottom: 1px;

11、当使用v-if时,有时会出现视图无法及时响应,所以需要使用:

this.$nextTick(() => {})

12、Vue中,当移动鼠标至文字位置时,文字颜色会改变,鼠标移出时,文字颜色变回之前默认的颜色。

  <span class="allow-edit-text" :style="{color:(editTextColor?'#409eff':'#3e3a39')}" @click="allowEditClick" @mouseover="onEditMouseover" @mouseout="onEditMouseout">编辑</span>

  ...
  methods: {
    onEditMouseover () {
      this.editTextColor = true
    },
    onEditMouseout () {
      this.editTextColor = false
    }
}

13、修改elememt-ui中<el-from-item>中label的文本的颜色

         <el-form-item>
              <span slot="label" class="label-text">用户名</span>
              <el-input></el-input>
            </el-form-item>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,989评论 0 29
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,298评论 0 11
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,125评论 0 6
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,269评论 0 25
  • 1. 归类: 聚类(clustering) 属于非监督学习 (unsupervised learning...
    遇见百分百阅读 292评论 0 0