鍍金池/ 問答/HTML/ element ui中如何自定義一個(gè)el-date-picker的尺寸

element ui中如何自定義一個(gè)el-date-picker的尺寸

<el-date-picker
      v-model="value1"
      type="date"
      placeholder="選擇日期">
    </el-date-picker>

渲染出來的input通過父級(jí)元素+input標(biāo)簽設(shè)置樣式無效

clipboard.png

element中普通的一個(gè)輸入框，大部分都是默認(rèn)的尺寸，現(xiàn)在想對(duì)其中某幾個(gè)做樣式調(diào)整，改變寬高和顏色，怎么處理？直接在父級(jí)元素加class后設(shè)置樣式，因?yàn)閐om沒有，所以webpack打包后樣式不見了。該怎么處理呢？

回答
編輯回答
夢(mèng)一場(chǎng)

謝邀~

<el-input
  class="input-class"
  placeholder="請(qǐng)輸入內(nèi)容"
  v-model="input1"
  :disabled="true">
</el-input>
.input-class{
    width: 500px;
    height: 40px;
}

這樣即可。
// 關(guān)于date-picker 可以根據(jù)渲染處理的樣式名追加樣式呀

<div class="block">
    <span class="demonstration">默認(rèn)</span>
    <el-date-picker class="input-class" v-model="value1" type="date" placeholder="選擇日期">
    </el-date-picker>
</div>
.input-class{
  .el-input__inner{
    width: 50px; 
  }  
}

webpack打包后scoped的樣式丟失，有兩種方案。1、單獨(dú)樣式不用scoped，2、使用/deep/。

// 單獨(dú)給這個(gè)input寫個(gè)style
<style lang="less">
 .input-class{
  .el-input__inner{
    width: 50px; 
  }  
}
</style>
<style lang="less" scoped>
.other{}
</style>

或者用深度選擇器/deep/。具體查看官方文檔

2018年2月1日 05:24
編輯回答
情殺

謝邀。element-ui 也是可以設(shè)置 class 去關(guān)聯(lián) css 的
這是一個(gè)項(xiàng)目中的 el-input
clipboard.png

2018年3月3日 19:09