uni的numberbox怎么用_uni-组件基本操作
組件基本知識(shí)點(diǎn)：
uniapp中：每個(gè)頁(yè)面可以理解為一個(gè)單頁(yè)面組件，這些單頁(yè)面組件注冊(cè)在pages.json里，在組件關(guān)系中可以看作父組件。
自定義可復(fù)用的組件，其結(jié)構(gòu)與單頁(yè)面組件類(lèi)似，通常在需要的頁(yè)面引入或者注冊(cè)到全局main.js中使用，這是子組件。
1、props? (props用于父組件給子組件傳遞參數(shù)，參數(shù)可以限制類(lèi)型，可以設(shè)置默認(rèn)值)
2、$emit(事件名，參數(shù)1，參數(shù)n)：用于向父組件傳遞事件，可攜帶子組件的參數(shù)
3、ref 用于獲取某個(gè)dom節(jié)點(diǎn)或子組件的注冊(cè)引用信息，在父組件的$refs對(duì)象里，分別指向dom元素或子組件的實(shí)例
4、如需在基本組件的內(nèi)置事件傳遞新的參數(shù)，可使用$event占位默認(rèn)參數(shù)，如 @change($event,新的參數(shù))
如下代碼為一個(gè)彈窗組件：
{{title}}
{{item.name}}
確定
export default {
name:"popWindow",
props:{
title:{
type:String,
default:"標(biāo)題"
},
max:{
type:[Number,String],
default:200
},
showPop:{
type:Boolean,
default:false
},
hasAni:{
type:Boolean,
default:true
},
holder:{
type:String,
default:"請(qǐng)輸入..."
},
swArr:{
type:Array,
default:function(){
return [{name:"開(kāi)關(guān)",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中注冊(cè)全局組件使用：
import popWindow from ‘components/uni-part/pop-window.vue‘Vue.component(‘popWindow‘,popWindow);
頁(yè)面中調(diào)用：
data() {return{
showPop:false,
arr:[{name:"資質(zhì)證書(shū)",value:true}]
}
}
methods: {
changeSw(e,i){
console.log(e,i);var newArr =_self.arr;
newArr[i].value=e;
_self.arr=newArr;
},
confirmFun(e){//文本輸入框和開(kāi)關(guān)值都在這里了
console.log(e);
console.log(_self.arr);
_self.changePop();
},
changePop(){
_self.showPop= !_self.showPop;
}
}
效果如下：
總結(jié)
以上是生活随笔為你收集整理的uni的numberbox怎么用_uni-组件基本操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： mysql cmd ping_cmd命令
- 下一篇： mysql 主机类型_实现在别的电脑上访