uni的numberbox怎么用_uni-组件基本操作
組件基本知識點：
uniapp中：每個頁面可以理解為一個單頁面組件，這些單頁面組件注冊在pages.json里，在組件關系中可以看作父組件。
自定義可復用的組件，其結構與單頁面組件類似，通常在需要的頁面引入或者注冊到全局main.js中使用，這是子組件。
1、props? (props用于父組件給子組件傳遞參數，參數可以限制類型，可以設置默認值)
2、$emit(事件名，參數1，參數n)：用于向父組件傳遞事件，可攜帶子組件的參數
3、ref 用于獲取某個dom節點或子組件的注冊引用信息，在父組件的$refs對象里，分別指向dom元素或子組件的實例
4、如需在基本組件的內置事件傳遞新的參數，可使用$event占位默認參數，如 @change($event,新的參數)
如下代碼為一個彈窗組件：
{{title}}
{{item.name}}
確定
export default {
name:"popWindow",
props:{
title:{
type:String,
default:"標題"
},
max:{
type:[Number,String],
default:200
},
showPop:{
type:Boolean,
default:false
},
hasAni:{
type:Boolean,
default:true
},
holder:{
type:String,
default:"請輸入..."
},
swArr:{
type:Array,
default:function(){
return [{name:"開關",value:false}];
}
}
},
data(){
return {
textArea:""
}
},
methods:{
closePop(){
this.$emit("close");
},
changeSw(e,i){
//console.log(e);
//console.log(i);
this.$emit("change",e.detail.value,i);
},
confirmSet(){
let _self = this;
_self.$emit("click",_self.textArea);
}
}
}
.popup_box{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top:0;
left: 0;
z-index: 2000;
padding:0;
.pop_panel{
width: 520upx;
height: auto;
background: #fff;
border-radius: 8upx;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
.pop_tit{
width: 100%;
padding:30upx 0 10upx 0;
font-size: 30upx;
text-align: center;
font-weight: bold;
box-sizing: border-box;
}
.pop_switch{
width: 100%;
box-sizing: border-box;
padding:0 30upx;
font-size: 28upx;
switch{
transform: scale(0.6);
}
}
.pop_confirm{
margin-top:20upx;
width: 100%;
text-align: center;
font-size: 28upx;
color: #fff;
background: #009714;
height: 60upx;
line-height: 60upx;
border-bottom-left-radius: 8upx;
border-bottom-right-radius: 8upx;
}
.pop_area{
width: 460upx;
height: 200upx;
min-height: 200upx;
padding:20upx 20upx;
font-size: 26upx;
text-align: justify;
box-sizing: border-box;
border:2upx solid #e6e6e6;
margin:10upx auto;
}
.pop_close{
width:26upx;
height:26upx;
position: absolute;
right: 2upx;
top:-40upx;
image{
width: 100%;
height: 100%;
display: block;
}
}
}
.pop_panel.ani{
animation: fadeIn 0.6s ease 0s 1 alternate;
animation-fill-mode: backwards;
}
}
用法：
main.js中注冊全局組件使用：
import popWindow from ‘components/uni-part/pop-window.vue‘Vue.component(‘popWindow‘,popWindow);
頁面中調用：
data() {return{
showPop:false,
arr:[{name:"資質證書",value:true}]
}
}
methods: {
changeSw(e,i){
console.log(e,i);var newArr =_self.arr;
newArr[i].value=e;
_self.arr=newArr;
},
confirmFun(e){//文本輸入框和開關值都在這里了
console.log(e);
console.log(_self.arr);
_self.changePop();
},
changePop(){
_self.showPop= !_self.showPop;
}
}
效果如下：
總結
以上是生活随笔為你收集整理的uni的numberbox怎么用_uni-组件基本操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql cmd ping_cmd命令
- 下一篇： mysql 主机类型_实现在别的电脑上访