解決vue input或el-input type="number"輸入數(shù)字,去除右側(cè)箭頭問題
一、具體問題為
input或者el-input中添加type=number來控制只可輸入數(shù)字。
但隨之而來的問題是 輸入框右側(cè)會有個上下調(diào)整箭頭
二、解決方法
2.1、input
常用的解決方法，實際是將控制顯示箭頭的 css樣式去掉；
但少部分會不好用，因此可以添加個class來指定。
<template>
<Input v-model="value" placeholder="微信內(nèi)部號碼" type="number" number="true" class="aaaa" :maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa(event)">
<span slot="prepend">微信</span>
</Input>
</template>
<script>
export default {
data () {
return {
value: ''
}
},
methods:{
changeaa(event){
//禁止非數(shù)字字符輸入
if(event.keyCode<48||event.keyCode>57)event.returnValue=false;
}
}
}
</script>
<style>
.aaaa input::-webkit-outer-spin-button,
.aaaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.aaaa input[type="number"] {
-moz-appearance: textfield;
}
</style>
2.2、el-input
不過對于el-input此方法仍然不好用
其中
v-model.number 使用修飾符.number可以將輸入的數(shù)據(jù)轉(zhuǎn)換為Number類型，否則雖然你輸入的是數(shù)字.但仍為子串類型
然后我們將type設(shè)置為number，但發(fā)現(xiàn) 樣式設(shè)置后，仍不生效。
因此，使用/deep/
<el-form-item label="測試數(shù)字編號" prop="departnum_id">
<el-input v-model.number="deptForm.departnum_id" type="number" class="numrule":min="0" :max="99999" placeholder="11001" />
</el-form-item>
<style lang="css" scoped>
/deep/.numrule input::-webkit-outer-spin-button,
/deep/.numrule input::-webkit-inner-spin-button {
-webkit-appearance: none!important;
}
/deep/.numrule input[type="number"]{
-moz-appearance: textfield;
}
</style>
2.3 、/deep/
vue /deep/深度選擇器
作用
vue官方是說明deep用法。
為了保證每個組件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域
<style scoped>
.a >>> .b { /* ... */ }
</style>
2.3.1 使用場景
我們知道在vue組件中樣式中添加 scoped，那么這個樣式就會被設(shè)定為只影響這個vue組件內(nèi)的內(nèi)容
假定某個vue組件又引用了element-ui 亦或者其他UI組件；
此時 UI不滿意element-ui的樣式，想要在這個頁面微調(diào)下element-ui的頁面；
但不能影響全局element-ui組件樣式。
那么我們就需要使用/deep/ 來穿透scoped。
<style lang="scss" scoped>
.a /deep/ .b {
......
/deep/ .c {
....
}
}
</style>
2.3.2 注意事項
1、由于deep是vue-loader中的標(biāo)準(zhǔn)。并不是現(xiàn)行的 css標(biāo)準(zhǔn)。無論是 vue-cli2 中的static文件夾以及vue-cli3中的public文件夾都是僅僅執(zhí)行了copy_webpack_plugin 所以兩者中的css不能使用/deep/選擇器。
2、deep不可以嵌套使用。嵌套使用的話，內(nèi)層的deep不會被正確打包
& /deep/ .isModify{
& /deep/ .el-input__inner{
border-color: #f6dfd4;
background-color: #fff4ef;
color: #ff6000;;
}
}
3、在Chrome瀏覽器下是沒有問題的，但是在其他瀏覽器上就完全不可行了
因為/deep/選擇器這個是chrome瀏覽器自己的標(biāo)準(zhǔn)，其他瀏覽器并沒有實現(xiàn)這個標(biāo)準(zhǔn)，所以其他瀏覽器是失效的。
有意思的是，google說會在chrome的63這個版本，移除/deep/的支持，不知道為啥現(xiàn)在最新的還是會有？
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?vant使用ImagePreview實現(xiàn)預(yù)覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實現(xiàn)預(yù)覽圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過來的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實現(xiàn)后臺管理權(quán)限系統(tǒng)及頂欄三級菜單顯示功能
這篇文章主要介紹了vue實現(xiàn)后臺管理權(quán)限系統(tǒng)及頂欄三級菜單顯示功能，本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
前端實現(xiàn)簡單的sse封裝方式(React hook Vue3)
這篇文章主要介紹了前端實現(xiàn)簡單的sse封裝方式(React hook Vue3),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關(guān)于vue中如何實時監(jiān)聽div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計算屬性和偵聽器來動態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下2023-09-09
Mockjs是一個用于生成隨機數(shù)據(jù)和攔截Ajax請求的庫,可以與Vue和Axios結(jié)合使用,提高前端開發(fā)效率,通過在項目中引入Mock.js文件,可以模擬后端API,攔截Ajax請求并返回自定義響應(yīng),這種方法適用于在后端尚未開發(fā)完成時的前端開發(fā)測試2024-10-10
Vue自定義指令學(xué)習(xí)及應(yīng)用詳解
這篇文章主要為大家詳細介紹了Vue中自定義指令的學(xué)習(xí)以及如何利用Vue制作一個簡單的學(xué)生信息管理系統(tǒng)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
這篇文章主要介紹了Vue多組件倉庫開發(fā)與發(fā)布詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)websocket客服聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10